объединить поля массива с другим массивом с другой длиной в 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);

Answer 2

Если вы хотите эффективное и быстрое решение, используйте не карту, а цикл вместо:

   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)' }
    ];
    let result=[];
    const n = performance.now();
    for(let i=0;i<data.length;i++){
        result.push(Object.assign(data[i], colors[i]))
    }
    const n2 = performance.now();
    console.log(n2 - n);
    const n3 = performance.now();
    const results = data.map((o,i)=>Object.assign(o, colors[i]))
    const n4 = performance.now();
    console.log(n4 - n3);
    

Answer 3

Вы можете использовать .map() с Object.assign():

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 result = data.map((o, i) => Object.assign({}, o, colors[i]));

console.log(result);

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