Quel est le moyen le plus efficace pour concaténer des N matrices?

Quel est le moyen le plus efficace pour concaténer N les tableaux d'objets en JavaScript?

Les tableaux sont mutables, et le résultat peut être stocké dans un des tableaux.

InformationsquelleAutor Leonid | 2011-02-22
  1. 281

    Si vous êtes à la concaténation de plus de deux matrices, concat() est le chemin à parcourir pour plus de commodité et de performance.

    var a = [1, 2], b = ["x", "y"], c = [true, false];
var d = a.concat(b, c);
console.log(d); //[1, 2, "x", "y", true, false];

    Pour concaténer le juste deux tableaux, le fait que push accepte plusieurs arguments composé d'éléments à ajouter à l'éventail peut être utilisé au lieu d'ajouter des éléments d'un tableau à la fin de l'autre, sans la production d'un nouveau tableau. Avec slice() il peut également être utilisé à la place de concat() mais il semble y avoir aucun avantage en termes de performances de faire ce.

    var a = [1, 2], b = ["x", "y"];
a.push.apply(a, b);
console.log(a); //[1, 2, "x", "y"];

    Dans ECMAScript 2015 et plus tard, ce peut être encore réduite à

    a.push(...b)

    Cependant, il semble que pour les tableaux de grande taille (de l'ordre de 100 000 membres ou plus), la technique du passage d'un tableau d'éléments de push (soit à l'aide de apply() ou ECMAScript 2015 la propagation de l'opérateur) peut échouer. Pour ces tableaux, à l'aide d'une boucle est une meilleure approche. Voir https://stackoverflow.com/a/17368101/96100 pour plus de détails.

    • Je crois que votre test peut-être une erreur: le a.concat(b) cas de test semble être inutilement de faire une copie du tableau a puis de le jeter.
    • Vous avez raison. J'ai mis ça: jsperf.com/concatperftest/6. Pour le cas particulier de la création d'un nouveau tableau qui concatène deux tableaux, il apparaît concat() est généralement plus rapide. Pour le cas de la concaténation d'un tableau sur une matrice existante en place, push() est le chemin à parcourir. J'ai mis à jour ma réponse.
    • Je peux témoigner du fait que l'extension d'un tableau unique avec plusieurs nouveaux tableaux à l'aide de la poussée.appliquer la méthode confère un énorme avantage en termes de performance (~100x) sur de simples concat appel. Je fais face à de très longues listes de listes d'entiers, dans v8/node.js.
    • confirmé. Je suis en train de faire un fichier crypto en JS (aucun de ces [1,2,3].concat([4,5,6]) choses) et de faire for(var i = 0, n = arr2.length; i < n; i++) arr1.push(arr2[i]); semble être la manière la plus rapide de toute méthode que j'ai vu jusqu'à présent pour plus grands ensembles de données.
    • L'aide est certainement la solution la plus rapide. Cependant j'aime ceci: while(b.length) a.push(b.splice(0,1)[0]); parce qu'il est presque aussi rapide, mais ressemble beaucoup carde 😀
    • Je suis d'accord que @chbrown dit, j'ai dû créer un tableau qui avait besoin de concaténation autour de 1700 fois. Avec un = un.concat(b) il fallait environ 3 secondes, y compris d'autres traitements. J'ai changé pour un.push.appliquer(a, b) et le temps était de millisecondes.
    • D'une même manière plus concise est un.push(...b);
    • Vrai, mais seulement dans l'ES6 environnements. J'ai ajouté une note à ma réponse.
    • juste assez, j'ai été fait, l'aide par le biais de la Machine qui est ensuite transpiled à l'ES5. Le transpiled version utilise a.push.apply(a,b)
    • jsperf.com/javascript-array-concat-vs-push/100
    • concat crée un nouveau tableau, en laissant les originaux intacts, c'est pourquoi il est plus lent que simplement en ajoutant de nouveaux éléments et elle crée aussi plus Umemory ordures sont collectées. Bâton avec push, sauf si vous avez réellement besoin d'une nouvelle marque d'objet tableau.
    • C'est vrai, mais la réponse ne fait allusion à cela.
    • À l'aide de concat est a été plus lent que d'utiliser push. codeburst.io/...

    InformationsquelleAutor Tim Down
  2. 149
    [].concat.apply([], [array1, array2, ...])

    modifier: la preuve de son efficacité: http://jsperf.com/multi-array-concat/7

    edit2: Tim Supinie mentionne dans les commentaires que cela peut entraîner l'interprète de dépasser la taille de la pile d'appel. C'est peut-être dépend de la js moteur, mais j'ai aussi eu "Maximale de la pile d'appels de taille dépassé" sur Chrome au moins. Cas de Test: [].concat.apply([], Array(300000).fill().map(_=>[1,2,3])). (J'ai aussi eu le même message d'erreur à l'aide de la accepté de répondre, de manière à anticiper de tels cas d'utilisation ou de la construction d'une bibliothèque pour les autres, des tests spéciaux peuvent être nécessaires n'importe quelle solution vous choisissez.)

    • il semble aussi efficace que la réponse choisie à plusieurs reprises .pousser(#,#,...,#), sur Chrome au moins. jsperf.com/multi-array-concat La réponse choisie par Tim Down peuvent aussi avoir d'erreur. Ce lien est une comparaison des performances de rejoindre plusieurs tableaux à la question posée (et pas seulement 2); plusieurs longueurs sont testés.
    • IMO c'est le moyen le plus efficace pour "fusionner" n tableaux, bien fait
    • Cette réponse est particulièrement utile lorsque N n'est pas connu à l'avance comme lorsque vous avez un tableau de tableaux de longueur arbitraire et que vous voulez tous concaténées.
    • Avec ES6 et la propagation des opérateurs, il est encore plus simple: [].concat(...[matrice1, matrice2, ...]), la deuxième à trois points sont un peu malheureux. Le premier des trois est la propagation de l'opérateur developer.mozilla.org/en/docs/Web/JavaScript/Reference/...
    • Eydrian: personnellement, j'essaie d'éviter la propagation de l'opérateur, car il est très inefficace, mais je ne sais pas encore si c'est parce que la mise en œuvre est immature, ou la sémantique de l'es6 spécification nécessitent un peu plus lourd de levage (c'est à dire qu'il ne sera jamais mieux). N'ayant pas les points de repère dans ce cas particulier, cependant.
    • Pourquoi utilisez-vous apply avec un tableau vide en tant que premier paramètre??? pourquoi ne pas simplement utiliser var result = [].concat(arr1, arr2, ..., arrN) ?????
    • la question posée de savoir comment concaténer des N matrices. Votre méthode de travail si vous vouliez taper tout (et est certainement une bonne chose pour N=3), mais c'est comme quelqu'un demandant comment écrire une boucle for et de leur dire de simplement taper 10 fois. par exemple, je pourrais peut-être l'ai dit [].concat.apply([], arrays) à l'intérieur d'un function concatArray(arrays) {...}.
    • quand vous dites que ma méthode fonctionne uniquement pour les 3 tableaux, c'est faux! vous pouvez concat autant de tableaux que vous le souhaitez dans la méthode. Vous utilisez la même méthode que l'ajout d'une étape supplémentaire de concat-ing un tableau vide à la liste des tableaux, cette étape est inutile.
    • Je n'ai jamais dit que. Vous êtes à l'incompréhension de mon explication. Un multi-paramètre de la fonction n'est pas la même chose qu'un non-multi-paramètre de la fonction. Les gens sont libres de code de cette façon si ils veulent. Encore une fois, il n'y a rien de mal avec votre méthode, et il est bon pour un petit nombre d'arguments, mais une mauvaise pour les plus grands. C'est fondamentalement la même méthode.
    • Voulais juste ajouter que cela ne fonctionne pas pour moi. Les listes sont combinées dans une liste de listes, pas une liste concaténée.
    • Il fonctionne pour tout le monde. Peut-être vous êtes l'allaitement de non-tableaux, ou quelque chose comme [[1,2,3]] sans s'en rendre compte. Sinon, vous pourriez parler de votre JS interprète ou le navigateur si elle n'a pas de travail et de test.
    • Je l'ai eu à travailler. Il me semble étrange de ce Tableau.concat() ne pas modifier le tableau en place.
    • Juste pour info, cette méthode peut remplir la pile d'appel si N est très grand. J'ai essayé un cas où N est ~225 K et a couru dans cette question.
    • merci, c'est très intéressant! J'ai ajouté que comme une mise en garde.

    InformationsquelleAutor ninjagecko
  3. 25

    La concat() méthode est utilisé pour joindre deux ou plusieurs tableaux. Il ne change pas les tables existantes, il ne renvoie une copie de la rejoint tableaux.

    array1 = array1.concat(array2, array3, array4, ..., arrayN);
    • Parfois je déteste JavaScript pour ne pas modyfying le tableau d'origine.
    InformationsquelleAutor dogbane
  4. 25

    Pour les personnes utilisant ES2015 (ES6)

    Vous pouvez maintenant utiliser la Propagation de la Syntaxe pour concaténer deux tableaux:

    const arr1 = [0, 1, 2],
      arr2 = [3, 4, 5];

const result1 = [...arr1, ...arr2]; //-> [0, 1, 2, 3, 4, 5]

//or...

const result2 = [...arr2, ...arr1]; //-> [3, 4, 5, 0, 1, 2]
    InformationsquelleAutor Duncan Luk
  5. 21

    Utilisation De Tableau.le prototype.concat.s'appliquent à gérer plusieurs matrices de concaténation:

    var resultArray = Array.prototype.concat.apply([], arrayOfArraysToConcat);

    Exemple:

    var a1 = [1, 2, 3],
    a2 = [4, 5],
    a3 = [6, 7, 8, 9];
Array.prototype.concat.apply([], [a1, a2, a3]); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
    • Je l'aime! Fonctionne facilement avec un nombre variable de tableaux pour les concaténer. +1
    InformationsquelleAutor Burnee
  6. 13

    Si vous êtes dans le milieu de la tuyauterie, le résultat par le biais de la carte/filtre/tri, etc et vous souhaitez concat tableau de tableaux, vous pouvez utiliser reduce

    let sorted_nums = ['1,3', '4,2']
  .map(item => item.split(','))   //[['1', '3'], ['4', '2']]
  .reduce((a, b) => a.concat(b))  //['1', '3', '4', '2']
  .sort()                         //['1', '2', '3', '4']
    InformationsquelleAutor artnikpro
  7. 11

    Pour le tableau de multiples tableaux et ES6, utilisez

    Array.prototype.concat(...arr);

    Par exemple:

    const arr = [[1, 2, 3], [4, 5, 6], [7, 8 ,9]];
const newArr = Array.prototype.concat(...arr);
//output: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
    • En outre, vous pouvez supprimer les éléments en double en utilisant newArr = Array.from(new Set(newArr));.
    InformationsquelleAutor David
  8. 7

    Maintenant, nous pouvons combiner plusieurs tableaux à l'aide de ES6 Spread.
    Au lieu d'utiliser concat() pour concaténer des tableaux, essayez d'utiliser la propagation de la syntaxe de combiner plusieurs tableaux en un seul aplatie tableau.
    par exemple: 

    var a = [1,2];
var b = [3,4];
var c = [5,6,7];
var d = [...a, ...b, ...c];
//resulting array will be like d = [1,2,3,4,5,6,7]
    InformationsquelleAutor chinmayan
  9. 4

    Facilement avec la fonction concat:

    var a = [1,2,3];
var b = [2,3,4];
a = a.concat(b);
>> [1,2,3,2,3,4]
    InformationsquelleAutor Dmitri Farkov
  10. 3

    Vous pouvez utiliser jsperf.com site pour comparer les performances. Voici le lien pour concat.

    Ajouté comparaison entre:

    var c = a.concat(b);

    et:

    var c = [];
for (i = 0; i < a.length; i++) {
    c.push(a[i]);
}
for (j = 0; j < b.length; j++) {
    c.push(b[j]);
}

    La deuxième est près de 10 fois plus lent dans google chrome.

    • Toutefois, vous pouvez utiliser push.apply(), qui semble être plus rapide que concat() dans tous les navigateurs, sauf Chrome. Voir ma réponse.
    InformationsquelleAutor gor
  11. 3

    résolu comme ça.

    let arr = [[1, 2], [3, 4], [5, 6]];
 console.log([].concat(...arr));
    InformationsquelleAutor Th1
  12. 2

    Voici une fonction qui vous permet de concaténer plusieurs nombre de tableaux

    function concatNarrays(args) {
    args = Array.prototype.slice.call(arguments);
    var newArr = args.reduce( function(prev, next) {
       return prev.concat(next) ;
    });

    return newArr;
}

    Exemple -

    console.log(concatNarrays([1, 2, 3], [5, 2, 1, 4], [2,8,9]));

    sortie 

    [1,2,3,5,2,1,4,2,8,9]
    InformationsquelleAutor Koushik Das
  13. 2

    Si vous avez tableau de tableaux et souhaitez concat les éléments dans un tableau unique, essayez le code suivant (Nécessite ES2015): 

    let arrOfArr = [[1,2,3,4],[5,6,7,8]];
let newArr = [];
for (let arr of arrOfArr) {
    newArr.push(...arr);
}

console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

    Ou si vous êtes en programmation fonctionnelle

    let arrOfArr = [[1,2,3,4],[5,6,7,8]];
let newArr = arrOfArr.reduce((result,current)=>{
    result.push(...current);
    return result;
});

console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

    Ou encore mieux avec ES5 syntaxe, sans la propagation de l'opérateur

    var arrOfArr = [[1,2,3,4],[5,6,7,8]];
var newArr = arrOfArr.reduce((result,current)=>{
    return result.concat(current);
});
console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

    De cette façon est très pratique si vous ne connaissez pas le pas. de tableaux dans le code de temps.

    InformationsquelleAutor noob
  14. 2

    Diminuer avec l'ES6. 

    new Set([].concat(...Array));

    Cela ne concat et unique les multiples tableaux;

    Démo sur codepen

    InformationsquelleAutor ronaldtgi
  15. 1

    où 'n' est un certain nombre de tableaux, peut-être un tableau de tableaux . . .

    var reponse = _.réduire(n, la fonction(a, b){ return a.concat(b)})

    InformationsquelleAutor rashadb
  16. 1

    Si il y a seulement deux tableaux à concat, et vous avez réellement besoin de ajouter l'un des tableaux plutôt que d'en créer un nouveau, de la pousser ou de la boucle est le chemin à parcourir.

    Référence: https://jsperf.com/concat-small-arrays-vs-push-vs-loop/

    InformationsquelleAutor Dan
  17. 1

    De fusion de la Matrice de avec Push:

    JS:

    const array1 = [2, 7, 4];
const array2 = [3, 5,9];
array1.push(...array2);
console.log(array1)

    À l'aide de Concat et Propagation de l'opérateur:

    JS:

    const array1 = [1,2];
const array2 = [3,4];

//Method 1: Concat 
const combined1 = [].concat(array1, array2);

//Method 2: Spread
const combined2 = [...array1, ...array2];

console.log(combined1);
console.log(combined2);

    InformationsquelleAutor Zobia Kanwal
  18. 0

    essayez ceci:

    i=new Array("aaaa", "bbbb");
j=new Array("cccc", "dddd");

i=i.concat(j);
    • c'est ma réponse jairo?
    • vous le copier-collé à partir de la même source 😉
    • non, je n'ai vérifier les infos dans le même lien que vous. ilovethecode.com/Javascript/Javascript-Tutorials-How_To-Easy/...
    • ouais...je pense que nous avons obtenu à partir de la même source 😀
    • au moins @JAiro changé le contenu du tableau. @reggie n'a pas. 🙂
    • c'est la même chose, la chose importante est d'aider les gens à résoudre ses problèmes 🙂
    • Je seconde 🙂

    InformationsquelleAutor JAiro
  19. 0

    si la N des tableaux sont obtenus à partir de la base de données et pas codé en dur, la je vais le faire comme ceci en utilisant ES6

    let get_fruits = [...get_fruits , ...DBContent.fruit];
    InformationsquelleAutor Akinnifesi Damilola