如何使用 ES6 在数组中设置对象的值？

Question

我正在寻找在数组中设置对象值的最快和最资源友好的方法。也可以使用 ES6 语法。

假设我有这个对象数组：

let group = [
    {
        id: 1,
        name: 'Test 1',
        geo: 'Japan',
        car: 'Toyota'
    },
    {
        id: 2,
        name: 'Test 2',
        geo: 'USA',
        car: 'Tesla'
    },
    {
        id: 3,
        name: 'Test 3',
        geo: 'Germany',
        car: 'Audi'
    }
];

我想根据用户输入获取这些对象之一。假设我们想通过对象的 ID 获取第 3 个项目的索引：

let index = group.findIndex(g => g.id === payload.id);

获得索引后，我想像这样为该对象分配新值：

group[index].id = payload.id;
group[index].name = payload.name;
group[index].geo = payload.geo;
group[index].car = payload.car;

但是它又长又丑，想象一下如果您在这个对象中有 50 多个值。

问题：有没有更短更有效的方法来达到同样的效果？还包括 ES6-ES7 语法。

Answer 1

您可以使用 Array#find and Object.assign 来更改找到的对象的属性。

var group = [{ id: 1, name: 'Test 1', geo: 'Japan', car: 'Toyota' }, { id: 2, name: 'Test 2', geo: 'USA', car: 'Tesla' }, { id: 3, name: 'Test 3', geo: 'Germany', car: 'Audi' }],
    payload = { id: 3, name: 'update', geo: 'Germany Bavaria Ingolstadt', car: 'Audi 1' },
    object = group.find(({ id }) => id === payload.id);

if (object) {
    Object.assign(object, payload);
}

console.log(group);

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

Answer 2

el = group.find(g => g.id === payload.id);
if (el) { // add this 'if' if you are not sure if payload's id will be in group
  idx = group.indexOf(el);
  group[idx] = {...el, ...payload};
}

Answer 3

使用索引。对于一次性搜索和更新，Array.find 效果很好。但是，如果您需要更新多个条目，则必须建立一个数组索引。

(function(){
    let group = [{ id: 1, name: 'Test 1', geo: 'Japan', car: 'Toyota' }, { id: 2, name: 'Test 2', geo: 'USA', car: 'Tesla' }, { id: 3, name: 'Test 3', geo: 'Germany', car: 'Audi' }],
        payload = { id: 3, name: 'update', geo: 'Germany Bavaria Ingolstadt', car: 'Audi 1' };
        
    let groupIndex = {};
    group.forEach(x => groupIndex[x.id]=x);

    let start = new Date().valueOf();
    let id = 1;
    let updates = 1000000;
    for(let i=0;i<updates;i++)
        if (groupIndex[id])
            Object.assign(groupIndex[id], payload);

    console.log(updates+" taken "+(new Date().valueOf()-start)+" ms");
})()

Answer 4

以上给出的解决方案是正确的，您也可以在一行中使用地图来做同样的事情（最好使用 lodash 地图功能）。

let group = [{ id: 1, name: 'Test 1', geo: 'Japan', car: 'Toyota' }, { id: 2, name: 'Test 2', geo: 'USA', car: 'Tesla' }, { id: 3, name: 'Test 3', geo: 'Germany', car: 'Audi' }],
payload = { id: 3, name: 'update', geo: 'Germany Bavaria Ingolstadt', car: 'Audi 1' }; 

group = group.map((item) => item.id === payload.id ? payload : item);

如何使用 ES6 在数组中设置对象的值？

How to set an Object's values inside an array with ES6?

javascript

ecmascript-6

ecmascript-2016