使用reduce()会改变JavaScript中的原始数组，尽管文档另有声明

Question

我正在声明以下数组。

let arr = [
  { id:"aa", vals:[1,2,3] }, 
  { id:"cc", vals:[3,4,5] }, 
  { id:"bb", vals:[2,3,4] }];

在控制台中打印它可以确认预期，因为每个元素都有两个字段：字符串

id

和数字数组

vals

。然后，我像这样对它执行

reduce(...)

。

let reduction = arr.reduce((a,b) => a[b.id] = b, {});

我的期望是一个单个对象，其字段对应于迭代数组的 ID 值，即 aa、bb 和 cc，其中这三个字段中的每一个都包含原始数组中的相应元素。

我得到的只是符合预期的最后一个元素，而前两个元素不知何故变得令人费解，配备了额外的字段。请注意，我说的是原始数组中的更改！根据 文档： reduce() 方法不会更改原始数组。

我错过了什么？

最终的愿望是通过将数组减少为单个实例但具有任意添加的字段来简单地将数组转换为字典。有大量资源可以从中获取灵感。所以这个问题只与这种意想不到的行为有关。

Answer 1

JavaScript 中的数组是对象，JavaScript 中的所有对象都是通过引用传递的。换句话说，每当您更改对象上的任何属性时，其所有引用都将指向属性已更改的同一对象。

在您的情况下，您可以考虑每次返回一个新对象，如下所示：

let reduction = arr.reduce((a,b) => ({...a, [b.id] = b}, {});