Сделайте клон массива (не копию ссылки) и измените новый массив - PullRequest
Новая
       8

Сделайте клон массива (не копию ссылки) и измените новый массив

2 голосов
/ 12 июля 2020

Я полагаю, мою проблему легко исправить, но, будучи новичком, я не могу туда добраться. 

const arr1 = [
  { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false },
  { department: "Ceralien", id: "id5", product: "Marmelade", status: false },
  { department: "Ceralien", id: "id3", product: "Müsli", status: false },
  { department: "Ceralien", id: "id4", product: "Honig", status: false },
  { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false }
];

let testArr = [...arr1];

testArr.forEach(obj => (obj.status = "test"));

console.log(arr1, testArr)

Журнал показывает, что функции forEach () также применяются к arr1. Почему это так и как сохранить неизменяемость arr1? 

arr1 = [
  { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false },
  { department: "Ceralien", id: "id5", product: "Marmelade", status: false },
  { department: "Ceralien", id: "id3", product: "Müsli", status: false },
  { department: "Ceralien", id: "id4", product: "Honig", status: false },
  { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false }
];

 testArr = [
  { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false },
  { department: "Ceralien", id: "id5", product: "Marmelade", status: false },
  { department: "Ceralien", id: "id3", product: "Müsli", status: false },
  { department: "Ceralien", id: "id4", product: "Honig", status: false },
  { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false }
];

Ответы [ 5 ]

4 голосов
/ 12 июля 2020

arr1 содержит объекты, поэтому просто клонировать arr1 недостаточно. Вам также необходимо клонировать объекты в arr1.

Вы можете использовать функцию .map() и оператор распространения, чтобы создать новый массив, содержащий клоны объектов из arr1. 

const arr1 = [
  { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false },
  { department: "Ceralien", id: "id5", product: "Marmelade", status: false },
  { department: "Ceralien", id: "id3", product: "Müsli", status: false },
  { department: "Ceralien", id: "id4", product: "Honig", status: false },
  { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false }
];

let testArr = arr1.map(obj => ({...obj}));

testArr.forEach(obj => (obj.status = "test"));

console.log(arr1[0]);
console.log(testArr[0]);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Использование функции .map() также позволяет обновлять возвращенные объекты. Таким образом, вы можете удалить forEach l oop и просто использовать функцию .map(), чтобы не только клонировать объекты, но и обновить свойство status клонированного объекта. 

const arr1 = [
  { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false },
  { department: "Ceralien", id: "id5", product: "Marmelade", status: false },
  { department: "Ceralien", id: "id3", product: "Müsli", status: false },
  { department: "Ceralien", id: "id4", product: "Honig", status: false },
  { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false }
];

let testArr = arr1.map(obj => ({...obj, status: 'test'}));

console.log(arr1[0]);
console.log(testArr[0]);
.as-console-wrapper { max-height: 100% !important; top: 0; }
1 голос
/ 12 июля 2020

В вашем примере объект byRef. Это означает, что они не копируются глубоко. Вы можете создать новый массив, используя map и Object.assign: 

const testArr = arr1.map(i => Object.assign({}, i));

Затем после запуска: 

testArr.forEach(obj => (obj.status = "test"));
console.log(arr1, testArr)

Вы можете видеть, что объекты arr1 не были изменены (снимок экрана из моего консоль): введите описание изображения здесь

0 голосов
/ 12 июля 2020

, если вы хотите сохранить исходные данные без изменения, вы можете использовать map или Object.assign

const arr1 = [ { department: "Lebensmittel", id: "id6", product: "Nudeln", status: false }, { department: "Ceralien", id: "id5", product: "Marmelade", status: false }, { department: "Ceralien", id: "id3", product: "Müsli", status: false }, { department: "Ceralien", id: "id4", product: "Honig", status: false }, { department: "Molkereiprodukte", id: "id1", product: "Milch", status: false } ];
   
const newarray=  arr1.map(o=>({...o,["status"]:"test"}))
 console.log(arr1)
 console.log(newarray)
0 голосов
/ 12 июля 2020

Еще одно предложение - сторонний пакет loda sh для глубокой копии (удаляет ссылки) - https://lodash.com/docs/4.17.15#cloneDeep

0 голосов
/ 12 июля 2020

in javascript, clonedArray=originalArray просто создает ссылку == на тот же массив. вы можете преодолеть это / "клонировать" простой массив следующим образом: 

clonedArray=originalArray.slice()

или, для сложных (скажем, с объектами), «самый быстрый» способ: 

clonedArray=JSON.parse(JSON.stringify(originalArray))
...