如何将新属性注入 JavaScript 扩展运算符

Question

我正在尝试通过添加新对象来更新现有的对象数组：

const oldArray = [{ name: 'First', value: 'one' }, { name: 'Second', value: 'two' }, { name: 'Third', value: 'three' }]
const newArray = [...oldArray, { name: 'Fourth', value: 'four' }]

但是，我的目的是设置

newArray

，使第四个对象成为

oldArray

中的第三项（索引 2）。我如何设置

newArray

以便将新对象作为

...oldArray

展开运算符中的第三个项目注入，而不必在

oldArray

中再次写出所有

newArray

项目？

Answer 1

您可以将

.slice()

与扩展语法一起使用。

const oldArray = [{ name: 'First', value: 'one' }, { name: 'Second', value: 'two' }, { name: 'Third', value: 'three' }]
const newArray = [...oldArray.slice(0, 2), { name: 'Fourth', value: 'four' }, ...oldArray.slice(2)];

console.log(newArray);

Answer 2

您需要使用切片进行两次传播

const oldArray = [{ name: 'First', value: 'one' }, { name: 'Second', value: 'two' }, { name: 'Third', value: 'three' }]
const newArray = [...oldArray.slice(0,2), { name: 'Fourth', value: 'four' }, ...oldArray.slice(2)]

console.log(newArray.map(x => x.name));

另一个选择是只使用 splice()

const oldArray = [{ name: 'First', value: 'one' }, { name: 'Second', value: 'two' }, { name: 'Third', value: 'three' }]
const newArray = [...oldArray]
newArray.splice(2,0,{ name: 'Fourth', value: 'four' });

console.log(newArray.map(x => x.name));