当我更改另一个数组中的值时，数组中的值会更改吗？
我有两个数组的问题。每当我使用下面显示的代码更改一个数组中的值时，另一个数组也会得到相同的更改，这不是预期的。如果我将下面的代码复制并粘贴到浏览器的 javascript 控制台中，我会遇到在调用 ConvertDataArrayToLocationArray(dataArray) 后更改 originalArray 的问题
let originalArray = [
{
"date": "2018-11-16",
"type": "Entertainment",
"location": "Oslo",
"amount": 1024
},
{
"date": "2018-11-16",
"type": "Food",
"location": "Oslo",
"amount": 170
},
{
"date": "2018-11-17",
"type": "Food",
"location": "Fredrikstad",
"amount": 99
},
{
"date": "2018-11-18",
"type": "Food",
"location": "Halden",
"amount": 29
},
{
"date": "2018-11-19",
"type": "Entertainment",
"location": "Oslo",
"amount": 34
},
{
"date": "2018-11-20",
"type": "Entertainment",
"location": "Oslo",
"amount": 15
},
{
"date": "2018-11-20",
"type": "Food",
"location": "Fredrikstad",
"amount": 80
},
{
"date": "2018-11-23",
"type": "Transportation",
"location": "Stavanger",
"amount": 95
},
{
"date": "2018-11-28",
"type": "Entertainment",
"location": "Oslo",
"amount": 1024
},
{
"date": "2018-11-29",
"type": "Food",
"location": "Oslo",
"amount": 117.39
},
{
"date": "2018-11-30",
"type": "Transportation",
"location": "Fredrikstad",
"amount": 29
},
{
"date": "2018-12-2",
"type": "Transportation",
"location": "Stavanger",
"amount": 184
},
{
"date": "2018-12-3",
"type": "Entertainment",
"location": "Oslo",
"amount": 34
},
{
"date": "2018-12-4",
"type": "Food",
"location": "Oslo",
"amount": 162
},
{
"date": "2018-12-4",
"type": "Food",
"location": "Fredrikstad",
"amount": 231
}
];
我的例外结果是称为 originalArray 的变量保持不变，我从 ConvertDataArrayToLocationArray(dataArray) 的返回值中得到一个新数组。
明月笑刀无情2回答
-
偶然的你
当您将项目插入到 中时newArray，您正在传递对该对象的引用。因此，对新复制数组newArray中的项目所做的任何更改都会反映在原始数组中，反之亦然。为了防止这种情况，不要传递引用，而是传递对象的副本。newArray.push({...dataArray[i]});我正在使用 ES6扩展语法进行复制。我们还有Object.assign()方法和其他几种克隆对象的方法。对于您的数据，这些就足够了，因为所有属性都是基元。如果有你必须使用的对象属性JSON.parse(JSON.stringify(dataArray[i]))或其他方法。 -
一只甜甜圈
让使用深副本： const dataArray = JSON.parse(JSON.stringify(arr));：let originalArray = [ { date: "2018-11-16", type: "Entertainment", location: "Oslo", amount: 1024 }, { date: "2018-11-16", type: "Food", location: "Oslo", amount: 170 }, { date: "2018-11-17", type: "Food", location: "Fredrikstad", amount: 99 }, { date: "2018-11-18", type: "Food", location: "Halden", amount: 29 }, { date: "2018-11-19", type: "Entertainment", location: "Oslo", amount: 34 }, { date: "2018-11-20", type: "Entertainment", location: "Oslo", amount: 15 }, { date: "2018-11-20", type: "Food", location: "Fredrikstad", amount: 80 }, { date: "2018-11-23", type: "Transportation", location: "Stavanger", amount: 95 }, { date: "2018-11-28", type: "Entertainment", location: "Oslo", amount: 1024 }, { date: "2018-11-29", type: "Food", location: "Oslo", amount: 117.39 }, { date: "2018-11-30", type: "Transportation", location: "Fredrikstad", amount: 29 }, { date: "2018-12-2", type: "Transportation", location: "Stavanger", amount: 184 }, { date: "2018-12-3", type: "Entertainment", location: "Oslo", amount: 34 }, { date: "2018-12-4", type: "Food", location: "Oslo", amount: 162 }, { date: "2018-12-4", type: "Food", location: "Fredrikstad", amount: 231 }];function ConvertDataArrayToLocationArray(arr) { const dataArray = JSON.parse(JSON.stringify(arr)); let newArray = []; for (let i = 0; i < dataArray.length; i++) { let existed = false; for (let j = 0; j < newArray.length; j++) { if (dataArray[i].location === newArray[j].location) { newArray[j].amount = newArray[j].amount + 10; existed = true; } } if (!existed) { newArray.push(dataArray[i]); } } return newArray;}let a = ConvertDataArrayToLocationArray(originalArray);console.log(originalArray[0]);console.log(a[0]);
随时随地看视频慕课网APP
相关分类
JavaScript