使用JavaScript不变性助手或｛..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},
]

我正在尝试使用不变性助手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);