javascript - 为什么不重新分配 forEach 中的参数元素起作用

Question

对于以下代码块:

const items = [
  { id: 1, name: 'one' },
  { id: 2, name: 'two' },
];

const changes = {
  name: 'hello'
}

items.forEach((item, i) => {
  item = {
    ...item,
    ...changes
  }
})

console.log(items) // items NOT reassigned with changes

items.forEach((item, i) => {
  items[i] = {
    ...item,
    ...changes
  }
});

console.log(items) // items reassigned with changes

为什么在元素迭代时重新分配值不会更改数组中的对象？

  item = {
    ...item,
    ...changes
  }

但是通过使用索引访问它来改变它会改变数组中的对象吗？

  items2[i] = {
    ...item,
    ...changes
  }

更新数组中对象的最佳方式是什么？ items2[i] 理想吗？

Answer 1

对参数重新分配说不!

这是对 JavaScript 等高级语言的一种基本理解。

Function parameters are temporary containers of a given value.

因此任何“重新分配”都不会改变原始值。

例如看下面的例子。

let importantObject = {
  hello: "world"
}

// We are just reassigning the function parameter
function tryUpdateObjectByParamReassign(parameter) {
  parameter = {
    ...parameter,
    updated: "object"
  }
}


tryUpdateObjectByParamReassign(importantObject)
console.log("When tryUpdateObjectByParamReassign the object is not updated");
console.log(importantObject);

如您所见，当您重新分配参数时，原始值将不会被触及。甚至还有一个不错的 Lint rule因为这是一个严重错误的区域。

突变在这里起作用，但是......

但是，如果您“改变”变量，这将起作用。

let importantObject = {
  hello: "world"
}

// When we mutate the returned object since we are mutating the object the updates will be shown
function tryUpdateObjectByObjectMutation(parameter) {
  parameter["updated"] = "object"
}


tryUpdateObjectByObjectMutation(importantObject)
console.log("When tryUpdateObjectByObjectMutation the object is updated");
console.log(importantObject);

所以回到您的代码片段。在 foreach 循环中发生的是每个数组项的“函数调用”，其中数组项作为参数传入。与上面的相似，在这里起作用的是变异。

const items = [
  { id: 1, name: 'one' },
  { id: 2, name: 'two' },
];

const changes = {
  name: 'hello'
}

items.forEach((item, i) => {
  // Object assign just copies an object into another object
  Object.assign(item, changes);
})

console.log(items) 

但是，最好避免突变!

最好不要从this can lead to even more bugs开始变异.更好的方法是使用 map 并获取全新的对象集合。

const items = [{
    id: 1,
    name: 'one'
  },
  {
    id: 2,
    name: 'two'
  },
];

const changes = {
  name: 'hello'
}

const updatedItems = items.map((item, i) => {
  return {
    ...item,
    ...changes
  }
})

console.log({
  items
})
console.log({
  updatedItems
})