JavaScript метод push()

Определение и применение

JavaScript метод push() позволяет добавить один или более элементов в конец массива. После вызова (добавления элементов) возвращает значение, соответствующее длине массива. Работу метода показывает пример «Как добавить элемент в начало или конец массива».

Метод push() добавляет элементы начиная с текущей длины length. Он может работать с массивоподобным объектом, содержащим длину и индексированные свойства. Длина нормализуется к неотрицательному целому; значение NaN превращается в 0, а преобразование Symbol или BigInt вызывает TypeError.

Поддержка браузерами

Спецификация: ecma262

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьjavascript.builtins.Array.push

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
push	✓1	✓12	✓1	✓4	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓1	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

array.push();
array.push(element);
array.push(element1, element2);

Спецификация

ECMAScript: Array.prototype.push.

Значения параметров

Возвращаемое значение

Новая длина изменённого массива. Без аргументов возвращает текущую длину.

Особенности

Массив-аргумент добавляется как один элемент. Чтобы добавить его элементы по отдельности, используйте push(...items); для очень больших наборов учитывайте ограничение числа аргументов.

Проверьте это поведение в примере Как добавить массив целиком или отдельными элементами.

Примеры, попробуйте сами

Как добавить элемент в начало или конец массива

Нажмите ▶, введите название и нажмите кнопку добавления в начало или конец. Сравните порядок элементов и новую длину.

index.html

HTML

<label for="new-animal">Добавьте животное:</label>
<input id="new-animal" type="text" placeholder="Например, Lion" />
<button type="button" data-migration-click-0="">В начало очереди</button>
<button type="button" data-migration-click-1="">В конец очереди</button>
<p id="animals"></p>
<p id="return-value" aria-live="polite"></p>

main.js

JavaScript

var animals = ['Crocodile', 'Elephant', 'Tiger']
document.getElementById('animals').textContent = animals.join(', ')
function showLength(length) {
    document.getElementById('animals').textContent = animals.join(', ')
    document.getElementById('return-value').textContent = 'Новая длина: ' + length
}
function myFunc() {
    var newAnimal = document.getElementById('new-animal').value
    showLength(animals.unshift(newAnimal))
}
function myFunc2() {
    var newAnimal = document.getElementById('new-animal').value
    showLength(animals.push(newAnimal))
}
// Первый обработчик добавляет в начало, второй — в конец массива.
document.querySelector('[data-migration-click-0]').addEventListener('click', myFunc)
document.querySelector('[data-migration-click-1]').addEventListener('click', myFunc2)

В этом примере мы регистрируем обработчик события click, зарегистрированным через addEventListener() (вместо атрибута onclick) и при нажатии на первую кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода unshift() добавляет значение элемента <input> в начало массива, содержащего имена животных в виде строковых данных и добавляет новое содержимое этого массива в элемент <p> с глобальным атрибутом id animals.

При нажатии на вторую кнопку с обработчиком события click, зарегистрированным через addEventListener() (вместо атрибута onclick) вызываем функцию myFunc2(), которая с использованием JavaScript метода push() добавляет значение элемента <input> в конец массива, содержащего имена животных в виде строковых данных и добавляет новое содержимое этого массива в элемент <p> с глобальным атрибутом id animals.

Как добавить массив целиком или отдельными элементами

Измените items и сравните вложенный массив с отдельными элементами. Вызов без аргументов показывает текущую длину.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Как добавить массив целиком или отдельными элементами</title>
  </head>
  <body></body>
</html>

main.js

JavaScript

const items = [2, 3]
const nested = [1]
const separate = [1]
console.log('Новая длина:', nested.push(items), separate.push(...items))
console.log('Целый массив:', nested)
console.log('Отдельные элементы:', separate)
console.log('Без аргументов:', separate.push())