gpt4 book ai didi

javascript - 为什么 map() 会改变嵌套数组中的原始对象?

转载 作者:行者123 更新时间:2023-11-30 11:04:14 25 4
gpt4 key购买 nike

我正在尝试使用 map() 创建一个新的对象数组 (usersData),以便添加一个新属性,该属性分配有来自辅助数组(国家/地区)的值。在测试期间,我注意到我的原始对象数组(用户)已被修改,并且新属性(国家/地区名称)已添加到其中。当我使用 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);

我希望数组 users 中的元素保持其原始结构,但它现在的属性 contactDetails.countryName 设置为“UK”

最佳答案

users.map() 的每次迭代中,user.contactDetails 持有对您存储在新的 object 中的引用newUser.contactDetails。所以两者都将引用内存中的同一个对象。在您的特定情况下,您可以解决将 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;}

关于javascript - 为什么 map() 会改变嵌套数组中的原始对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56350137/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com