web-dev-qa-db-fra.com

Pousser des éléments de tableau dans un autre tableau

J'ai un tableau JavaScript dataArray que je veux pousser dans un nouveau tableau newArray. Sauf que je ne veux pas que newArray[0] soit dataArray. Je veux pousser tous les éléments dans le nouveau tableau:

var newArray = [];

newArray.pushValues(dataArray1);
newArray.pushValues(dataArray2);
// ...

ou même mieux:

var newArray = new Array (
   dataArray1.values(),
   dataArray2.values(),
   // ... where values() (or something equivalent) would Push the individual values into the array, rather than the array itself
);

Alors maintenant, le nouveau tableau contient toutes les valeurs des tableaux de données individuels. Existe-t-il des raccourcis tels que pushValues, de sorte que je n'ai pas à parcourir chaque individu dataArray, en ajoutant les éléments un par un?

javascriptarrays
741
bba

Utilisez la fonction concat , comme suit:

var arrayA = [1, 2];
var arrayB = [3, 4];
var newArray = arrayA.concat(arrayB);

La valeur de newArray sera [1, 2, 3, 4] (arrayA et arrayB restent inchangés; concat crée et renvoie un nouveau tableau pour le résultat).

1004
WiseGuyEh

Si vos tableaux ne sont pas énormes (voir l'avertissement ci-dessous), vous pouvez utiliser la méthode Push() du tableau auquel vous souhaitez ajouter des valeurs. Push() peut prendre plusieurs paramètres afin que vous puissiez utiliser sa méthode apply() pour transmettre le tableau de valeurs à pousser en tant que liste de paramètres de fonction. Cela présente l'avantage par rapport à l'utilisation de concat() d'ajouter des éléments au tableau en place plutôt que de créer un nouveau tableau.

Cependant, il semble que pour les grands tableaux (de l’ordre de 100 000 membres ou plus), cette astuce puisse échouer. Pour de tels tableaux, l’utilisation d’une boucle est une meilleure approche. Voir https://stackoverflow.com/a/17368101/96100 pour plus de détails.

var newArray = [];
newArray.Push.apply(newArray, dataArray1);
newArray.Push.apply(newArray, dataArray2);

Vous voudrez peut-être généraliser ceci dans une fonction:

function pushArray(arr, arr2) {
    arr.Push.apply(arr, arr2);
}

... ou l'ajouter au prototype de Array:

Array.prototype.pushArray = function(arr) {
    this.Push.apply(this, arr);
};

var newArray = [];
newArray.pushArray(dataArray1);
newArray.pushArray(dataArray2);

... ou émulez la méthode Push() d'origine en autorisant plusieurs paramètres en utilisant le fait que concat(), comme Push(), autorise plusieurs paramètres:

Array.prototype.pushArray = function() {
    this.Push.apply(this, this.concat.apply([], arguments));
};

var newArray = [];
newArray.pushArray(dataArray1, dataArray2);

Voici une version en boucle du dernier exemple, adaptée aux grands tableaux et à tous les principaux navigateurs, y compris IE <= 8:

Array.prototype.pushArray = function() {
    var toPush = this.concat.apply([], arguments);
    for (var i = 0, len = toPush.length; i < len; ++i) {
        this.Push(toPush[i]);
    }
};
608
Tim Down

J'ajouterai une réponse "pérenne"

Dans ECMAScript 6, vous pouvez utiliser l'opérateur spread :

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

L'opérateur Spread n'est pas encore inclus dans tous les principaux navigateurs. Pour la compatibilité actuelle, voir ce tableau de compatibilité (mis à jour en permanence). 

Vous pouvez cependant utiliser l'opérateur spread avec Babel.js .

modifier:

Voir la réponse de Jack Giffin ci-dessous pour plus de commentaires sur les performances. Il semble que le concat est toujours meilleur et plus rapide que l’opérateur de spread.

297
Karel Bílek

Trouvé un moyen élégant de MDN

var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// Merge the second array into the first one
// Equivalent to vegetables.Push('celery', 'beetroot');
Array.prototype.Push.apply(vegetables, moreVegs);

console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']

Ou vous pouvez utiliser la fonctionnalité spread operator de ES6:

let fruits = [ 'Apple', 'banana'];
const moreFruits = [ 'orange', 'Plum' ];

fruits.Push(...moreFruits); // ["Apple", "banana", "orange", "Plum"]
136
Believe2014
var a=new Array('a','b','c');
var b=new Array('d','e','f');
var d=new Array('x','y','z');
var c=a.concat(b,d)

Cela résout-il votre problème?

12
Sébastien VINCENT

Ce qui suit me semble le plus simple:

var newArray = dataArray1.slice();
newArray.Push.apply(newArray, dataArray2);

Comme "Push" prend un nombre variable d'arguments, vous pouvez utiliser la méthode apply de la fonction Push pour pousser tous les éléments d'un autre tableau. Il construit Un appel à Push en utilisant son premier argument ("newArray" ici) en tant que "this" et les éléments Du tableau en tant qu'arguments restants.

La slice dans la première instruction obtient une copie du premier tableau, de sorte que vous ne le modifiez pas.

Mise à jour Si vous utilisez une version de javascript avec une tranche disponible, vous pouvez simplifier l'expression Push en:

newArray.Push(...dataArray2)
12
shaunc

Un certain nombre de réponses parlent de Array.prototype.Push.apply . Voici un exemple clair:

var dataArray1 = [1, 2];
var dataArray2 = [3, 4, 5];
var newArray = [ ];
Array.prototype.Push.apply(newArray, dataArray1); // newArray = [1, 2]
Array.prototype.Push.apply(newArray, dataArray2); // newArray = [1, 2, 3, 4, 5]
console.log(JSON.stringify(newArray)); // Outputs: [1, 2, 3, 4, 5]

Si vous avez la syntaxe ES6:

var dataArray1 = [1, 2];
var dataArray2 = [3, 4, 5];
var newArray = [ ];
newArray.Push(...dataArray1); // newArray = [1, 2]
newArray.Push(...dataArray2); // newArray = [1, 2, 3, 4, 5]
console.log(JSON.stringify(newArray)); // Outputs: [1, 2, 3, 4, 5]

9
Stephen Quan

Avec JavaScript ES6, vous pouvez utiliser l'opérateur ... en tant qu'opérateur de propagation, qui convertira essentiellement le tableau en valeurs. Ensuite, vous pouvez faire quelque chose comme ceci:

const myArray = [1,2,3,4,5];
const moreData = [6,7,8,9,10];

const newArray = [
  ...myArray,
  ...moreData,
];

Bien que la syntaxe soit concise, j'ignore comment cela fonctionne en interne et quelles sont les implications en termes de performances pour les tableaux de grande taille.

7
Ryan H.

La fonction ci-dessous n'a pas de problème avec la longueur des tableaux et fonctionne mieux que toutes les solutions suggérées:

function pushArray(list, other) {
    var len = other.length;
    var start = list.length;
    list.length = start + len;
    for (var i = 0; i < len; i++ , start++) {
        list[start] = other[i];
    }
}

malheureusement, jspref refuse d'accepter mes soumissions, alors voici les résultats en utilisant benchmark.js

        Name            |   ops/sec   |  ± %  | runs sampled
for loop and Push       |      177506 |  0.92 | 63
Push Apply              |      234280 |  0.77 | 66
spread operator         |      259725 |  0.40 | 67
set length and for loop |      284223 |  0.41 | 66

où

for loop et Push est:

    for (var i = 0, l = source.length; i < l; i++) {
        target.Push(source[i]);
    }

Push Apply:

target.Push.apply(target, source);

opérateur de propagation:

    target.Push(...source);

et enfin la "longueur définie et pour la boucle" est la fonction ci-dessus

7
Panos Theof

Voici la manière ES6  

var newArray = [];
let dataArray1 = [1,2,3,4]
let dataArray2 = [5,6,7,8]
newArray = [...dataArray1, ...dataArray2]
console.log(newArray)

La méthode ci-dessus est bonne pour la plupart des cas, et s'il ne s'agit pas de cas, veuillez considérer concat, comme si vous aviez cent milliers d'éléments dans des tableaux.

    let dataArray1 = [1,2,3,4]
    let dataArray2 = [5,6,7,8]
    let newArray = dataArray1.concat(dataArray2);
    console.log(newArray)

3
Black Mamba

Nous avons deux tableaux a et b. le code que fait ici est tableau une valeur est poussée dans tableau b.

let a = [2, 4, 6, 8, 9, 15]

function transform(a) {
    let b = ['4', '16', '64']
    a.forEach(function(e) {
        b.Push(e.toString());
    });
    return b;
}

transform(a)

[ '4', '16', '64', '2', '4', '6', '8', '9', '15' ]
0
KARTHIKEYAN.A

Si vous souhaitez modifier le tableau d'origine, vous pouvez étendre et pousser:

var source = [1, 2, 3];
var range = [5, 6, 7];
var length = source.Push(...range);

console.log(source); // [ 1, 2, 3, 5, 6, 7 ]
console.log(length); // 6

Si vous voulez vous assurer que seuls les éléments du même type figurent dans le tableau source (sans mélanger les nombres et les chaînes par exemple), utilisez TypeScript.

/**
 * Adds the items of the specified range array to the end of the source array.
 * Use this function to make sure only items of the same type go in the source array.
 */
function addRange<T>(source: T[], range: T[]) {
    source.Push(...range);
}
0
orad