使用传播将数组映射到对象

Question

我想将 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;
}, {});

使用传播运算符我做任何事情都失败了。

其他有帮助的帖子：

Convert object array to hash map, indexed by an attribute value of the Object

Answer 1

简答

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

已解释

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

然后，我们要return累加器进行深变化，所以我们使用展开运算符，然后设置内插mainkey属性（[mainkey]) 为 rest.

Answer 2

只需更改为..

    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;
}, {});

使用传播将数组映射到对象

Mapping array to object using spread

javascript

arrays

reactjs

spread-syntax

简答

已解释