如何在javascript中使用map（）循环[重复]答案

【问题标题】：How to use map() loop in javascript [duplicate]如何在javascript中使用map（）循环[重复]
【发布时间】：2019-10-18 13:45:10
【问题描述】：

我有这样的结构：

let MainItem = [
 {
    "Id": "1",
    "Cost": "1000"
  },
  {
    "Id": "2",
    "Cost": "5000"
  },
  {
    "Id": "3",
    "Cost": "2000"
  },
  {
    "Id": "4",
    "Cost": "3000"
  }
];

我打算用map()循环改变Cost每个元素的值并将其存储在NewMainItem中。

let NewMainItem = MainItem.map((item, i) => {
  item.cost = item.cost + 1000
  return item
});

console.log(MainItem)
console.log(NewMainItem)

主要问题是通过更改NewMainItem中的Cost， MainItem 中的 Cost 也将被更改，但我不想这样做。通过使用map() 循环，为什么主对象（MainItem）也会改变？

【问题讨论】：

在map回调中深度克隆item。
@adiga 我想说Why does map mutate array of objects? 是一个更好的目标，因为那个问题，这似乎不明白迭代回调中的项目是实际项目。
这里item.cost = ... 更改现有对象的属性。无论您是在循环内还是在任何地方执行此操作，您都会更改对象。

标签： javascript

【解决方案1】：

您应该使用map 从现有对象创建新对象，而不是修改它们。

您可以使用spread operator 来创建这样的新项目：

{ ...item, Cost: parseFloat(item.Cost) + 100 };

这里使用了parseFloat，因为Costs 值在您的sn-p 中设置为字符串。随意更改它，因为它适合您的需要。

见下sn-p：

let MainItem = [
 {
    "Id": "1",
    "Cost": "1000"
  },
  {
    "Id": "2",
    "Cost": "5000"
  },
  {
    "Id": "3",
    "Cost": "2000"
  },
  {
    "Id": "4",
    "Cost": "3000"
  }
];

let NewMainItem = MainItem.map((item, i) => {
  return { ...item, Cost: parseFloat(item.Cost) + 100 };
});
console.log(MainItem)
console.log(NewMainItem)

【讨论】：

【解决方案2】：

您可以为新对象分配想要更改的值。

var mainItem = [{ Id: "1", Cost: "1000" }, { Id: "2", Cost: "5000" }, { Id: "3", Cost: "2000" }, { Id: "4", Cost: "3000" }],
    newMainItem = mainItem.map(item => Object.assign({}, item, { Cost: +item.Cost + 1000 }));

console.log(mainItem);
console.log(newMainItem);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：