Comment étendre un tableau JavaScript existant avec un autre tableau, sans créer un nouveau tableau

Il ne semble pas y avoir de moyen d'étendre un tableau JavaScript existant avec un autre tableau, c'est-à-dire d'émuler la extendméthode de Python .

Je veux atteindre les objectifs suivants:

>>> a = [1, 2]
[1, 2]
>>> b = [3, 4, 5]
[3, 4, 5]
>>> SOMETHING HERE
>>> a
[1, 2, 3, 4, 5]

Je sais qu'il existe une a.concat(b)méthode, mais elle crée un nouveau tableau au lieu d'étendre simplement le premier. Je voudrais un algorithme qui fonctionne efficacement lorsqu'il aest beaucoup plus grand que b(c'est-à-dire qui ne copie pas a)

_{Remarque: Ce n'est pas un doublon de Comment ajouter quelque chose à un tableau? - le but ici est d'ajouter tout le contenu d'un tableau à l'autre, et de le faire "sur place", c'est-à-dire sans copier tous les éléments du tableau étendu.}

La .pushméthode peut prendre plusieurs arguments. Vous pouvez utiliser l' opérateur d'étalement pour passer tous les éléments du deuxième tableau comme arguments pour .push:

>>> a.push(...b)

Si votre navigateur ne prend pas en charge ECMAScript 6, vous pouvez utiliser à la .applyplace:

>>> a.push.apply(a, b)

Ou peut-être, si vous pensez que c'est plus clair:

>>> Array.prototype.push.apply(a,b)

Veuillez noter que toutes ces solutions échoueront avec une erreur de débordement de pile si le tableau best trop long (le problème commence à environ 100 000 éléments, selon le navigateur).
Si vous ne pouvez pas garantir que bc'est assez court, vous devez utiliser une technique standard basée sur la boucle décrite dans l'autre réponse.

_{Mise à jour 2018 : Une meilleure réponse est une plus récente de la mine : a.push(...b). Ne votez plus pour celui-ci, car il n'a jamais vraiment répondu à la question, mais c'était un hack de 2015 autour du premier hit sur Google :)}

Pour ceux qui ont simplement recherché "JavaScript array extend" et sont arrivés ici, vous pouvez très bien les utiliser Array.concat.

var a = [1, 2, 3];
a = a.concat([5, 4, 3]);

Concat retournera une copie du nouveau tableau, comme le démarreur de thread ne le voulait pas. Mais vous pourriez ne pas vous en soucier (certainement pour la plupart des types d'utilisations, ce sera parfait).

Il y a aussi du bon sucre ECMAScript 6 pour cela sous la forme de l'opérateur de propagation:

const a = [1, 2, 3];
const b = [...a, 5, 4, 3];

(Il copie également.)

Vous devez utiliser une technique basée sur une boucle. Les autres réponses de cette page basées sur l'utilisation .applypeuvent échouer pour les grands tableaux.

Une implémentation en boucle assez concise est:

Array.prototype.extend = function (other_array) {
    /* You should include a test to check whether other_array really is an array */
    other_array.forEach(function(v) {this.push(v)}, this);
}

Vous pouvez ensuite effectuer les opérations suivantes:

var a = [1,2,3];
var b = [5,4,3];
a.extend(b);

La réponse de DzinX (en utilisant push.apply) et d'autres .applyméthodes basées échouent lorsque le tableau que nous ajoutons est grand (les tests montrent que pour moi, grand est> 150 000 entrées environ dans Chrome et> 500 000 entrées dans Firefox). Vous pouvez voir cette erreur se produire dans ce jsperf .

Une erreur se produit car la taille de la pile d'appels est dépassée lorsque «Function.prototype.apply» est appelé avec un grand tableau comme deuxième argument. (MDN a une note sur les dangers de dépasser la taille de la pile d'appels en utilisant Function.prototype.apply - voir la section intitulée "Appliquer et fonctions intégrées".)

Pour une comparaison de vitesse avec d'autres réponses sur cette page, consultez ce jsperf (grâce à EaterOfCode). L'implémentation basée sur la boucle est similaire en vitesse à l'utilisation Array.push.apply, mais a tendance à être un peu plus lente que Array.slice.apply.

Fait intéressant, si le tableau que vous ajoutez est clairsemé, la forEachméthode basée ci-dessus peut tirer parti de la rareté et surpasser les .applyméthodes basées; consultez ce jsperf si vous voulez le tester par vous-même.

