如何在javascript中使用map()循环

Question

我有这样的结构：let MainItem = [ {    "Id": "1",    "Cost": "1000"  },  {    "Id": "2",    "Cost": "5000"  },  {    "Id": "3",    "Cost": "2000"  },  {    "Id": "4",    "Cost": "3000"  }];我将Cost使用map()循环更改每个元素的值并将其存储在NewMainItem.let NewMainItem = MainItem.map((item, i) => {  item.cost = item.cost + 1000  return item});console.log(MainItem)console.log(NewMainItem)主要的问题是，通过改变Cost在NewMainItem，价值 Cost在MainItem也将被改变，但我不并不想这样做。通过使用map()循环为什么主对象（MainItem）也会被改变？

Answer 1

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

您可以使用扩展运算符来创建一个新项目，如下所示：

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

使用这里parseFloat是因为Costs 值在您的代码段中设置为字符串。随意更改它，因为它适合您的需要。

见下面的片段：

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)

Answer 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; }