使用spread将数组映射到对象

时间:2017-09-19 01:16:09

标签: javascript arrays reactjs spread-syntax

我想将follow数组转换为稍微修改过的对象(见下文)。我也尝试使用点差运算符,但是还没有能够弄清楚如何去做。我试图避免使用lodash(用于教育目的)。

启动数组:

var arr = [
    { mainkey: 'John', val1: 'ABC', val2: '..', val3: '..' },
    { mainkey: 'Mary', val1: 'DEF', val2: '..', val3: '..' },
    { mainkey: 'Ann', val1: 'XYZ', val2: '..', val3: '..' }
  ];

到最终对象:

newObj = {
  John: {val1: 'ABC', val2: '..', val3: '..' },
  Mary: {val1: 'DEF', val2: '..', val3: '..' },
  Ann:  {val1: 'XYZ', val2: '..', val3: '..' }
}

不使用扩展运算符,这会变得很接近,但不是我需要的地方:

var result = arr.reduce(function(map, obj) {
    map[obj.mainkey] = obj.val1;
    // map[obj.mainkey] = { obj.val1, obj.val2 }; <-- DOESNT WORK
    return map;
}, {});

对于传播操作员,我做的任何事情都失败了。

其他包含有用内容的帖子:

2 个答案:

答案 0 :(得分:1)

简短回答

const newObj = arr.reduce(
    (acc, { mainkey, ...rest }) => ({ ...acc, [mainkey]: rest }),
    {}
  )

解释

我们正在调用Array.prototype.reduce(),并且对于数组中的每个对象,从其他属性中解构mainkey(因此mainkey可能是 John rest可能是这样的:{val1: 'ABC', val2: '..', val3: '..' }

然后,我们想要对累加器进行深度更改,因此我们使用spread运算符,然后将interploated mainkey属性([mainkey])设置为rest

答案 1 :(得分:1)

只需更改为..

    var result = arr.reduce(function(map, obj) {
        map[obj.mainkey] = {
            val1: obj.val1,
            val2: obj.val2,
        };
        return map;
    }, {});        

更新: 添加其他动态版本。

var result = arr.reduce(function(map, obj) {
    let targetProps = Object.getOwnPropertyNames(obj).filter(
        (prop) => prop !== "mainkey"
    );
    map[obj.mainkey] = {};
    targetProps.forEach( (prop) => {
        map[obj.mainkey][prop] = obj[prop];
    });
    return map;
}, {});