fusionner les champs d'un tableau avec un autre tableau de longueur différente en javascript

Question

J'ai deux tableaux

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)' },

] ;

Je veux un nouveau tableau qui fusionnera le champ des couleurs avec le tableau des données.

Résultat attendu

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 doit être de la longueur du tableau de données ; Quel est le moyen efficace d'y parvenir ?

Answer 1

Vous pouvez utiliser .map() con 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; }

Answer 2

Vous pouvez réduire les tableaux et mettre en correspondance les valeurs. Cette approche fonctionne pour un nombre arbitraire de tableaux.

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 3

Si vous voulez une solution efficace et rapide, n'utilisez pas map, mais plutôt la boucle for :

   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);