Soit dit en passant, ne soyez pas tenté (comme je l'étais!) De raccourcir encore la mise en œuvre de forEach pour:

Array.prototype.extend = function (array) {
    array.forEach(this.push, this);
}

car cela produit des résultats poubelles! Pourquoi? Parce que Array.prototype.forEachfournit trois arguments à la fonction qu'elle appelle - ce sont: (element_value, element_index, source_array). Tous ces éléments seront poussés sur votre premier tableau à chaque itération de forEachsi vous utilisez "forEach (this.push, this)"!

Je pense que le plus élégant de nos jours est:

arr1.push(...arr2);

L' article de MDN sur l'opérateur de spread mentionne cette belle manière sucrée dans ES2015 (ES6):

Une meilleure poussée

Exemple: push est souvent utilisé pour pousser un tableau à la fin d'un tableau existant. Dans ES5, cela se fait souvent comme suit:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
Array.prototype.push.apply(arr1, arr2);

Dans ES6 avec propagation, cela devient:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

Notez que arr2cela ne peut pas être énorme (gardez-le sous environ 100 000 éléments), car la pile d'appels déborde, selon la réponse de jcdude.

D'abord quelques mots sur apply()JavaScript pour comprendre pourquoi nous l'utilisons:

La apply()méthode appelle une fonction avec une thisvaleur donnée et des arguments fournis sous forme de tableau.

Push attend une liste d'éléments à ajouter au tableau. Le apply()procédé, cependant, prend les arguments attendus pour l'appel de fonction sous forme de tableau. Cela nous permet de facilement pushles éléments d'un tableau dans un autre tableau avec la push()méthode intégrée .

Imaginez que vous ayez ces tableaux:

var a = [1, 2, 3, 4];
var b = [5, 6, 7];

et faites simplement ceci:

Array.prototype.push.apply(a, b);

Le résultat sera:

a = [1, 2, 3, 4, 5, 6, 7];

La même chose peut être effectuée dans ES6 en utilisant l'opérateur d'étalement (" ...") comme ceci:

a.push(...b); //a = [1, 2, 3, 4, 5, 6, 7]; 

Plus court et meilleur mais pas entièrement pris en charge dans tous les navigateurs pour le moment.

De plus, si vous souhaitez tout déplacer du tableau bvers le avidage bdans le processus, vous pouvez le faire:

while(b.length) {
  a.push(b.shift());
} 

et le résultat sera le suivant:

a = [1, 2, 3, 4, 5, 6, 7];
b = [];

Si vous souhaitez utiliser jQuery, il y a $ .merge ()

Exemple:

a = [1, 2];
b = [3, 4, 5];
$.merge(a,b);

Résultat: a = [1, 2, 3, 4, 5]

J'aime la a.push.apply(a, b)méthode décrite ci-dessus, et si vous le souhaitez, vous pouvez toujours créer une fonction de bibliothèque comme celle-ci:

Array.prototype.append = function(array)
{
    this.push.apply(this, array)
}

et l'utiliser comme ça

a = [1,2]
b = [3,4]

a.append(b)

Il est possible de le faire en utilisant splice():

b.unshift(b.length)
b.unshift(a.length)
Array.prototype.splice.apply(a,b) 
b.shift() // Restore b
b.shift() // 

Mais bien qu'il soit plus laid, il n'est pas plus rapide que push.apply, du moins pas dans Firefox 3.0.

Cette solution fonctionne pour moi (en utilisant l'opérateur de propagation d'ECMAScript 6):

let array = ['my', 'solution', 'works'];
let newArray = [];
let newArray2 = [];
newArray.push(...array); // Adding to same array
newArray2.push([...array]); // Adding as child/leaf/sub-array
console.log(newArray);
console.log(newArray2);

Vous pouvez créer un polyfill pour étendre comme je l'ai ci-dessous. Cela ajoutera au tableau; en place et se retourner, de sorte que vous pouvez enchaîner d'autres méthodes.

if (Array.prototype.extend === undefined) {
  Array.prototype.extend = function(other) {
    this.push.apply(this, arguments.length > 1 ? arguments : other);
    return this;
  };
}

function print() {
  document.body.innerHTML += [].map.call(arguments, function(item) {
    return typeof item === 'object' ? JSON.stringify(item) : item;
  }).join(' ') + '\n';
}
document.body.innerHTML = '';

var a = [1, 2, 3];
var b = [4, 5, 6];

print('Concat');
print('(1)', a.concat(b));
print('(2)', a.concat(b));
print('(3)', a.concat(4, 5, 6));

print('\nExtend');
print('(1)', a.extend(b));
print('(2)', a.extend(b));
print('(3)', a.extend(4, 5, 6));

body {
  font-family: monospace;
  white-space: pre;
}

Combiner les réponses ...

Array.prototype.extend = function(array) {
    if (array.length < 150000) {
        this.push.apply(this, array)
    } else {
        for (var i = 0, len = array.length; i < len; ++i) {
            this.push(array[i]);
        };
    }  
}

Une autre solution pour fusionner plus de deux baies

var a = [1, 2],
    b = [3, 4, 5],
    c = [6, 7];

// Merge the contents of multiple arrays together into the first array
var mergeArrays = function() {
 var i, len = arguments.length;
 if (len > 1) {
  for (i = 1; i < len; i++) {
    arguments[0].push.apply(arguments[0], arguments[i]);
  }
 }
};

Ensuite, appelez et imprimez comme:

mergeArrays(a, b, c);
console.log(a)

La sortie sera: Array [1, 2, 3, 4, 5, 6, 7]

La réponse est super simple.

>>> a = [1, 2]
[1, 2]
>>> b = [3, 4, 5]
[3, 4, 5]
>>> SOMETHING HERE
(The following code will combine the two arrays.)

a = a.concat(b);

>>> a
[1, 2, 3, 4, 5]

Concat agit de manière très similaire à la concaténation de chaînes JavaScript. Il renverra une combinaison du paramètre que vous mettez dans la fonction concat à la fin du tableau sur lequel vous appelez la fonction. Le nœud est que vous devez affecter la valeur retournée à une variable ou elle se perd. Donc par exemple

a.concat(b);  <--- This does absolutely nothing since it is just returning the combined arrays, but it doesn't do anything with it.

Utiliser Array.extendau lieu de Array.pushpour> 150 000 enregistrements.

if (!Array.prototype.extend) {
  Array.prototype.extend = function(arr) {
    if (!Array.isArray(arr)) {
      return this;
    }

    for (let record of arr) {
      this.push(record);
    }

    return this;
  };
}

Super simple, ne compte pas sur les opérateurs de spread ou ne s'applique pas, si c'est un problème.

b.map(x => a.push(x));

Après avoir exécuté des tests de performances à ce sujet, c'est terriblement lent, mais répond à la question concernant la non-création d'un nouveau tableau. Concat est beaucoup plus rapide, même celui de jQuery $.merge().

https://jsperf.com/merge-arrays19b/1