Как добавить что-то в массив?


2893

Как добавить объект (например, строку или число) в массив в JavaScript?

Ответы:


4394

Используйте Array.prototype.pushметод для добавления значений в массив:

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

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

console.log(arr);


Вы можете использовать push()функцию для добавления более одного значения в массив за один вызов:

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


Обновить

Если вы хотите добавить элементы одного массива в другой, вы можете использовать firstArray.concat(secondArray):

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

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

console.log(arr);

Обновить

Просто дополнение к этому ответу, если вы хотите добавить любое значение в начало массива, что означает первый индекс, то вы можете использовать Array.prototype.unshiftдля этой цели.

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

Он также поддерживает добавление нескольких значений одновременно, как push.


131
Обратите внимание, что возвращаемое значение .push - это не массив (или новый, например .concat), а целое число, представляющее новую длину массива.
Джей

8
@RST: не использовать forвообще (использовать .forEach).
Роберт Симер

34
Я бы сказал, что оригинальный код просто отлично. Нет необходимости оптимизировать доступ к lengthсобственности. Переводчик сам делает потрясающую работу, и в Реальном Мире не будет никакого значения, оптимизируете ли вы его или нет. Если ваш массив становится настолько большим, что оптимизация .lengthдействительно может помочь, скорее всего, массив больше не является правильной структурой данных. Использование forEachимеет свои преимущества, но весьма сомнительно, что одним из них будет увеличение производительности, поскольку вызов функции для каждой итерации требует затрат и ничего не экономит.
Стейн де Витт

29
@RobertSiemer lengthСвойство массива не вычисляется каждый раз, когда вы вызываете его, это переменная, хранящаяся в arrayобъекте, которая обновляется только при изменении массива. Так что на самом деле нет затрат на производительность, в том числе arr.lengthв forсостоянии.
mikeyq6

7
@Mojimi Как новичок, игнорируйте любые советы, касающиеся вопросов производительности в таких крайних случаях, как этот. Используйте более выразительный синтаксис. Со временем среды исполнения Javascript добавляют все больше и больше оптимизаций - они будут встроены в forEachфункции обратного вызова (некоторые из них, вероятно, уже это делают), и не будет никакой разницы в сгенерированном машинном коде, если функция вызывается достаточно часто, чтобы ее компилировали, а не интерпретировали с помощью время выполнения. Тот же совет, что и для любого языка, который не является ассемблером, на самом деле.
Мёрре

1041

Если вы добавляете только одну переменную, то push()работает просто отлично. Если вам нужно добавить другой массив, используйте concat():

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

var ar3 = ar1.concat(ar2);

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

Concat не влияет ar1и, ar2если не переназначен, например:

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

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

Много большой информации здесь .


163
Просто убедитесь, что люди ловят var ar3 = ar1.concat (ar2); часть. ar1.concat (ar2) не сохраняет значения в ar1. Вы должны поймать его, назначив его ar3 или обратно ar1, например: ar1 = ar1.concat (ar2);
vbullinger

31
Я бы сказал, что это неправильный ответ на самом деле. Вопрос был How do I append to an array in JavaScript?, но на concatсамом деле создает в новый массив. Это важное отличие! Вместо этого я бы сказал, что ответ Omnimike, представленный ниже, на самом деле лучший: используйте Push.apply, чтобы поместить весь массив в существующий массив без создания нового.
Стейн де Витт

@StijndeWitt, вы все равно можете добавить, не создавая новый массив, как указано в предыдущем комментарии ar1 = ar1.concat(ar2);, к ar1
которому добавится

2
@cameronjonesweb На самом деле, он создает новый массив с тем же содержимым, что ar1и добавление, ar2а затем возвращает новый массив. Просто не указывайте часть присваивания ( ar1 = ...) из этой строки кода, и вы увидите, что оригинал ar1 фактически не изменился. Если вы хотите избежать копирования, вам понадобится push. Не верьте мне, верьте документам : «Метод concat () возвращает новый массив» Первое предложение в документах для concat.
Стейн де Витт

@StijndeWitt Ты прав. Но, если взглянуть на это по-другому, то .push хорошо работает только при добавлении отдельных переменных / объектов, но, тем не менее, будет плохо работать с добавлением массивов, что ar2в любом случае выше. Результат по .pushсценарию будет = [ar1, [ar2]]. .concat решает эту проблему, но жертвуя скоростью и создавая новый массив. Для .pushправильного использования при добавлении в массив сначала зациклите содержащийся элемент и нажмите каждый. ar2.forEach(each => { ar1.push(each); });
Ade

