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

使用进行深拷贝： 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]);

Answer 2

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

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

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

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

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

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

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

2 个答案: