web-dev-qa-db-fra.com

Comment ajouter quelque chose à un tableau?

Comment ajouter un objet (tel qu'une chaîne ou un nombre) à un tableau en JavaScript? 

2895
interstar

Utilisez la fonction Push() pour ajouter un tableau:

// initialize array
var arr = [
    "Hi",
    "Hello",
    "Bonjour"
];

// append new value to the array
arr.Push("Hola");

console.log(arr);

Va imprimer

["Hi", "Hello", "Bonjour", "Hola"]

Vous pouvez utiliser la fonction Push() pour ajouter plusieurs valeurs à un tableau en un seul appel:

// initialize array
var arr = [ "Hi", "Hello", "Bonjour", "Hola" ];

// append multiple values to the array
arr.Push("Salut", "Hey");

// display all values
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

Va imprimer

Hi
Hello
Bonjour
Hola 
Salut
Hey

Mettre à jour

Si vous souhaitez ajouter les éléments d'un tableau à un autre, vous pouvez utiliser firstArray.concat(secondArray) :

var arr = [
    "Apple",
    "banana",
    "cherry"
];

arr = arr.concat([
    "dragonfruit",
    "elderberry",
    "fig"
]);

console.log(arr);

Va imprimer

["Apple", "banana", "cherry", "dragonfruit", "elderberry", "fig"]

Mettre à jour

Juste un ajout à cette réponse si vous voulez ajouter une valeur au début d’un tableau qui signifie au premier index, vous pouvez utiliser unshift () à cette fin.

var arr = [1, 2, 3]
arr.unshift(0)
console.log(arr)

Imprimera:

[0, 1, 2, 3]

Il prend également en charge plusieurs valeurs ajoutées, tout comme la méthode Push ().

3662
jdecuyper

Si vous n’ajoutez qu’une seule variable, alors Push() fonctionne parfaitement. Si vous devez ajouter un autre tableau, utilisez concat():

var ar1 = [1, 2, 3];
var ar2 = [4, 5, 6];

var ar3 = ar1.concat(ar2);

alert(ar1);
alert(ar2);
alert(ar3);

Va recracher:

"1,2,3"
"4,5,6"
"1,2,3,4,5,6"

Le concat ne concerne pas ar1 et ar2 sauf si réaffecté, par exemple:

ar1 = ar1.concat(ar2);
alert(ar1);

Affichera:

"1,2,3,4,5,6"

Beaucoup de bonnes infos ici

973
MK_Dev

Quelques analyses rapides (chaque test = 500 000 éléments ajoutés et les résultats sont des moyennes de plusieurs analyses) ont montré ce qui suit:

Firefox 3.6 (Mac):

  • Petits tableaux:arr[arr.length] = b est plus rapide (300 ms contre 800 ms)
  • Grands tableaux:arr.Push(b) est plus rapide (500 ms contre 900 ms)

Safari 5.0 (Mac):

  • Petits tableaux:arr[arr.length] = b est plus rapide (90 ms contre 115 ms)
  • Grands tableaux:arr[arr.length] = b est plus rapide (160 ms contre 185 ms)

Google Chrome 6.0 (Mac):

  • Petits tableaux: Aucune différence significative (et Chrome est rapide! Seulement ~ 38 ms !!)
  • Grands tableaux: Pas de différence significative (160ms)

J'aime mieux la syntaxe arr.Push(), mais je pense que je serais mieux avec la version arr[arr.length], du moins en vitesse brute. J'aimerais bien voir les résultats d'une IE.


Mes boucles de benchmarking:

function arrpush_small() {
    var arr1 = [];
    for (a = 0; a < 100; a++)
    {
        arr1 = [];
        for (i = 0; i < 5000; i++)
        {
            arr1.Push('elem' + i);
        }
    }
}

function arrlen_small() {
    var arr2 = [];
    for (b = 0; b < 100; b++)
    {
        arr2 = [];
        for (j = 0; j < 5000; j++)
        {
            arr2[arr2.length] = 'elem' + j;
        }
    }
}


function arrpush_large() {
    var arr1 = [];
    for (i = 0; i < 500000; i++)
    {
        arr1.Push('elem' + i);
    }
}

function arrlen_large() {
    var arr2 = [];
    for (j = 0; j < 500000; j++)
    {
        arr2[arr2.length] = 'elem' + j;
    }
}
385
Jens Roland

Je pense qu'il est utile de mentionner que Push peut être appelé avec plusieurs arguments, qui seront ajoutés au tableau dans l'ordre. Par exemple:

var arr = ['first'];
arr.Push('second', 'third');
console.log(arr); // ['first', 'second', 'third']

En conséquence, vous pouvez utiliser Push.apply pour ajouter un tableau à un autre tableau comme ceci:

arr.Push.apply(arr, ['forth', 'fifth']);
console.log(arr); // ['first', 'second', 'third', 'forth', 'fifth']

Annoté ES5 a plus d’informations sur ce que Push et s’applique do.

Mise à jour 2016: avec propagation , vous n'avez plus besoin de cette apply, comme:

arr.Push(...['fourth', 'fifth']);
console.log(arr) // ['first', 'second', 'third', 'fourth', 'fifth']
272
Omnimike

Vous pouvez utiliser les fonctions Push et apply pour ajouter deux tableaux.

var array1 = [11, 32, 75];
var array2 = [99, 67, 34];

Array.prototype.Push.apply(array1, array2);

Il va ajouter array2 à array1. Maintenant, array1 contient [11, 32, 75, 99, 67, 34]. Ce code est beaucoup plus simple que d'écrire des boucles for pour copier chaque élément du tableau.

70
Fizer Khan

Si arr est un tableau et val est la valeur que vous souhaitez ajouter, utilisez:

arr.Push(val);

Par exemple.

arr = ['a', 'b', 'c'];
arr.Push('d');
console.log(arr);

se connecter:

['a', 'b', 'c', 'd']
38
rjmunro

Avec le nouvel opérateur ES6 spread , il est encore plus facile de joindre deux baies à l'aide de Push

var arr = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8, 9, 10];
arr.Push(...arr2);
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Cela ajoute le contenu de arr2 à la fin de arr.

