Array.push() в JavaScript — додати елемент у кінець масиву

Опис

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

Розглянемо приклад використання push():

let fruits = ["apple", "banana"];
fruits.push("mango");
console.log(fruits); // Output: ["apple", "banana", "mango"]

У цьому прикладі ми маємо масив fruits, який містить два елементи: apple і banana. За допомогою методу push() ми додаємо новий елемент mango в кінець масиву. Після цього, коли ми виводимо масив fruits в консоль, ми бачимо, що він тепер включає mango як третій елемент.

push() є мутуючим методом. Це означає, що він змінює як довжину, так і вміст поточного масиву. Якщо ж ви хочете залишити вихідний масив без змін і отримати новий масив з доданими елементами, вам варто користуватися arr.concat([елемент0, елемент1, елементN]). Зверніть увагу, що елементи потрібно обгортати у додатковий масив. Якщо ж елемент уже є масивом, він розбудеться на окремі частини замість додавання як єдина цілісна структура.

правити

Загальний опис

правити

Порада

Перед викликом методу push() переконайтеся, що ви викликаєте його на конкретному масиві, до якого хочете додати елементи. Наприклад, myArray.push('apple', 'banana'). Виклик цього методу без контексту або на об'єкті не відповідного типу може призвести до помилки.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

Також існує метод, який називається Array.prototype.unshift(). Цей метод виконує функцію аналогічну до push(), але замість того, щоб додавати елементи в кінець масиву, він розміщує їх на початок. Це може бути корисним в ряді ситуацій, залежно від ваших конкретних потреб.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

Незважаючи на те, що рядки зовні схожі на масиви, цей метод не підійде для роботи з ними, адже рядки є незмінними.

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Параметри

elementN

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	1	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const sports = ["футбол", "бейсбол"];
const total = sports.push("футбол", "плавання");

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

const vegetables = ["parsnip", "potato"];
const moreVegs = ["celery", "beetroot"];

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

console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']

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 }

<header>
  <h2 class="title">Додавання елементів до масиву тварин</h2>
  <p class="description">Цей приклад демонструє використання методу push() для додавання нових елементів до масиву.</p>
</header>
<main>
  <div id="output0"></div>
  <div id="output1"></div>
  <div id="output2"></div>
  <div id="output3"></div>
  <div id="output4"></div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

code {
  color: #ff0000;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

const animals = ['свині', 'кози', 'вівці'];

document.getElementById('output0').innerHTML = `Початковий масив: <code>${animals}</code>`;

const count = animals.push('корови');
document.getElementById('output1').innerHTML = `Кількість елементів: ${count}`;
document.getElementById('output2').innerHTML = `Масив після додавання: <code>${animals}</code>`;

animals.push('курки', 'коти', 'собаки');
document.getElementById('output3').innerHTML = `Масив після другого додавання: <code>${animals}</code>`;
document.getElementById('output4').innerHTML = `Кількість елементів: ${count}`;
//# sourceURL=pen.js

const list = ['a'];
console.log(list.push('b')); // 2 — НОВА ДОВЖИНА, а не масив
console.log(list);           // ["a","b"]

// додати всі елементи іншого масиву
const more = ['c', 'd'];
list.push(more);
console.log(list);           // ["a","b",["c","d"]] — не те, що хотіли
list.pop();
list.push(...more);
console.log(list);           // ["a","b","c","d"]

// const не заважає: він про змінну, а не про вміст масиву
const fixed = [];
fixed.push(1);
console.log(fixed);          // [1]

// потрібен новий масив замість мутації
const base = [1];
console.log(base.concat([2, 3]), base); // [1,2,3] і [1]