Pytanie Jak dołączyć coś do tablicy?


Jak dołączyć obiekt (taki jak ciąg lub numer) do tablicy w JavaScript?


2880


pochodzenie




Odpowiedzi:


Użyj push() funkcja do dołączenia do tablicy:

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

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

console.log(arr);

Zostanie wydrukowany

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

Możesz użyć push() funkcja dołączania więcej niż jednej wartości do tablicy w jednym wywołaniu:

// 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]);
}

Zostanie wydrukowany

Hi
Hello
Bonjour
Hola 
Salut
Hey

Aktualizacja

Jeśli chcesz dodać elementy z jednej tablicy do innej, możesz użyć firstArray.concat(secondArray):

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

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

console.log(arr);

Zostanie wydrukowany

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

3386



Zwróć uwagę, że zwracana wartość .push nie jest tablicą (lub nową, taką jak .concat), ale liczbą całkowitą reprezentującą nową długość tablicy. - Jay
@RST: nie używaj for w ogóle (użyj .forEach). - Robert Siemer
Powiedziałbym, że oryginalny kod jest w porządku. Nie ma żadnej potrzeby optymalizacji dostępu do length własność. Interpreter wykonuje w tym niesamowitą robotę i nie zmieni to rzeczywistości w The Real World, niezależnie od tego, czy ją zoptymalizujesz, czy nie. Jeśli twoja macierz staje się tak ogromna, że ​​optymalizuje .length rzeczywiście pomogłaby, najprawdopodobniej tablica nie jest już właściwą strukturą danych. Za pomocą forEach ma swoje zalety, ale jest wysoce wątpliwe, że zwiększona wydajność byłaby jednym z nich, ponieważ wywołanie funkcji dla każdej iteracji wiąże się z kosztami i nie oszczędza niczego. - Stijn de Witt
@RobertSiemer The length właściwość tablicy nie jest obliczana za każdym razem, gdy ją wywołujesz, jest to zmienna przechowywana w pliku array obiekt, który jest aktualizowany tylko po zmianie tablicy. Tak więc nie ma żadnych kosztów związanych z wydajnością arr.length w for stan. - mikeyq6
@Mojimi Jako początkujący zignoruj ​​wszelkie porady, które odnoszą się do pytań dotyczących wydajności w przypadkach skrajnych, takich jak ten. Użyj bardziej ekspresyjnej składni. Z biegiem czasu środowiska wykonawcze Javascript dodają coraz więcej optymalizacji - będą inline forEach funkcje wywołania zwrotnego (niektóre z nich prawdopodobnie już to robią) i nie będzie różnicy w wygenerowanym kodzie maszynowym, jeśli funkcja zostanie wywołana wystarczająco często, aby zostać skompilowaną zamiast interpretowaną przez środowisko wykonawcze. Ta sama rada dotyczy każdego języka, który nie jest asembler. - Mörre


Jeśli dodajesz tylko jedną zmienną, to push() działa dobrze. Jeśli chcesz dołączyć inną tablicę, użyj concat():

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

var ar3 = ar1.concat(ar2);

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

Wypluje:

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

Konkret nie wpływa ar1 i ar2 chyba że przydzielono ponownie, na przykład:

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

Wyświetli się:

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

Mnóstwo świetnych informacji tutaj


954



