Fusionner des tableaux JavaScript en fonction de l'index sans .concat

Question

J'essaie de combiner deux tableaux et la plupart des réponses concernent l'ajout du deuxième tableau à la fin du premier. J'ai besoin de fusionner indice à indice.

Voici un exemple de code :

let arr1 = ['golf', 'hockey', 'tennis'];
let arr2 = ['player1', 'player2', 'player3'];

Array.prototype.zip = function (arr) {
  return this.map(function (e, i) {
    return [ e, arr[i]];
  })
};
const arr3 = arr1.zip(arr2);
console.log(arr3);

Le résultat devrait être :

['golf', 'player1', 'hockey', 'player2', 'tennis', 'player3']

Le code ci-dessus semble devoir fonctionner mais ne fonctionne pas. S'il peut être corrigé, ou échangé contre un meilleur, ce serait génial......

Answer 1

Vous pouvez utiliser .reduce() pour fermer les deux tableaux :

let arr1 = ['golf', 'hockey', 'tennis'],
    arr2 = ['player1', 'player2', 'player3'];

let zip = (a1, a2) => a1.reduce((a, c, i) => (a.push(c, a2[i]), a), []);

console.log(zip(arr1, arr2));

Docs :

• Array.prototype.reduce()
• Arrow Functions
• Comma Operator

Answer 2

Vous pouvez utiliser un tableau de temp au lieu de la méthode d'entrée directe.

let arr1 = ['golf', 'hockey', 'tennis'];
let arr2 = ['player1', 'player2', 'player3']

Array.prototype.zip = function (arr) {
    this.map(function (e, i) { this.splice(i*2+1, 0, arr[i]); }, this )
};
const arr3 = arr1.zip(arr2)
console.log(arr3)

Answer 3

.map fait correspondre un tableau à un autre tableau tête-à-tête : si vous avez 3 éléments dans le tableau d'origine, .map ne peut produire qu'un autre tableau comportant 3 éléments. Si vous ne pouvez pas utiliser concat utiliser .reduce au lieu de .map de cette façon, vous pouvez pousser plusieurs éléments en une seule itération :

const arr1 = ['golf', 'hockey', 'tennis'];
const arr2 = ['player1', 'player2', 'player3']

Array.prototype.zip = function (otherArr) {
  return this.reduce((accum, item, i) => {
    accum.push(item);
    accum.push(otherArr[i]);
    return accum;
  }, []);
};
const arr3 = arr1.zip(arr2)
console.log(arr3)

Bien entendu, il serait préférable de ne pas modifier l'objet Array intégré. Vous pourriez facilement éviter cela en utilisant une fonction autonome à la place :

const arr1 = ['golf', 'hockey', 'tennis'];
const arr2 = ['player1', 'player2', 'player3']

function zip(arr1, arr2) {
  return arr1.reduce((accum, item, i) => {
    accum.push(item);
    accum.push(arr2[i]);
    return accum;
  }, []);
};
const arr3 = zip(arr1, arr2);
console.log(arr3);

Answer 4

Une solution simple : Il suffit d'aplatir ce que vous avez maintenant avec un simple reduce() :

let arr1 = ['golf', 'hockey', 'tennis'];
let arr2 = ['player1', 'player2', 'player3']

Array.prototype.zip = function (arr) {
      return this.map(function (e, i) {
          return [ e, arr[i]]
      }).reduce((a,b)=>a.concat(b)); // blink and you miss the change...
    };
const arr3 = arr1.zip(arr2)
console.log(arr3)

Cette approche préserve ce que vous avez et n'ajoute pas beaucoup de complexité comme des appels de méthode supplémentaires, des tableaux temporaires, etc. C'est la beauté de l'approche fonctionnelle : vous êtes à un maillon de la chaîne de ce dont vous avez besoin. Je le convertirais également en une méthode autonome au lieu de modifier le prototype, mais ce n'est pas le sujet...