JS使用扩展运算符克隆对象并更改一个字段[重复]

Posted 2023-02-22

【中文标题】JS使用扩展运算符克隆对象并更改一个字段[重复]

【英文标题】：JS clone objects using spread operator and change one field [duplicate]

【发布时间】：2019-10-14 02:07:39

【问题描述】：

假设我有一个对象：a: 'A', b: 'B', c: 'C'，我想从中创建一个具有相同值的新对象，但我想设置 c: 'D'。

它的语法是什么？ 我试过类似的东西：

c: 'D', ...rest = ...foo

但这不是一个有效的语法。

【问题讨论】：

@MaheerAli 我不想修改 foo。我想使用 foo 值创建一个新对象。

Using spread operator to update an object value 和 modifying an object using … in javascript 和 Update Multiple Properties of an object with spread operator 的可能重复

【参考方案1】：

你在右手边传播语法。

注意：先使用Spread Operator，然后设置新属性。例如c:'D',...foo 将不起作用。

let foo = a: 'A', b: 'B', c: 'C';
let res = ...foo, c:'D';
console.log(res)

【参考方案2】：

你会这样写你的代码：

var obj1 = a: 'A', b: 'B', c: 'C'
var obj2 = ...obj1, c: 'D'
console.log(obj2)

写入...obj1 将用obj1 的内容填充obj2，写入c: 'D' 将覆盖c: 'c'。

注意，正如maheer 所提到的，排序很重要，因为对象将从每个属性按顺序写入，这可能会弄乱键的顺序，并设置不正确的值：

var obj = a: 'A', b: 'B', c: 'C'
var ex1 = ...obj, c: 'D'
var ex2 = c: 'D', ...obj
var ex3 = c: 'D', ...obj, c: 'E'

console.log('Example 1:', ex1)
console.log('Example 2:', ex2)
console.log('Example 3:', ex3)

【参考方案3】：

使用扩展运算符并将您想要更改的属性放在后面

let foo = a : "Other A", b : "OtherB", c : "OtherC"
let obj = a: 'A', b: 'B', c: 'C'
    obj = ...foo, c : 'D';
    
    console.log(obj);