javascript - 将数组的字段与javascript中具有不同长度的另一个数组合并

Question

我有两个数组

const data= [
{ id: 1, value='123'},
{ id: 2, value='456'},
{ id: 3, value='457'},
{ id: 4, value='586'},

];

const colors = [
{ color: 'rgba(52, 182, 193, 0.7)' },
{ color: 'rgba(56, 206, 33, 0.7)' },
{ color: 'rgba(208, 88, 216, 0.7)' },
{ color: 'rgba(206, 66, 47, 0.7)' },
{ color: 'rgba(72, 84, 191, 0.7)' },
{ color: 'rgba(222, 249, 47, 0.7)' },

];

我想要一个将颜色字段合并到数据数组的新数组。

预期输出

const newArray= [
{ id: 1, value='123', color: 'rgba(52, 182, 193, 0.7)' },
{ id: 2, value='456', color: 'rgba(56, 206, 33, 0.7)' },
{ id: 3, value='457', color: 'rgba(208, 88, 216, 0.7)' },
{ id: 4, value='586', color: 'rgba(206, 66, 47, 0.7)' },

];

newArray 应该是数据数组的长度；实现这一目标的有效方法是什么。

Answer 1

您可以减少数组并映射值。这种方法适用于任意数量的数组。

var data= [{ id: 1, value:'123' }, { id: 2, value:'456' }, { id: 3, value:'457' }, { id: 4, value:'586' }],
    colors = [{ color: 'rgba(52, 182, 193, 0.7)' }, { color: 'rgba(56, 206, 33, 0.7)' }, { color: 'rgba(208, 88, 216, 0.7)' }, { color: 'rgba(206, 66, 47, 0.7)' }, { color: 'rgba(72, 84, 191, 0.7)' }, { color: 'rgba(222, 249, 47, 0.7)' }],
    result = [data, colors]
        .reduce((a, b) => a.map((o, i) => Object.assign({}, o, b[i])));

console.log(result);