Babel REPL Exemple

37
CodingIntrigue

Utilisez concat:

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

a contient maintenant tous les éléments, [1, 2, 3, 3, 4, 5].

Référence: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/concat

37
Mαzen

Javascript avec ECMAScript 5 standard qui est supporté par la plupart des navigateurs, vous pouvez maintenant utiliser apply() pour ajouter array1 à array2.

var array1 = [3, 4, 5];
var array2 = [1, 2];

Array.prototype.Push.apply(array2, array1);

console.log(array2); // [1, 2, 3, 4, 5]

Javascript avec ECMAScript 6 standard pris en charge par Chrome, FF et IE Edge, vous pouvez utiliser l'opérateur spread:

"use strict";
let array1 = [3, 4, 5];
let array2 = [1, 2];

array2.Push(...array1);

console.log(array2); // [1, 2, 3, 4, 5]

L'opérateur spread remplacera array2.Push(...array1); par array2.Push(3, 4, 5); lorsque le navigateur réfléchira à la logique.

Point bonus

Si vous souhaitez créer une autre variable pour stocker tous les éléments des deux tableaux, procédez comme suit:

ES5 var combinedArray = array1.concat(array2);

ES6 const combinedArray = [...array1, ...array2]

L'opérateur de propagation (...) doit répartir tous les éléments d'une collection.

30
Zhenyang Hua

Si vous voulez ajouter deux tableaux -

var a = ['a', 'b'];
var b = ['c', 'd'];

alors vous pourriez utiliser:

var c = a.concat(b);

Et si vous voulez ajouter l'enregistrement g au tableau (var a=[]), vous pouvez utiliser:

a.Push('g');
29
Pawan Singh

