使用JavaScript immutability-helper或{... data，}更新数据收集中一条记录的一个字段

Question

我有数据：

var data = [
    {field1: 'a', field2: 'aa', field3: 1},
    {field1: 'b', field2: 'bb', field3: 2},
    {field1: 'c', field2: 'cc', field3: 3},
    {field1: 'd', field2: 'dd', field3: 4},
]

我试图使用immutability-helper https://github.com/kolodny/immutability-helper或React {...data, }构造得到以下结果：我需要找到field2值'cc'的行（一个或多个）并将其field3设置为5。我可以使用什么代码？

Answer 1

您可以使用纯JavaScript进行此操作：

data.map(d => d.field2 === 'cc' ? ({...d, field3: 5}) : d);

解释发生了什么：这将创建一个新数组，其中每个元素都是原始数组中元素的投影。如果它与条件匹配，则根据您的要求创建和修改对象的副本。如果它不匹配，则按原样放入数组中。

Answer 2

您可以在不可变的方法中使用Javascript的reduce：

var data = [
    {field1: 'a', field2: 'aa', field3: 1},
    {field1: 'b', field2: 'bb', field3: 2},
    {field1: 'c', field2: 'cc', field3: 3},
    {field1: 'd', field2: 'dd', field3: 4},
]


var newData = data.reduce((accumulator, obj) => {
  return accumulator.concat((obj.field2 === 'cc' ? {...obj, field3: 5} : obj));
}, []);

console.log(newData);

Answer 3

你可以使用简单的JavaScript函数Array.map

var data = [{field1: 'a', field2: 'aa', field3: 1},{field1: 'b', field2: 'bb', field3: 2},{field1: 'c', field2: 'cc', field3: 3},{field1: 'd', field2: 'dd', field3: 4}];

/* Using ...o to create a copy of object and updating the value in copied object. */
var result = data.map(o => Object.assign({...o}, {field3 : o.field2 === 'cc'? 5 : o.field3}));
console.log(result);