為什么map（）在嵌套數組中改變原始對象？

Question

我正在嘗試使用map（）創建一個新的對象數組（usersData），以便添加一個從二級數組（國家/地區）分配值的新屬性。 在我的測試中，我注意到我的原始對象數組（用戶）已被修改，並且新屬性（countryName）已添加到其中。 當我使用map為我的數組國家創建一個新的對象數組時，沒有發生同樣的情況。 有人能告訴我是什么導致了這個並幫助我理解如何避免這種行為？

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=> {
  const newUser = {};
  newUser.name = user.name;
  newUser.contactDetails = user.contactDetails;
  newUser.contactDetails.countryName = "UK";
  return newUser;
});

const countriesData = countries.map(country =>
  {
    const newCountry = {};
    newCountry.name = country.countryName;
    newCountry.continent = "Europe";
    return newCountry;
});
console.log(countries);  
console.log(countriesData); 
console.log(users);
console.log(usersData);

我希望數組用戶中的元素保持其原始結構，但現在將屬性contactDetails.countryName設置為“UK”

Answer 1

在users.map()的每次迭代中， user.contactDetails保存對您存儲在新newUser.contactDetails的object的引用。 所以兩者都會在內存中引用相同的對象。 在您的特定情況下，您可以解決這個問題，將user.contactDetails傳播到一個新對象（就像克隆它一樣）。 但請注意，這僅適用於1-level深度對象。 如果結構更復雜，則應搜索deep-cloning 。

 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 => { const newUser = {}; newUser.name = user.name; newUser.contactDetails = {...user.contactDetails}; newUser.contactDetails.countryName = "UK"; return newUser; }); const countriesData = countries.map(country => { const newCountry = {}; newCountry.name = country.countryName; newCountry.continent = "Europe"; return newCountry; }); console.log("countries:", countries); console.log("countriesData:",countriesData); console.log("users:", users); console.log("usersData:", usersData); 

 .as-console {background-color:black !important; color:lime;} .as-console-wrapper {max-height:100% !important; top:0;} 

Answer 2

你正在構建一個新陣列。 這並不意味着你也在構建一個新的一切 - 在陣列內部。

這個：

newUser.contactDetails = user.contactDetails;

正在重用原始數組元素中的user.contactDetails對象，所以這樣：

newUser.contactDetails.countryName = "UK";

正在修改新數組和舊數組之間共享的對象。