Il y a plusieurs façons d'ajouter un tableau en JavaScript:

1) La méthode Push() ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur du tableau.

var a = [1, 2, 3];
a.Push(4, 5);
console.log(a);

Sortie:

[1, 2, 3, 4, 5]

2) La méthode unshift() ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau:

var a = [1, 2, 3];
a.unshift(4, 5);
console.log(a); 

Sortie:

[4, 5, 1, 2, 3]

3) La méthode concat() est utilisée pour fusionner deux ou plusieurs tableaux. Cette méthode ne modifie pas les tableaux existants, mais retourne un nouveau tableau.

var arr1 = ["a", "b", "c"];
var arr2 = ["d", "e", "f"];
var arr3 = arr1.concat(arr2);
console.log(arr3);

Sortie:

[ "a", "b", "c", "d", "e", "f" ]

4) Vous pouvez utiliser la propriété .length du tableau pour ajouter un élément à la fin du tableau:

var ar = ['one', 'two', 'three'];
ar[ar.length] = 'four';
console.log( ar ); 

Sortie:

 ["one", "two", "three", "four"]

5) La méthode splice() modifie le contenu d'un tableau en supprimant des éléments existants et/ou en ajoutant de nouveaux éléments:

var myFish = ["angel", "clown", "mandarin", "surgeon"];
myFish.splice(4, 0, "nemo");
//array.splice(start, deleteCount, item1, item2, ...)
console.log(myFish);

Sortie:

["angel", "clown", "mandarin", "surgeon","nemo"]

6) Vous pouvez également ajouter un nouvel élément à un tableau en spécifiant simplement un nouvel index et en assignant une valeur:

var ar = ['one', 'two', 'three'];
ar[3] = 'four'; // add new element to ar
console.log(ar);

Sortie:

["one", "two","three","four"]
23
Inconnu

La méthode Push() ajoute de nouveaux éléments à la fin d'un tableau et renvoie la nouvelle longueur. Exemple:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.Push("Kiwi");

// The result of fruits will be:
Banana, Orange, Apple, Mango, Kiwi

La réponse exacte à votre question a déjà été donnée, mais examinons d'autres moyens d'ajouter des éléments à un tableau.

La méthode unshift() ajoute de nouveaux éléments au début d'un tableau et renvoie la nouvelle longueur. Exemple:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon", "Pineapple");

// The result of fruits will be:
Lemon, Pineapple, Banana, Orange, Apple, Mango

Enfin, la méthode concat() est utilisée pour joindre deux ou plusieurs tableaux. Exemple:

var fruits = ["Banana", "Orange"];
var moreFruits = ["Apple", "Mango", "Lemon"];
var allFruits = fruits.concat(moreFruits);

// The values of the children array will be:
Banana, Orange, Apple, Mango, Lemon
23
Maarten Peels

Si vous connaissez l'indice le plus élevé (tel que stocké dans une variable "i"), alors vous pouvez le faire

myArray[i + 1] = someValue;

Cependant, si vous ne savez pas, vous pouvez soit utiliser 

myArray.Push(someValue);

comme d'autres réponses suggérées, ou vous pouvez utiliser

myArray[myArray.length] = someValue; 

Notez que le tableau est basé sur zéro afin que .length renvoie l'index le plus élevé plus un.

Notez également que vous n’avez pas besoin d’ajouter dans l’ordre et que vous pouvez réellement ignorer des valeurs, comme dans

myArray[myArray.length + 1000] = someValue;

Dans ce cas, les valeurs intermédiaires auront une valeur indéfinie.

Il est donc recommandé, lors de la lecture en boucle d'un code JavaScript, de vérifier qu'une valeur existe réellement à ce stade.

Cela peut être fait par quelque chose comme ce qui suit:

if(myArray[i] === "undefined"){ continue; }

si vous êtes certain de ne pas avoir de zéros dans le tableau, vous pouvez simplement faire:

if(!myArray[i]){ continue; }

