Array.prototype.push()

Метод push() (запхати) примірників Array додає задані елементи в кінець масиву та повертає нову довжину масиву.

Спробуйте його в дії

Синтаксис

push()
push(element1)
push(element1, element2)
push(element1, element2, /* …, */ elementN)

Параметри

element1, …, elementN

Елемент (або елементи), що потрібно додати у кінець масиву.

Повернене значення

Нова властивість length об'єкта, на якому був викликаний метод.

Опис

Метод push() додає значення в кінець масиву.

Array.prototype.unshift() має подібну до push() логіку, але додає значення в початок масиву.

Метод push() – це змінювальний метод. Він змінює довжину і зміст this. Якщо необхідно, аби значення this було тим самим, але був повернений новий масив з елементами, доданими в його кінець, можна натомість використати arr.concat([element0, element1, /* ... ,*/ elementN]). Зверніть увагу, що елементи загорнуті в додатковий масив: інакше, якщо елемент сам є масивом, він буде розгорнутий, а не доданий як один елемент, у зв'язку з логікою concat().

Метод push() є узагальненим. Він лишень очікує, що значення this матиме властивість length, а також властивості з цілочисловими ключами. Попри те, що рядки також є масивоподібними, цей метод не підходить для застосування до них, адже рядки є незмінними значеннями.

Приклади

Додавання елементів до масиву

Наступний код створює масив sports, що містить два елементи, потім додає до нього ще два елементи. Змінна total містить нову довжину масиву.

const sports = ["футбол", "бокс"];
const total = sports.push("теніс", "баскетбол");

console.log(sports); // ['футбол', 'бокс', 'теніс', 'баскетбол']
console.log(total); // 4

Об'єднання двох масивів

У цьому прикладі для переміщення всіх елементів з другого масиву в перший використовується синтаксис розгортання

const vegetables = ["пастернак", "картопля"];
const moreVegs = ["селера", "буряк"];

// Об'єднання другого масиву в перший
vegetables.push(...moreVegs);

console.log(vegetables); // ['пастернак', 'картопля', 'селера', 'буряк']

Об'єднання двох масивів також можна зробити за допомогою методу concat().

Виклик push() на об'єктах-немасивах

Метод push() зчитує з this властивість length. Потім – задає кожний індекс this, починаючи від length, аргументами, переданими в push(). Врешті-решт, присвоює length значення старої довжини плюс кількість запханих елементів.

const arrayLike = {
  length: 3,
  unrelated: "foo",
  2: 4,
};
Array.prototype.push.call(arrayLike, 1, 2);
console.log(arrayLike);
// { '2': 4, '3': 1, '4': 2, length: 5, unrelated: 'foo' }
const plainObj = {};
// Тут немає властивості `length`, тому значення довжини вважається за 0
Array.prototype.push.call(plainObj, 1, 2);
console.log(plainObj);
// { '0': 1, '1': 2, length: 2 }

Використання об'єкта у подібний до масиву спосіб

Як згадувалося вище, push є навмисно узагальненим, і це можна використати на власну користь. Array.prototype.push може добре працювати з об'єктом, як показує цей приклад.

Зверніть увагу, масив не створюється для зберігання колекції об'єктів. Натомість колекція зберігається на самому об'єкті, й використовується call на Array.prototype.push, щоб змусити метод подумати, що ми маємо справу з масивом, і це просто працює, завдяки тому, що JavaScript дозволяє встановлювати контекст виконання будь-яким способом.

const obj = {
  length: 0,

  addElem(elem) {
    // obj.length автоматично збільшується
    // кожного разу, коли додається елемент.
    [].push.call(this, elem);
  },
};

// Додавання декількох порожніх об'єктів просто для ілюстрації.
obj.addElem({});
obj.addElem({});
console.log(obj.length); // 2

Зверніть увагу, що хоча obj не є масивом, метод push успішно збільшив властивість length у obj, так само як якщо це був би реальний масив.

Специфікації

Сумісність із браузерами

desktop mobile server
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet Deno Node.js
push
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 5.5
Opera Full support 4
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Deno Full support 1.0
Node.js Full support 0.10.0

Дивіться також