使用展开运算符更新对象值

Question

我有一个函数，可以向传入的对象添加一个键，但我被告知要使用展开运算符来实现，我被告知可以使用展开运算符创建一个具有相同属性的新对象，然后在其中设置isAvailable属性。

  return new Partner(ServerConfig, capabilities, initialState)
}

class Partner {
  constructor (ServerConfig, capabilities, initialState) {
    initialState.isAvailable = true

我尝试了类似这样的东西但没有成功，你能帮我吗？我很困惑，我应该如何使用展开运算符，在函数中返回值？

newObject = {}

// use this inside a function and get value from return

       return {
         value: {
           ...newObject,
           ...initialState
         }
       }

initialState.isAvailable = true

- Rasim Avcı

---

... 不是一个运算符，它只是语法、表示方式，而不是运算符（就像在 for 语句中的 ()）。 - T.J. Crowder

请将以下与编程有关的内容从英语翻译成中文。仅返回翻译后的文字内容，不要进行解释或阐述。请妥善格式化您的代码。最好提供可执行的独立示例。 - metakermit

Answer 1

属性是按顺序添加的，所以如果你想覆盖现有的属性，需要把它们放在结尾而不是开头：

return {
  value: {
    ...initialState,
    ...newObject
  }
}

你不需要newObject（除非你已经有了它），但是:

不需要使用newObject，除非你已经拥有它。

return {
  value: {
    ...initialState,
    isAvailable: newValue
  }
}

例子：

const o1 = {a: "original a", b: "original b"};
// Doesn't work:
const o2 = {a: "updated a", ...o1};
console.log(o2);
// Works:
const o3 = {...o1, a: "updated a"};
console.log(o3);

- T.J. Crowder

---

我感激不尽。 - Muhammad Bilal

Answer 2

如果您知道属性的名称（以下示例中的a），那么@crowder的答案就是完美的：

const o3 = {...o1, a: "updated a"};
console.log(o3);

如果属性名称在变量中，则需要使用计算属性名语法： 计算属性名。

let variable = 'foo'
const o4 = {...o1, [variable]: "updated foo"};
console.log(o4);

- Brent Washburne

---

我正在寻找的答案 - Ivandez

Answer 3

使用...扩展对象将保持您的状态完整性。假设您有一个初始状态

 initialState={isOpen:false,count:0}

假设您想添加另一个属性，但希望保留其他属性：

return {  ...initialState,isAvailable:true
        }

这将导致

 initialState={isOpen:false,count:0,isAvailable:true}

我们刚刚添加了一个新属性，而不会丢弃其他属性。也许您的应用程序的另一部分正在使用其他属性，因此我们仍然保留它们。假设您想要更新isOpen状态。首先展开初始状态，然后再添加最后一段逻辑。

 return {  ...initialState,isOpen:true
        }

这将导致这个结果

initialState={isOpen:true,count:0,isAvailable:true}

现在也许在您当前的页面上，由于 isOpen:true，您可能正在向用户展示不同的 UI 片段。假设您这次想要更新 count。您也可以编写以下代码：

 return {  count:5 }

现在你的当前状态只有 count:5，因此你已经失去了其他状态属性。现在没有isOpen属性。如果在显示不同界面时无法成功处理isOpen逻辑，则你的应用程序将崩溃。但如果处理正确，isOpen将导致falsy，因此你的页面将不会向用户展示那部分界面。

- Yilmaz