使用map（）时克隆对象属性的最佳方法是什么？

Question

I want to add a new property (contactDetails.countryName) and assign a value to a nested object stored in an array called users using the function map().

I've recently learned that I should use the spread operator (...) and then create / assign the new property in order to avoid mutating my original array of objects so I've developed 2 different implementations for this but I'm not really confident I'm following the best practices to accomplish I want to regarding the semantic and performance.

What would be the best approach to accomplish what I want to do in your opinion?

const countries = [
  { id: 3, countryName : "UK" },
  { id: 4, countryName : "Spain" },
  { id: 6, countryName : "Germany"}
];


const users = [
  { id : 1,
    name: "Douglas Camp",
    dateOfBirth: "23-06-1984",
    contactDetails:
      {
        country: 3,
        phone: "7373724997"
      }
  },
  {
    id : 2,
    name: "Martin Stein",
    dateOfBirth: "19-08-1992",
    contactDetails:
      {
        country: 6,
        phone: "3334343434"
      }
  },
];


const usersData = users.map(user=> {

// Version 1 : using spreading operator twice 

const newUser = {
    ...user,
    contactDetails: {
      ...user.contactDetails,
      countryName: countries.find(c=> c.id == user.contactDetails.country).countryName
    }
  };  
  return newUser;
});

// Version 2: copying the original object property and using spread operator only for cloning the nested object properties

const newUser = {
    id: user.id,
    name: user.name,
    dateOfBirth: user.dateOfBirth,
    contactDetails: {
      ...user.contactDetails,
      countryName: countries.find(c=> c.id == user.contactDetails.country).countryName
    }
  };

console.log(users);
console.log(usersData);

Answer 1

Here is an approach you can consider:

• First of all I would Array.reduce the countries to a Map so you can get them via key / value or in this case by countries.get(key) and avoid filtering that array every time.

• You can map through the users and for each one create a new object. In this case I call them accounts .

• You can also consider using Object.assign

• Note that both ... operator and Object.assign are shallow clone approaches . They do not recursively clone the nested objects/children. For that you can use JSON.stringify and JSON.parse etc.

 let countries = [ { id: 3, countryName : "UK" }, { id: 4, countryName : "Spain" }, { id: 6, countryName : "Germany"} ].reduce((r,{id, countryName}) => (r.set(id, countryName), r), new Map()) // reduce with Map let users = [ { id : 1, name: "Douglas Camp", dateOfBirth: "23-06-1984", contactDetails: { country: 3, phone: "7373724997" } }, { id : 2, name: "Martin Stein", dateOfBirth: "19-08-1992", contactDetails: { country: 6, phone: "3334343434" } }, ]; let accounts = users.map(user => Object.assign({}, user, { // <-- map through contactDetails: { ...user.contactDetails, countryName: countries.get(user.contactDetails.country) // <-- get by key } })) users[0].id = 2 // <-- modify users users[0].contactDetails.phone = "00000" console.log(users, accounts) // <-- no changes to accounts 

Notice when we update the users[0].id and users[0].contactDetails.phone the accounts values did not update.

Answer 2

I normally use version 1, the spread operator twice. I also would consider checking out immer which allows you to do mutable updates on a cloned draft and handles merging it back for you.

const newUser = immer(user, draft => {
  draft.contactDetails.countryName = countries.find(
    c => c.id == user.contactDetails.country).countryName
  )
})

Just edit the specific property you want and immer handles copying the rest of it.

Answer 3

Cloning and merging MapsSection Just like Arrays, Maps can be cloned:

var original = new Map([
  [1, 'one']
]);

var clone = new Map(original);

console.log(clone.get(1)); // one
console.log(original === clone); // false. Useful for shallow comparison

Answer 4

I personally like to use Version 1, as it makes your code much less redundant and easier to read. It also passes all the properties of 'user' down to newUser.