具有不可变状态的循环内的对象更新

Question

我正在研究React应用程序，我需要更新我的objcet内部循环，我的对象结构是，

[{
    "iD": "101",
    "bD": "06/02/2018",
    "cD": "16/04/2018"
  },
  {
    "iD": "102",
    "bD": "06/02/2018",
    "cD": "16/04/2018"
  },
  {
    "iD": "103",
    "bD": "06/02/2018",
    "cD": "16/04/2018"
}]

我的想法是我必须为每个对象添加几个键，我采取的方法似乎不合适，因为我正在更新对象但没有在数组中推送更新的值并返回新值。 有没有其他方法可以用突变更新它？

我正在尝试循环：

let newList = {};
for (let key in list) {
    newList = Object.assign({}, list[key]);
    newList.newKey1 = 'demo1';
    newList.newKey2 = 'demo2';
};

现在，如果我返回newList，它将始终具有最后更新的值。 那么我将如何获得完整的更新列表。 数组可能只有一个项目，如：

[{
  "id":"101",
  "bD":"06/02/2018",
  "cD":"16/04/2018"
}]

Answer 1

要通过直接变异将数组中的每个项目转换为其他项目，您只需使用for（ for..of或forEach ）循环的版本：

 const items = [{ iD: "101", bD: "06/02/2018", cD: "16/04/2018" }, { iD: "102", bD: "06/02/2018", cD: "16/04/2018" }, { iD: "103", bD: "06/02/2018", cD: "16/04/2018" } ]; for (const item of items) { item.newKey1 = 'demo1'; item.newKey2 = 'demo2'; } console.log( items ); 

要通过返回更改了项目的新数组将数组中的每个项目转换为某个项目，您应该使用Array.prototype.map ：

 const items = [ { iD: "101", bD: "06/02/2018", cD: "16/04/2018" }, { iD: "102", bD: "06/02/2018", cD: "16/04/2018" }, { iD: "103", bD: "06/02/2018", cD: "16/04/2018" } ]; console.log( items.map(item => Object.assign({}, item, { newKey1: "demo1", newKey2: "demo2" }) ) ); 

或者，如果您的环境支持，则使用对象传播：

 const items = [ { iD: "101", bD: "06/02/2018", cD: "16/04/2018" }, { iD: "102", bD: "06/02/2018", cD: "16/04/2018" }, { iD: "103", bD: "06/02/2018", cD: "16/04/2018" } ]; console.log( items.map(item => ({ ...item, newKey1: "demo1", newKey2: "demo2" })) ); 

Answer 2

我解决了这个有一个数组并且每次都更新了obj。

当然，

const items = [
  {
    iD: "101",
    bD: "06/02/2018",
    cD: "16/04/2018"
  },
  {
    iD: "102",
    bD: "06/02/2018",
    cD: "16/04/2018"
  },
  {
    iD: "103",
    bD: "06/02/2018",
    cD: "16/04/2018"
  }
];


    let bObj = {};
    let uObj = [];

    for ( const item of items ) {
      bObj = Object.assign({}, item )
      bObj.newKey1 = 'Test1';
      bObj.newKey2 = 'Test2';
      uObj.push(bObj);
   }
   return uObj;