Po prostu upewnij się, że ludzie złapią var ar3 = ar1.concat (ar2); część. ar1.concat (ar2) nie zapisuje wartości w ar1. Musisz go przechwycić, przypisując go do ar3 lub z powrotem do ar1, na przykład: ar1 = ar1.concat (ar2); - vbullinger
Powiedziałbym, że to właściwie błędna odpowiedź. Pytanie było How do I append to an array in JavaScript?, ale concat tak właściwie tworzy za Nowy szyk. To ważna różnica! Zamiast tego powiedziałbym, że poniższa odpowiedź Omnimike jest w rzeczywistości najlepsza: Użyj Push.apply aby przesunąć całą tablicę do istniejącej macierzy bez tworzenia nowej. - Stijn de Witt
@StijndeWitt można nadal dołączać bez tworzenia nowej tablicy, jak podano w poprzednim komentarzu ar1 = ar1.concat(ar2);doda do ar1 - cameronjonesweb
@cameronjonesweb Właściwie to, co robi, tworzy nową tablicę z taką samą zawartością, jak ar1, dołącz ar2 a następnie zwróć nową tablicę. Po prostu pomiń część zadania (ar1 = ...) z tego wiersza kodu, a zobaczysz, że oryginalny  ar1 w rzeczywistości się nie zmieniło. Jeśli chcesz uniknąć kopiowania, będziesz potrzebować push. Nie wierz mi, uwierz doktorzy: "Metoda concat () zwraca nową tablicę" Pierwsze zdanie w dokumentach dla concat. - Stijn de Witt
@StijndeWitt Masz rację. Ale, inaczej jest na to patrzeć, .push działa tylko w dodawaniu pojedynczych zmiennych / obiektów, ale zepsuje się, jeśli chodzi o dołączanie tablic, które ar2 powyżej jest i tak. Wynik .push w scenariuszu będzie = [ar1, [ar2]]. .concat rozwiązuje ten problem, ale z poświęceniem szybkości i tworzeniem nowej tablicy. Używać .push poprawnie w dołączeniu do tablicy, najpierw zapętlaj zawarty element i wciskaj każdy. ar2.forEach(each => { ar1.push(each); }); - Ade


Niektóre szybkie testy porównawcze (każdy test = 500k dołączonych elementów, a wyniki są średnimi z wielu przebiegów) pokazały, co następuje:

Firefox 3.6 (Mac):

  • Małe tablice: arr[arr.length] = b jest szybszy (300ms vs. 800ms)
  • Duże tablice: arr.push(b) jest szybszy (500 ms vs. 900 ms)

Safari 5.0 (Mac):

  • Małe tablice: arr[arr.length] = b jest szybszy (90ms vs. 115ms)
  • Duże tablice: arr[arr.length] = b jest szybszy (160ms vs. 185ms)

Google Chrome 6.0 (Mac):

  • Małe tablice: Bez znaczącej różnicy (i Chrome jest SZYBKI! Tylko ~ 38ms !!)
  • Duże tablice: Bez znaczącej różnicy (160 ms)

Lubię arr.push() Składnia jest lepsza, ale myślę, że lepiej byłoby z tym arr[arr.length] Wersja, przynajmniej w pierwotnej prędkości. Chciałbym zobaczyć wyniki uruchomienia IE.


Moje pętle testowania wydajności:

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;
    }
}

370



Pytanie brzmi: jeśli .length jest wartością zapisaną lub jest obliczana podczas uzyskiwania dostępu, ponieważ jeśli ta ostatnia jest prawdziwa, to może być tak, że przy użyciu prostej zmiennej (takiej jak j) jako wartości indeksu może być jeszcze szybciej - yoel halb
+1 dla statyki, w jaki sposób robisz te testy porównawcze? - mko
@yozloy: jsperf.com jest twoim przyjacielem :) - Jens Roland
Ten rodzaj testu porównawczego jest interesujący, ale z ironią nie jest zbyt pomocny w szybszym tworzeniu aplikacji. Pętla renderowania jest o wiele droższa w każdym cyklu. Ponadto te elementy wewnętrzne języka JS są stale optymalizowane przez twórców przeglądarek. To jest powód mojego upadku, a nie ciekawość tej odpowiedzi. Jeśli chcesz mieć szybsze aplikacje, najpierw przetestuj i zobacz, co chcesz zmienić - 99 na 100 razy to nie będzie taki problem, jak ten test. Często jest to kiepski programista JS / CSS - a nie wewnętrzne przeglądarki, które spowalniają. - LessQuesar
Zgadzam się z LessQuesar w trzymaniu się wbudowanych, gdy tylko jest to możliwe. Nie, że mikro-optymalizacja jest sama w sobie zła, ale ma rację, że przeglądarki zawsze poprawiają prędkość swojego silnika. Przykład: od tego momentu wydajność poszczególnych przeglądarek jest niemal identyczna dla wszystkich technik wymienionych powyżej. Znaczące zamieszanie sprzed kilku lat z tak niewielkim zyskiem, kiedy teraz nie ma zysku. - Beejor


