时间戳

首页 > 解决方案 > 具有不可变状态的循环内的对象更新

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

问题描述

我正在研究 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"
}]

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

我正在尝试 for in 循环：

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"
}]

标签： javascriptreactjsecmascript-6

解决方案

要通过直接突变将数组中的每个项目转换为其他项目，您可以使用 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"
  }))
);

推荐阅读