javascript - 合并数组内多个对象的值

Question

我有 3 个独立的数组，每个数组中有 3 个对象:

[{Index: 1}, {Index: 2}, {Index: 3}]
[{Placement: 'Wall'}, {Placement: 'Roof'}, {Placement: 'Door'}]
[{Color: 'GREEN'}, {Color: 'WHITE'}, {Color: 'BLACK'}]

我正在努力实现以下目标:

[
{
Index: 1, 
Placement: 'Wall', 
Color: 'GREEN'
},

{
Index: 2,
Placement: 'Roof', 
Color: 'WHITE'
}, 

{
Index: 3,
Placement: 'Door',
Color: 'BLACK'
}
]

有没有办法用JS来做到这一点？我尝试将它们与下划线和 jquery 的合并/扩展结合起来，但我只能获取一个对象中的所有值或具有单个值的对象(例如颜色)。非常感谢您的帮助。

Answer 1

使用 ES6，您可以使用 Array#map和 Object.assign

var array1 = [{ Index: 1 }, { Index: 2 }, { Index: 3 }],
    array2 = [{ Placement: 'Wall' }, { Placement: 'Roof' }, { Placement: 'Door' }],
    array3 = [{ Color: 'GREEN' }, { Color: 'WHITE' }, { Color: 'BLACK' }],
    combined = array1.map((a, i) => Object.assign({}, a, array2[i], array3[i]));
console.log(combined);

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

唯一适用于多个数组的 ES5 解决方案。

var array1 = [{ Index: 1 }, { Index: 2 }, { Index: 3 }],
    array2 = [{ Placement: 'Wall' }, { Placement: 'Roof' }, { Placement: 'Door' }],
    array3 = [{ Color: 'GREEN' }, { Color: 'WHITE' }, { Color: 'BLACK' }],
    combined = [array1, array2, array3].reduce(function (r, a) {
        a.forEach(function (b, i) {
            Object.keys(b).forEach(function (k) {
                r[i] = r[i] || {};
                r[i][k] = b[k];
            });
        });
        return r;
    }, []);

console.log(combined);

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