Обновите объекты массива, используя for-of

Question

У меня есть два следующих массива объектов. Что я пытаюсь сделать, если атрибут id совпадает, заменить элемент массива x на элемент массива y.

Я могу легко добиться этого из простого старого для цикла. Но я не понимаю, почему мой цикл for-of возвращает другой результат.

let x1 = [{
  id: '1',
  a: 1,
  b: 2
}];

let y1 = [{
  id: '1',
  c: 3,
  b: 2
}];

let x2 = [{
  id: '1',
  a: 1,
  b: 2
}];

let y2 = [{
  id: '1',
  c: 3,
  b: 2
}];



let updateX1 = (x, y) => {

  for (let itemY of y) {

    for (let itemX of x) {

      if (itemY.id === itemX.id) {
        itemX = itemY;
      }
    }
  }

  return x;
}

let updateX2 = (x, y) => {

  for (let i = 0; i < y.length; i++) {

    for (let j = 0; j < x.length; j++) {

      if (y[i].id === x[j].id) {
        x[j] = y[i];
      }
    }
  }

  return x;
}

console.log(updateX1(x1, y1));
console.log(updateX2(x2, y2));

Почему я получаю два разных результата для двух вышеуказанных подходов? Заранее спасибо!

Answer 1

Если то, что вы пытаетесь сделать, на самом деле то, что вы говорите:

если атрибут id совпадает, замените элемент массива x на массив y пункт

Тогда вместо вложенных циклов вы можете использовать map с find :

const x = [
  { id: 1, name: 'should be replaced by y' },
  { id: 2, name: 'not replaced' },
];
const y = [
  { id: 1, name: 'this is from y' },
  { id: 3, name: 'not not used' },
];

const newX = x.map((xItem) => {
  const fromY = y.find((yItem) => yItem.id === xItem.id);
  return fromY ? fromY : xItem;
});
console.log(newX);

Если вам нужны мутации, тогда вы можете использовать forEach , так как это больше подходит для побочных эффектов

const x = [
  { id: 1, name: 'should be replaced by y' },
  { id: 2, name: 'not replaced' },
];
const y = [
  { id: 1, name: 'this is from y' },
  { id: 3, name: 'not not used' },
];
//mutate x
x.forEach((xItem, index) => {
  const fromY = y.find((yItem) => yItem.id === xItem.id);
  x[index] = fromY ? fromY : xItem;
});
console.log(x);

Answer 2

Переназначение переменной само по себе никогда не приведет к изменению существующего объекта или, по крайней мере, за пределами очень странных ситуаций. Когда вы делаете

itemX = itemY;

вы просто меняете значение, на которое указывает переменная itemX, на itemY. То, что изначально было itemX, и объект, из которого пришло itemX, не будут изменены. Чтобы мутировать объекты, вы всегда должны явно назначать новое значение для свойства объекта, например, с obj.foo, obj['foo'] или, как в вашем коде, x[j] = y[i];.