408

Некоторые быстрые сравнительные тесты (каждый тест = 500 тыс. Добавленных элементов и результаты представляют собой средние значения для нескольких прогонов) показали следующее:

Firefox 3.6 (Mac):

  • Маленькие массивы: arr[arr.length] = bбыстрее (300 мс против 800 мс)
  • Большие массивы: arr.push(b)быстрее (500 мс против 900 мс)

Safari 5.0 (Mac):

  • Маленькие массивы: arr[arr.length] = bбыстрее (90мс против 115мс)
  • Большие массивы: arr[arr.length] = bбыстрее (160мс против 185мс)

Google Chrome 6.0 (Mac):

  • Маленькие массивы: без существенной разницы (и Chrome БЫСТРО! Только ~ 38 мс !!)
  • Большие массивы: без существенной разницы (160 мс)

Мне нравится arr.push()синтаксис лучше, но я думаю, что с arr[arr.length]версией мне лучше , по крайней мере, в сырой скорости. Я хотел бы видеть результаты запуска IE, хотя.


Мои циклы бенчмаркинга:

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

9
Вопрос заключается в том, является ли .length сохраненным значением или вычисляется при обращении к нему, поскольку, если последнее является истинным, возможно, использование простой переменной (например, j) в качестве значения индекса может быть еще быстрее
yoel halb

4
Хотелось бы увидеть concat () в том же тесте!
Джастин

2
Интересно, насколько это изменилось за последние четыре года. (jsperf был бы полезен прямо сейчас.)
Пол Дрейпер

8
Этот тип бенчмаркинга интересен, но по иронии судьбы не очень помогает в ускорении приложений. Цикл рендеринга намного дороже в любом цикле. Кроме того, эти внутренние компоненты языка JS постоянно оптимизируются разработчиками браузеров. Вот причина моего отрицательного голоса, а не интересность этого ответа. Если вам нужны более быстрые приложения, сначала сравните результаты и посмотрите, что изменится - 99 из 100 раз это не будет проблемой, как показывает этот тест. Часто его плохой разработчик JS / CSS - не внутренности браузера, что делает его медленным.
LessQuesar

7
Я согласен с LessQuesar в том, чтобы придерживаться встроенных функций, когда это возможно. Не то чтобы микрооптимизация сама по себе вредна, но он прав, что браузеры постоянно улучшают скорость своего двигателя. Показательный пример: на момент написания статьи производительность для каждого браузера практически одинакова для всех методов, перечисленных выше. Значит, много суеты несколько лет назад для такого небольшого выигрыша, когда сейчас нет выигрыша.
Beejor

298

Я думаю, что стоит упомянуть, что push может вызываться с несколькими аргументами, которые будут добавляться в массив по порядку. Например:

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

В результате вы можете использовать push.apply для добавления массива в другой массив следующим образом:

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

Аннотированный ES5 имеет больше информации о том, что именно толчок и apply .

Обновление 2016 года: со спредом это вам больше не нужно apply, например:

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

arr.push(...['fourth', 'fifth']);
console.log(arr) ;


25
лучший ответ для добавления массива элементов без создания нового массива.
Габриэль Литман

1
@GabrielLittman Специально, потому что добавление в массив, IMHO, должно модифицировать массив, а не создавать новый.
Хуан Мендес,

3
Мне нравится версия push.apply, но я бы предпочел использовать Array.prototype.push.apply().
Майкл

1
Иногда важно сохранить ссылку на массив - например, в AngularJs, когда массив находится в области видимости на каком-либо контроллере, и некоторые службы должны обновить данные в массиве для отображения. Вот почему я голосую за это решение.
см. Острее

Этот ответ действительно должен быть выше.
Аномалия

80

Вы можете использовать pushи applyфункцию для добавления двух массивов.

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

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

Это добавится array2к array1. Сейчас array1содержит [11, 32, 75, 99, 67, 34]. Этот код намного проще, чем написание forциклов для копирования каждого элемента массива.


Это то, что мне нужно, сохранить исходную ссылку на массив
amit bakle

Если вы используете ES6 / 7, вы также можете использовать ...оператор вместо применения const a1 = [] const a2 = [5,6,7] const.push(...a2) редактирования: выделение синтаксиса
Mieszko

