Добавление новых значений в массив JavaScript: push()

Быстрый ответ

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

let arr = ['a', 'b'];
arr.push('c'); // Теперь arr выглядит следующим образом: ['a', 'b', 'c']

Если вам требуется добавить элемент в начало массива, применяйте метод unshift():

arr.unshift('z'); // Наш массив теперь начинается так: ['z', 'a', 'b', 'c']

[AsideBanner]

Добавляем с аккуратностью

Для объявления массива лучше всего использовать литерал [], отказавшись от использования конструктора new Array():

let arr = []; // Кратко и ясно
arr.push('new value'); // И вот массив уже содержит: ['new value']

Как не попасть в ловушку с new Array()

Создавайте массивы через [], чтобы не столкнуться с неожиданными результатами:

let arr = [3]; // Ясно, что это массив с одним элементом – 3
let confusingArr = new Array(3); // Замышлялись ли вы над созданием массива с тремя пустыми ячейками? Скорее всего, нет

Объекты, ведущие себя как массивы? Нет проблем!

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

function addToObjectArray() {
  Array.prototype.push.call(arguments, 'new value');
  // Это ни в коей мере не шутка, 'new value' действительно добавлен в 'arguments'.
  return arguments;
}

Визуализация

Исходный массив: [🔲, 🔲, 🔲]

После добавления нового элемента:

array.push('🔳');

Массив преобразуется:

Обновлённый массив: [🔲, 🔲, 🔲, 🔳]

Таким образом новый элемент уютно вмещается в массив. 🚀

Добавление нескольких элементов сразу

Есть сразу несколько элементов для добавления? Метод push() с лёгкостью позволит добавить их все:

arr.push('d', 'e', 'f'); // Теперь arr выглядит так: ['z', 'a', 'b', 'c', 'd', 'e', 'f']

Вставка на определённое место по индексу

Для вставки элементов точно в нужное место массива применяйте метод Array.splice():

arr.splice(2, 0, 'x', 'y'); // Теперь arr стал таким: ['z', 'a', 'x', 'y', 'b', 'c', 'd', 'e', 'f']

Лучшие практики работы с массивами

Использование синтаксиса расширения

Синтаксис расширения (...) возвращает ваши операции над массивами более элегантными:

let newArr = ['g', ...arr, 'h']; // newArr гостеприимно принимает элементы из arr: ['g', 'z', 'a', 'x', 'y', 'b', 'c', 'd', 'e', 'f', 'h']

Фильтрация массива

Для исключения определённых значений применяйте Array.filter():

let filteredArr = arr.filter(item => item !== 'x'); // Мы отсеяли 'x', он не обиделся

Преобразование массива

Используйте Array.map(), чтобы изменить каждый элемент массива:

let squaredArr = [1, 2, 3].map(x => x * x); // Получим [1, 4, 9], математика к вашим услугам!

Практические рекомендации

• REST API ответы часто возвращают объекты, похожие на массивы. Прежде чем применять методы массивов к ним, преобразуйте такие объекты с помощью Array.from() или синтаксиса расширения.
• При работе с многомерными массивами активно используйте методы Array.flat() и Array.flatMap().
• При манипулировании большими массивами важно учитывать производительность. Для агрегирования данных выбирайте Array.reduce().
• В контексте реактивного программирования поддержка иммутабельности путём создания новых массивов вместо изменения существующих поможет контролировать побочные эффекты.

Полезные материалы

1. Array.prototype.push() – JavaScript | MDN — Официальная документация по методу push на MDN.
2. JavaScript Array push() Method — W3Schools рассказывает, как использовать Array.push().
3. Способы работы с массивами — Сайт JavaScript.info предлагает множество методов для массивов, включая splice.
4. ECMAScript® 2024 Language Specification — Актуальная спецификация языка ECMAScript для метода Array.prototype.flat.
5. JavaScript ES6— Синтаксис расширения (...) — Codeburst рассказывает о синтаксисе расширения.
6. Medium — Статья на Medium о фильтрации элементов массива.