如何在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扩展操作符中的第三项注入，而不必在newArray中再次写出所有oldArray项?

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

您需要使用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.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));