Я бы использовал array1.concat(array2)в этой ситуации. Призыв к pushкажется ненужным.
connectyourcharger

57

С новым оператором распространения ES6 объединение двух массивов pushстановится еще проще:

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

Это добавляет содержимое arr2в концеarr .

Пример Babel REPL


47

Если arrэто массив, и valзначение, которое вы хотите добавить, используйте:

arr.push(val);

Например

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



34

Javascript с ECMAScript 5 стандарта , который поддерживается большинством браузеров теперь вы можете использовать apply()для добавления 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 со стандартом ECMAScript 6, который поддерживается Chrome и FF и IE Edge, вы можете использовать spreadоператор:

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

array2.push(...array1);

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

spreadОператор заменит array2.push(...array1);сarray2.push(3, 4, 5); , когда браузер думает логику.

Бонусный балл

Если вы хотите создать другой переменную для хранения всех элементов из обоих массивов, вы можете сделать это:

ES5 var combinedArray = array1.concat(array2);

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

Оператор распространения ( ...) - разложить все элементы из коллекции.


30

Если вы хотите добавить два массива -

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

тогда вы можете использовать:

var c = a.concat(b);

И если вы хотите добавить запись gв array ( var a=[]), вы можете использовать:

a.push('g');

25

push()Метод добавляет новые элементы в конец массива и возвращает новую длину. Пример:

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

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

Точный ответ на ваш вопрос уже получен, но давайте рассмотрим некоторые другие способы добавления элементов в массив.

unshift()Метод добавляет новые элементы в начало массива и возвращает новую длину. Пример:

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

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

И, наконец, concat()метод используется для объединения двух или более массивов. Пример:

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

25

Есть несколько способов добавить массив в JavaScript:

1)push() метод добавляет один или несколько элементов в конец массива и возвращает новую длину массива.

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

Вывод:

[1, 2, 3, 4, 5]

2)unshift() метод добавляет один или несколько элементов в начало массива и возвращает новую длину массива:

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

Вывод:

[4, 5, 1, 2, 3]

3)concat() метод используется для объединения двух или более массивов. Этот метод не изменяет существующие массивы, но вместо этого возвращает новый массив.

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

Вывод:

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

4) Вы можете использовать .lengthсвойство массива, чтобы добавить элемент в конец массива:

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

Вывод:

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

5)splice() метод изменяет содержимое массива путем удаления существующих элементов и / или добавления новых элементов:

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

Вывод:

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

6) Вы также можете добавить новый элемент в массив, просто указав новый индекс и присвоив значение:

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

Вывод:

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

Для 1) это говорит "без изменения исходного массива". Но это буквально то, что pushделает: он изменяет исходный массив, помещая в него новые элементы. Я читаю это неправильно, или это должно быть отредактировано?
Фил Кэлвин

22

Теперь вы можете воспользоваться синтаксисом ES6 и просто сделать:

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

сохраняя исходный массив неизменным.


17

Если вы знаете самый высокий индекс (например, хранится в переменной «i»), то вы можете сделать

myArray[i + 1] = someValue;

Однако, если вы не знаете, то вы можете использовать

myArray.push(someValue);

как предложили другие ответы, или вы можете использовать

myArray[myArray.length] = someValue; 

Обратите внимание, что массив равен нулю, поэтому .length возвращает самый высокий индекс плюс один.

Также обратите внимание, что вам не нужно добавлять в порядке, и вы можете пропустить значения, как в

myArray[myArray.length + 1000] = someValue;

В этом случае значения между ними будут иметь значение undefined.

Поэтому при циклическом просмотре JavaScript рекомендуется проверять, существует ли значение в этой точке.

Это может быть сделано следующим образом:

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

если вы уверены, что у вас нет нулей в массиве, то вы можете просто сделать:

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

Конечно, в этом случае убедитесь, что вы не используете в качестве условия myArray [i] (как некоторые люди в Интернете предлагают исходя из конца, что, как только я превысит наивысший индекс, он вернет неопределенное значение, которое оценивается как ложный)


