扩展运算符在对象的数组内分配数据

Posted 2023-02-22

【中文标题】扩展运算符在对象的数组内分配数据

【英文标题】：Spread operator to assign data inside array in an object

【发布时间】：2019-05-26 09:48:15

【问题描述】：

我需要使用扩展运算符更新以下状态内的数据。 必须这样做，data[0] 应该更新为 "vehOn":"Finance"

let state = 
  "data": [
    "year": "2017",
    "make": "ALFA ROMEO",
    "model": "ILX 4D 2.0 PREMIUM PACKAGE"
  ],
  "error": ""
;

修改后的状态应该是这样的：

let modifiedstate = 
  "data": [
    "year": "2017",
    "make": "ALFA ROMEO",
    "model": "ILX 4D 2.0 PREMIUM PACKAGE",
    "vehOn": "Finance"
  ],
  "error": ""
;

【问题讨论】：

“我需要...使用扩展运算符” - 为什么？请正确格式化您的问题/代码？到目前为止，您尝试过什么？

...也许...modifiedstate.data[0]["vehOn"]="Finance"???

@gaetanoM 我正在​​尝试使用扩展运算符来完成它。

@Andreas 我尝试了以下实现，但没有按预期工作。 :( 让 oldData = state.data[0]; 让 newData = 'vehOn':'finance'; 让 mergeData = ... oldData, ...newData; 让 mergeState1 = ...state.data , ...mergedData; //没用 let mergeState2 = ...state, data:[...state.data,mergedData]; //没用

但是为什么需要使用扩展运算符呢？如果您打算克隆 state，您应该知道扩展运算符不会进行浅拷贝。

【参考方案1】：

根据documentation，我能看到实现您的结果的唯一方法是：

let state = 
    "data": [
        "year": "2017",
        "make": "ALFA ROMEO",
        "model": "ILX 4D 2.0 PREMIUM PACKAGE"
    ],
    "error": ""
;

let modifiedstate  =  "data": [ ...state.data[0], ...vehOn: "Finance" ],
    "error": "";

console.log(modifiedstate);

【参考方案2】：

const state = 
  "data": [
    "year": "2017",
    "make": "ALFA ROMEO",
    "model": "ILX 4D 2.0 PREMIUM PACKAGE"
  ],
  "error": ""
;

console.log("---- state ----");
console.log(state);

const modifiedstate =  ...state,
  data: state.data.map((entry, i) => i === 0 ? ( ...entry,
    vehOn: "Finance"
  ) : entry)
;

console.log("---- modifiedstate ----");
console.log(modifiedstate);

【参考方案3】：

如果您的意图是创建一个与 state 相同的对象并且您不知道 state 可以具有哪些属性，您应该寻找一种方法来 deep clone it

否则，如果您完全确定state 的结构并想做一个简单的克隆，您可以执行以下操作：

   let modifiedstate = "data": [
     ...state.data[0],
     "vehOn": "Finance"
     ],
     "error": ""