Myślę, że warto wspomnieć, że polecenie push można wywołać z wieloma argumentami, które zostaną dołączone do tablicy w kolejności. Na przykład:

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

W wyniku tego możesz użyć push.apply do dołączenia tablicy do innej tablicy, jak na przykład:

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

Adnotacja ES5 ma więcej informacji o tym, co dokładnie Pchać i zastosować zrobić.

Aktualizacja 2016: z rozpiętość, nie potrzebujesz tego apply już, jak:

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

260



najlepsza odpowiedź na dołączenie tablicy elementów bez tworzenia nowej tablicy. - Gabriel Littman
@GabrielLittman Specjalnie dlatego, że dodanie do tablicy, IMHO, powinno zmodyfikować tablicę, a nie utworzyć nową. - Juan Mendes
Podoba mi się wersja push.apply, wolałbym raczej użyć Array.prototype.push.apply() chociaż. - Michael
Czasami ważne jest zachowanie odniesienia do tablicy - na przykład w AngularJs, gdy tablica znajduje się w zasięgu jakiegoś kontrolera, a niektóre usługi wymagają aktualizacji danych w tablicy do wyświetlenia. Właśnie dlatego używam tego rozwiązania. - see sharper


Możesz użyć push i apply funkcja dołączania dwóch tablic.

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

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

To się dopisze array2 do array1. Teraz array1 zawiera [11, 32, 75, 99, 67, 34]. Ten kod jest znacznie prostszy niż pisanie for pętle do kopiowania każdego elementu w tablicy.


64



To jest to, czego potrzebowałem, zachowam oryginalne odwołanie do tablicy - amit bakle


Posługiwać się concat:

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

a zawiera teraz wszystkie elementy, [1, 2, 3, 3, 4, 5].

Odniesienie: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/concat


35





Gdyby arr jest tablicą, i val to wartość, którą chcesz dodać:

arr.push(val);

Na przykład.

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

zaloguje się:

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

34





Z nowym ES6 operator rozprzestrzeniania, łącząc dwie tablice za pomocą push staje się jeszcze łatwiejsze:

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];

To dodaje zawartość arr2 na koniec arr.

Babel REPL Przykład


33





Jeśli chcesz dołączyć dwie tablice -

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

wtedy możesz użyć:

var c = a.concat(b);

A jeśli chcesz dodać rekord g do tablicy (var a=[]) wtedy możesz użyć:

a.push('g');

27





JavaScript z ECMAScript 5 standard, który jest obecnie obsługiwany przez większość przeglądarek, możesz użyć apply() dołączyć array1 do 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 z ECMAScript 6 standard obsługiwany przez Chrome i FF oraz IE Edge, możesz użyć spreadoperator:

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

array2.push(...array1);

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

The spread operator zastąpi array2.push(...array1); z array2.push(3, 4, 5); kiedy przeglądarka myśli logikę.

Punkt bonusowy

Jeśli chcesz utworzyć inne Zmienna przechowująca wszystkie elementy z obu tablic, możesz to zrobić:

ES5  var combinedArray = array1.concat(array2);

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

Operator rozpowszechniania (...) to rozłożenie wszystkich przedmiotów z kolekcji.


24





The push() metoda dodaje nowe elementy na końcu tablicy i zwraca nową długość. Przykład:

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

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

Dokładna odpowiedź na twoje pytanie już została udzielona, ​​ale spójrzmy na kilka innych sposobów dodawania elementów do tablicy.

The unshift() metoda dodaje nowe elementy na początku tablicy i zwraca nową długość. Przykład:

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

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

I wreszcie, concat() Metoda służy do łączenia dwóch lub więcej tablic. Przykład:

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

21