javascript - 向对象数组添加新属性

Question

我有一个实体列表，其中每个实体如下:

var entity = {
  position: 'X',
  varA: [{ id: 1, name: 'A1' }, { id: 2, name: 'A2' }],
  varB: [{ id: 1, name: 'B1' }, { id: 2, name: 'B2' }],
  varC: [{ id: 1, name: 'C1' }, { id: 2, name: 'C2' }],
}

对于每个实体，我需要添加一个属性“名称”，即:

entity.names = [varA[0].name, varB[0].name, varC[0].name];

问题在于 varA、varB 或 varC 在某些情况下可能未定义或没有值。所以我尝试了:

vm.entities.map(function(entity) { 

  entity.names = [entity.varA[0], entity.varB[0], entity.varC[0]].filter(e => e).map(({name:n}) => n);

  return entity; 

});

预期输出是:

entity.names = [ 'A1', 'B1', 'C1' ]

但是，由于以下代码行，我无法缩小我的 JavaScript:

entity.names = [entity.varA[0], entity.varB[0], entity.varC[0]].filter(e => e).map(({name:n}) => n);

我做错了什么，有更好的方法吗？

Answer 1

您可以迭代对象的所有键，并仅采用数组来收集新属性的名称。

要从数组中仅获取一个名称，您可以使用 Array#some如果找到数组的名称则退出。

var entity = { position: 'X', varA: [{ id: 1, name: 'A1' }, { id: 2, name: 'A2' }], varB: [{ id: 1, name: 'B1' }, { id: 2, name: 'B2' }], varC: [{ id: 1, name: 'C1' }, { id: 2, name: 'C2' }] };

entity.names = Object.keys(entity).reduce(function (r, k) {
    if (Array.isArray(entity[k])) {
        entity[k].some(function (o) {
            if (o && typeof o === 'object' && o.name) {
                r.push(o.name);
                return true;
            }
        });
    }
    return r;
}, []);

console.log(entity);

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