Добавление новых значений в массив 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()
. - В контексте реактивного программирования поддержка иммутабельности путём создания новых массивов вместо изменения существующих поможет контролировать побочные эффекты.
Полезные материалы
- Array.prototype.push() – JavaScript | MDN — Официальная документация по методу
push
на MDN. - JavaScript Array push() Method — W3Schools рассказывает, как использовать
Array.push()
. - Способы работы с массивами — Сайт JavaScript.info предлагает множество методов для массивов, включая
splice
. - ECMAScript® 2024 Language Specification — Актуальная спецификация языка ECMAScript для метода
Array.prototype.flat
. - JavaScript ES6— Синтаксис расширения (...) — Codeburst рассказывает о синтаксисе расширения.
- Medium — Статья на Medium о фильтрации элементов массива.