如何在使用扩展语法时根据索引更新数组元素？

Question

将一个数组定义为：

const foo = [1, 2, 3];

现在，如果我想要替换第二个元素，可以这样做：

foo[1] = 4; 或者

foo.splice(1,1,4);。

const foo = [1, 2, 3];

console.log([...foo.slice(0, 1), 4, ...foo.slice(2)]);
// I know this creates a new array unlike the above two ways.

但是当我们使用展开运算符(shallow copying)来复制对象时，我们可以动态地覆盖一个属性，例如：

const someObject = {
 a: 1,
 b: 2,
 c: 3
}
const propertyToChange = 'b';

const newObject = { ...someObject, [propertyToChange]: 4 };

那么，对于数组是否有类似的东西呢？也许下面这样的东西可以基于索引来更改元素。

const newArray = [...oldArray, [dynamicIndex]: 4 ];

- Ramesh Reddy

Answer 1

可以使用 Object.assign 来完成：

const newArray = Object.assign([...oldArray], {[dynamicIndex]: 4});
// Or
const newArray = Object.assign([], oldArray, {[dynamicIndex]: 4});

之所以可行，是因为数组是对象。

实时示例：

const oldArray = [1, 2, 3, 4, 5, 6];
const dynamicIndex = 3; // The fourth entry
const newArray = Object.assign([], oldArray, {[dynamicIndex]: "four"});
console.log(newArray);

- T.J. Crowder

---

不错。我猜测类似 const newArray = [...oldArray, [dynamicIndex]: 4 ]; 这样的语法没有被实现，可能是因为它与对象的语法有些冲突。这可能是原因吗？ - Ramesh Reddy

@RameshReddy - 我不知道具体原因。那看起来对解析器来说可能很棘手。在冒号之前，它看起来像一个包含dynamicIndex的数组字面量。我认为他们尽可能避免过多的前瞻…… - T.J. Crowder

我很失望地发现我在6月/7月出版的书的第5章中没有包含上述技巧（如果您感兴趣，请查看我的个人资料]... :-| 啊，好吧，总还有网站和可能会有第二版...) - T.J. Crowder

@T.J.Crowder，先前的技术：https://stackoverflow.com/questions/51188539/javascript-how-to-merge-arrays-so-that-the-indexes-of-original-elements-in-both - Nina Scholz

@NinaScholz - 我曾经想知道这个问题是否已经有人讨论过，显然没有仔细找。我标记了重复内容。由于已被接受，无法删除，但是... - T.J. Crowder