js/es6 数组根据字段名筛选为多维数组

Question

示例数据

let arr = [
    {
        name: 'name1',
        value: 'a',
        age: '12'
    },
    {
        name: 'name2',
        value: 'b',
        age: '10'
    },
       {
        name: 'name3',
        value: 'c',
        age: '11'
    }
]

期望结果

arr = [
    name:  ['name1', 'name2', 'name3'],
    value: ['a', 'b', 'c'],
    age: ['12', '10', '11']
]

麻烦各位大神解答一下 谢谢

Answer 1

先声明：[ name: [...], value: [...]] 这不是合法的 JavaScript 对象/数组表示，我猜想要的是 { name: [...], value: [...] }（注意外层中括号改成了大括号）

分三步：

// 1. 从第 1 个对象获取所有属性名
const keys = Object.keys(arr[0]);
// 2. 对每个属性名，遍历 arr，拿到对应的值；再与属性名组成 key-value pair
//    每一个属性对应的结果像这样：[name, ["name1", "name2", "name3"]]
const entries = keys.map(key => [key, arr.map(it => it[key])]);
// 3. 从这个 key-value pair 数组生成对象
const result = Object.fromEntries(entries);

然后可以合成一句话（省中间变量）：

const result = Object.fromEntries(
    Object.keys(arr[0])
        .map(key => [key, arr.map(it => it[key])])
);

Answer 2

let arr = [
    {
        name: 'name1',
        value: 'a',
        age: '12'
    },
    {
        name: 'name2',
        value: 'b',
        age: '10'
    },
       {
        name: 'name3',
        value: 'c',
        age: '11'
    }
];
//es6写法
arr.reduce((acc,cur)=>(Object.entries(cur).forEach(([key,val])=>((acc[key]||=[]).push(val))),acc),{})
//es5写法
arr.reduce(function(acc,cur){
    Object.entries(cur).forEach(function(item){
        let key = item[0],val = item[1];
        if(!acc[key]){
            acc[key]=[];
         }
        return acc[key].push(val);
    });
    return acc;
},{})

Answer 3

const process = (data) => {
    const result = {};
    for (const item of data) {
        for (const key of Object.keys(item)) {
            if (!result[key]) {
                result[key] = [];
            }
            result[key].push(item[key]);
        }
    }
    return result;
}