当我更改另一个数组中的值时，数组中的值会更改吗？

Question

我有两个数组的问题。每当我使用下面显示的代码更改一个数组中的值时，另一个数组也会得到相同的更改，这是不希望的。如果我在浏览器的 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
  }
];

function ConvertDataArrayToLocationArray(dataArray) {

    let newArray = [];
    console.log("First dataArray[0].amount is the correct value. ");
    console.log(dataArray[0].amount);

    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 + dataArray[i].amount);

                existed = true;

            }
        }


        if(!existed) {
            newArray.push(dataArray[i]); 

        }
    }

    console.log("Why is this dataArray[0].amount suddenly different?");
    console.log(dataArray[0].amount); 
    return newArray; 

}

let a = ConvertDataArrayToLocationArray(originalArray); 

我的异常结果是名为 originalArray 的变量保持不变，我从 ConvertDataArrayToLocationArray(dataArray) 的返回值中得到一个新数组。

Answer 1

当您将项目插入newArray 时，您正在传递对该对象的引用。

因此，对新复制数组 newArray 中的项目所做的任何更改都会反映在原始数组中，反之亦然。

为了防止这种情况，请传递对象的副本，而不是传递引用。

newArray.push({...dataArray[i]}); 

我正在使用 ES6 spread syntax 进行复制。我们还有Object.assign() 方法和其他几种克隆对象的方法。

对于您的数据，这些就足够了，因为所有属性都是基元。如果有对象属性，您必须使用JSON.parse(JSON.stringify(dataArray[i])) 或其他methods。

Answer 2

使用以下命令进行深层复制： 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]);