Вы на самом деле не имеете в виду "undefined". Это должно прочитать void 0! "undefined"является строкой и "undefined" !== void 0, следовательно, ваше значение if(myArray[i]false, если массив по индексу iне установлен на строку с содержимым, эквивалентным 'u'+'n'+'d'+'e'+'f'+'i'+'n'+'e'+'d'. Также обратите внимание, что вы не должны использовать undefinedвместо этого void 0. Поскольку void 0всегда является неопределенным значением, а undefinedможет быть определено с помощью чего-то подобного function x(undefined) { alert(undefined) } x("hello world"), поэтому вы не можете быть уверены, что кто-то случайно установил window["undefined"]=1или подобное.
Tino

14

Добавить единственный элемент

//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';

Добавить несколько элементов

//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

Добавить массив

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

1
Почему нет arrName.push('newElemenet1, newElemenet2, newElemenet3')?
Михаил Малостанидис

1
В push () он вставляет элемент последним, но в моем примере он вставляет элемент посередине, т.е. из индекса массива 1 (согласно примеру) @Mihail Malostanidis
Srikrushna

О, я думал, что предположение arrNameбыло длинным 1.
Михаил Малостанидис

11

concat()Конечно, можно использовать и с 2-х мерными массивами. Зацикливание не требуется.

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

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

b = b.concat (a);

оповещение (б [2] [1]); // результат 2


10

Пусть свойство длины массива выполнит работу:

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

myarray.length возвращает количество строк в массиве. JS основан на нуле, поэтому следующим ключом элемента массива будет текущая длина массива. EX:

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

9

Просто хочу добавить фрагмент для неразрушающего добавления элемента.

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

8

Добавить значение в массив

Поскольку Array.prototype.push добавляет один или несколько элементов в конец массива и возвращает новую длину массива , иногда нам просто нужно получить новый обновленный массив, чтобы мы могли сделать что-то вроде этого:

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

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

Или просто:

[...arr, val] // [1, 2, 3, 4]

2
Исправьте с ES6 для отдыха оператора.
monikapatelIT

7

Если вы используете ES6, вы можете использовать оператор спреда, чтобы сделать это.

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

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

arr.push(...arr2);

7

Вы можете сделать это с помощью новой функции 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' ]

1
Это не добавляет значение к массиву, что и было задано OP. Это создает новый массив с содержимым старого массива и новыми элементами. На самом деле это Array.concat.
Ричард Мэтисон

5

если вы хотите объединить 2 массива без дубликата, вы можете попробовать код ниже

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

Применение:

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

Выход: [1,2,3,4,5]


5

Добавить один элемент

Чтобы добавить отдельный элемент в массив, используйте push()метод, предоставленный объектом Array:

const fruits = ['banana', 'pear', 'apple']
fruits.push('mango')
console.log(fruits)

push() мутирует исходный массив.

Чтобы создать новый массив, используйте concat()метод Array:

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

Обратите внимание, что на concat()самом деле элемент не добавляется в массив, но создается новый массив, который вы можете назначить другой переменной или переназначить исходному массиву (объявив его как let, поскольку вы не можете переназначить a const):

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

Добавить несколько элементов

Чтобы добавить несколько элементов в массив, вы можете использовать push(), вызывая его с несколькими аргументами:

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

Вы также можете использовать concat()метод, который вы видели ранее, передавая список элементов, разделенных запятой:

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

или массив:

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

Помните, что, как описано ранее, этот метод не изменяет исходный массив, но возвращает новый массив.

Первоначально опубликовано на



4

Если вы хотите добавить одно значение в массив, просто используйте метод push. Это добавит новый элемент в конец массива.

Но если вы намереваетесь добавить несколько элементов, сохраните элементы в новом массиве и объедините второй массив с первым массивом ... в любом случае.

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

2

У нас нет функции добавления для Array в javascript, но у нас есть push и unshift , представьте, что у вас есть массив ниже:

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

и нам нравится добавлять значение в этот массив, мы можем сделать, arr.push (6), и это добавит 6 в конец массива:

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

также мы можем использовать unshift, посмотрим, как мы можем применить это:

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

Они являются основными функциями для добавления или добавления новых значений в массивы.


1

Вы можете использовать метод 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"]

0

push()добавляет новый элемент в конец массива.
pop()удаляет элемент из конца массива.

Чтобы добавить объект (например, строку или число) в массив, используйте -
array.push(toAppend);


0

Добавление элементов в массив

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

Вы можете использовать push (), если хотите добавить значения, например arr.push("Test1", "Test2");

Если у вас есть массив, вы можете использовать concat (), например Array1.concat(Array2)

Если у вас есть только один элемент, который вы можете добавить, вы также можете попробовать метод длины, например array[aray.length] = 'test';

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.