Bien sûr, dans ce cas, assurez-vous de ne pas utiliser la condition myArray [i] (comme le suggèrent certaines personnes sur Internet, à la fin, dès que i est supérieur au index le plus élevé, il retourne indéfini, ce qui donne faux)

16
yoel halb

Maintenant, vous pouvez tirer parti de la syntaxe ES6 et faire simplement:

let array = [1, 2];
console.log([...array, 3]);

garder le tableau d'origine immuable.

15
José Antonio Postigo

Laissez la propriété de longueur de tableau faire le travail:

myarray[myarray.length] = 'new element value added to the end of the array';

myarray.length renvoie le nombre de chaînes dans le tableau . JS est basé sur zéro donc le prochain élément clé du tableau sera la longueur actuelle du tableau . EX:

var myarray = [0, 1, 2, 3],
    myarrayLength = myarray.length; //myarrayLength is set to 4
10
hawkeye126

concat(), bien sûr, peut également être utilisé avec des tableaux à 2 dimensions. Aucun bouclage requis.

var a = [ [1, 2], [3, 4]];

var b = [ ["un B"], ["c", "d"]];

b = b.concat (a); 

alerte (b [2] [1]); // résultat 2

9
Karl

Je veux juste ajouter un extrait pour l'ajout non destructif d'un élément.

var newArr = oldArr.concat([newEl]);
9
Danil Gaponov

vous pouvez le faire en utilisant la nouvelle fonctionnalité javascript Es 6:

// initialize array

var arr = [
    "Hi",
    "Hello",
    "Bangladesh"
];

// append new value to the array

arr= [...arr , "Feni"];

// or you can put a variable value

var testValue = "Cool";

arr = [...arr , testValue ];

console.log(arr); 

// final output  [ 'Hi', 'Hello', 'Bangladesh', 'Feni', 'Cool' ]
6
Hoque MD Zahidul

Ajouter une valeur à un tableau

Étant donné que Array.prototype.Push ajoute un ou plusieurs éléments à la fin d’un tableau et que renvoie la nouvelle longueur du tableau, nous souhaitons parfois obtenir le nouveau tableau à jour afin de peut faire quelque chose comme ça:

const arr = [1, 2, 3];
const val = 4;

arr.concat([val]); // [1, 2, 3, 4]

Ou juste:

[...arr, val] // [1, 2, 3, 4]
6
Lior Elrom

Si vous utilisez l'ES6, vous pouvez utiliser spread operator pour le faire.

var arr = [
    "Apple",
    "banana",
    "cherry"
];

var arr2 = [
    "dragonfruit",
    "elderberry",
    "fig"
];

arr.Push(...arr2);
6
JmLavoier

si vous voulez combiner 2 tableaux sans le dupliquer, essayez le code ci-dessous

array_merge = function (arr1, arr2) {
  return arr1.concat(arr2.filter(function(item){
    return arr1.indexOf(item) < 0;
  }))
}

utilisation:

array1 = ['1', '2', '3']
array2 = ['2', '3', '4', '5']
combined_array = array_merge(array1, array2)

Sortie: [1,2,3,4,5] 

5

Append Single Element

//Append to the end
arrName.Push('newName1');

//Prepend to the start
arrName.unshift('newName1');

//Insert at index 1
arrName.splice(1, 0,'newName1');
//1: index number, 0: number of element to remove, newName1: new element


// Replace index 3 (of exists), add new element otherwise.
arrName[3] = 'newName1';

Ajouter plusieurs éléments

//Insert from index number 1
arrName.splice(1, 0,'newElemenet1', 'newElemenet2', 'newElemenet3');
//1: index number from where insert starts, 
//0: number of element to remove, 
//newElemenet1,2,3: new elements

Ajouter un tableau

//join two or more arrays
arrName.concat(newAry1, newAry2);
//newAry1,newAry2: Two different arrays which are to be combined (concatenated) to an existing array
4
Srikrushna Pal

Vous .Push () cette valeur dans. Exemple: array.Push (valeur);

