Значение в массиве изменяется, когда я изменяю значение в другом массиве? - PullRequest
Новая
       4

Значение в массиве изменяется, когда я изменяю значение в другом массиве?

2 голосов
/ 31 октября 2019

У меня проблема с двумя массивами. Всякий раз, когда я изменяю значение в одном массиве с помощью кода, показанного ниже, другой массив также получает те же изменения, которые не предназначены. Если я копирую и вставляю приведенный ниже код в консоль javascript в своем браузере, я получаю проблему, заключающуюся в том, что originalArray изменяется после вызова ConvertDataArrayToLocationArray (dataArray) 

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).

Ответы [ 2 ]

1 голос
/ 31 октября 2019

Когда вы вставляете элемент в newArray, вы передаете ссылку на объект.

Таким образом, любые изменения, внесенные в элемент в новом скопированном массиве newArray, отражаются в исходном массиве и наоборот.

Чтобы предотвратить это, вместо передачи ссылки передайтекопия объекта. 

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

Я использую ES6 распространенный синтаксис , чтобы сделать копию. У нас также есть метод Object.assign () и несколько других способов клонирования объекта.

Для ваших данных этого будет достаточно, поскольку все свойства являются примитивами. Если есть свойства объекта, вы должны использовать JSON.parse(JSON.stringify(dataArray[i])) или другие методы .

1 голос
/ 31 октября 2019

сделать глубокую копию, используя: 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]);
...