Question Javascript place les valeurs du 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 newArray[0] être dataArray. Je veux pousser toutes les valeurs dans le nouveau tableau:

var newArray = [];

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

ou encore 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. Y a-t-il un raccourci comme pushValues disponible donc je ne dois pas itérer sur chaque dataArray, en ajoutant les valeurs 1 par 1?


650
2017-11-11 15:33


origine


Réponses:


Utilisez le concat fonction, comme ça:

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 retourne un nouveau tableau pour le résultat).


877
2017-11-11 15:37



Pourvu que vos tableaux ne soient pas énormes (voir la mise en garde ci-dessous), vous pouvez utiliser push() méthode du tableau auquel vous souhaitez ajouter des valeurs. push() peut prendre plusieurs paramètres afin que vous puissiez utiliser son apply() méthode pour passer le tableau de valeurs à pousser comme une liste de paramètres de fonction. Cela a l'avantage sur l'utilisation concat() d'ajouter des éléments au tableau plutôt que de créer un nouveau tableau.

Cependant, il semble que pour les grandes baies (de l'ordre de 100 000 membres ou plus), cette astuce peut échouer. Pour de tels réseaux, 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 pourriez vouloir généraliser ceci en une fonction:

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

... ou l'ajouter à ArrayLe prototype:

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

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

... ou émuler l'original push() méthode en permettant plusieurs paramètres en utilisant le fait que concat(), comme push(), permet 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]);
    }
};

584
2017-11-11 15:38



Je vais ajouter une réponse "future-proof"

Dans ECMAScript 6, vous pouvez utiliser opérateur de propagation:

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

L'opérateur de propagation n'est pas encore inclus dans tous les principaux navigateurs. Pour la compatibilité actuelle, voir ceci (mise à jour continue) table de compatibilité.

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


212
2017-09-10 21:12



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 le spread operator caractéristique de ES6:

let fruits = [ 'apple', 'banana'];
const moreFruits = [ 'orange', 'plum' ];

fruits.push(...moreFruits); // ["apple", "banana", "orange", "plum"]

124
2017-11-11 15:37



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?


11
2018-04-11 04:32



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 le apply méthode de push fonction pour pousser tous les éléments d'un autre tableau. Il construit un appel à pousser en utilisant son premier argument ("newArray" ici) comme "ceci" et le éléments du tableau en tant qu'arguments restants.

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

Mettre à jour Si vous utilisez une version de javascript avec tranche disponible, vous pouvez simplifier push expression à:

newArray.push(...dataArray2)

10
2018-06-29 18:24



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

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

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

Bien que la syntaxe soit concise, je ne sais pas comment cela fonctionne en interne et quelles sont les implications de performances sur les grands tableaux.


6
2018-05-20 15:01



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

pour la boucle et la poussée est:

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

Push Appliquer:

target.push.apply(target, source);

opérateur de propagation:

    target.push(...source);

et enfin la 'set length and for loop' est la fonction ci-dessus


6
2017-07-03 01:36