4
Jack

Si vous souhaitez ajouter une valeur unique à un tableau, utilisez simplement la méthode Push. Cela ajoutera un nouvel élément à la fin du tableau.

Mais si vous avez l'intention d'ajouter plusieurs éléments, stockez-les dans un nouveau tableau et concattez le deuxième tableau avec le premier tableau ... dans tous les cas.

arr=['a','b','c'];
arr.Push('d');
//now print the array in console.log and it will contain 'a','b','c','d' as elements.
console.log(array);
4
Satyapriya Mishra

Nous n'avons pas de fonction append pour Array en javascript, mais nous avons Push et unshift , imaginons que vous ayez le tableau ci-dessous:

var arr = [1, 2, 3, 4, 5];

et nous aimons ajouter une valeur à ce tableau, nous pouvons le faire, arr.Push (6) et il ajoutera 6 à la fin du tableau:

arr.Push(6); // return [1, 2, 3, 4, 5, 6];

nous pouvons aussi utiliser unshift, regardez comment nous pouvons appliquer ceci:

arr.unshift(0); //return [0, 1, 2, 3, 4, 5];

Ce sont des fonctions principales pour ajouter ou ajouter de nouvelles valeurs aux tableaux.

2
Alireza

Vous pouvez utiliser la méthode Push.

Array.prototype.append = function(destArray){
     destArray = destArray || [];
     this.Push.call(this,...destArray);
     return this;
}
var arr = [1,2,5,67];
var arr1 = [7,4,7,8];
console.log(arr.append(arr1));// [7, 4, 7, 8, 1, 4, 5, 67, 7]
console.log(arr.append("Hola"))//[1, 2, 5, 67, 7, 4, 7, 8, "H", "o", "l", "a"]
1

Ajouter un seul élément

Pour ajouter un seul élément à un tableau, utilisez la méthode Push() fournie par l'objet Array:

const fruits = ['banana', 'pear', 'Apple']
fruits.Push('mango')
console.log(fruits)

Push() mute le tableau d'origine.

Pour créer un nouveau tableau à la place, utilisez la méthode concat() Array:

const fruits = ['banana', 'pear', 'Apple']
const allfruits = fruits.concat('mango')
console.log(allfruits)

Notez que concat() n’ajoute pas réellement d’élément au tableau, mais crée un nouveau tableau que vous pouvez affecter à une autre variable ou réaffecter au tableau d’origine (en le déclarant comme étant let car vous ne pouvez pas réaffecter un const)

const fruits = ['banana', 'pear', 'Apple']
const allfruits = fruits.concat('mango')
console.log(allfruits)
let fruits = ['banana', 'pear', 'Apple']
fruits = fruits.concat('mango')

Ajouter plusieurs éléments

Pour ajouter un élément multiple à un tableau, vous pouvez utiliser Push() en l'appelant avec plusieurs arguments:

const fruits = ['banana', 'pear', 'Apple']
fruits.Push('mango', 'melon', 'avocado')
console.log(fruits)

Vous pouvez également utiliser la méthode concat() que vous avez vue auparavant, en passant une liste d'éléments séparés par une virgule:

const fruits = ['banana', 'pear', 'Apple']
const allfruits = fruits.concat('mango', 'melon', 'avocado')
console.log(allfruits)

ou un tableau:

const fruits = ['banana', 'pear', 'Apple']
const allfruits = fruits.concat(['mango', 'melon', 'avocado'])
console.log(allfruits)

N'oubliez pas que, comme décrit précédemment, cette méthode ne modifie pas le tableau d'origine, mais renvoie un nouveau tableau.

Initialement posté à

1
Flavio Copes

Ajout d'éléments sur un tableau

let fruits =["orange","banana","Apple","lemon"]; /*array declaration*/

fruits.Push("avacado"); /* Adding an element to the array*/

/*displaying elements of the array*/

for(var i=0; i < fruits.length; i++){
  console.log(fruits[i]);
}
0
Ir Calif