Love Frontend
Сообщество
фронтенд разработчиков
EN

Как в JavaScript добавить элемент в конец массива, в начало или в определённую позицию (индекс) массива?

Автор: KamilOcean
Дата публикации: 07.05.2020

8 самых важных приёмов работы с массивами в JavaScript

В статье рассматриваются способы в JavaScript добавить элемент в массив. Добавление в начало массива, добавление в произвольную позицию и добавление в конец массива, последним элементом.

1. Пустой массив JavaScript инициализируется одним из двух способов:

 arr = [] // внутри написать необходимые элементы массива
const arr2 = new Array(5) // 5 - Длина массива

2. Если вы создали пустой массив с помощью new Array() и вам нужно заполнить массив одинаковыми значениями, то можно использовать метод fill:

const arr = new Array(5)
arr.fill(1)
console.log(arr) // [1, 1, 1, 1, 1]

Если нужно динамически создать разные значения, то лучше воспользоваться методом Array.from().

3. Чтобы в js добавить элемент в конец массива нужно просто воспользоваться методом массива push(). Пример:

const arr = [2, 3, 4]
arr.push(7)
console.log(arr) // [2, 3, 4, 7]

Можно сделать тоже самое так: arr[arr.length] = 7 или arr.concat(7).
.push() - изменит массив на месте, .concat() вернёт копию массива не изменяя исходный массив

4. Узнать количество элементов в массиве js всегда можно просто выведя свойство массива length. Пример:

arr = [5, 6, 7]
arr.length // 3

5. Чтобы добавить элемент в начало массива в JavaScript используется метод unshift():

const arr = [1, 2, 3]
arr.unshift(5)
console.log(arr) // [5, 1, 2, 3]

Тут также unshift() - меняет сам массив, чтобы добавить в начало массива элемент и вернуть новый массив, можно воспользоваться методом concat() - [0].concat(arr)

Обратите внимание, методы unshift() (вставка в начало) и .push() (вставка элемента в конец массива) возвращают длину массива, а не сам массив. Также есть методы: .shift() и .pop(). .shift() - удаляет первый элемент из массива и возвращает его. .pop() - удаляет последний элемент и возвращает его

6. Чтобы добавить элемент в произвольное место массива, или по другому в массив по определенному индексу, например, в середину массива, можно воспользоваться комбинацией вызовов методов slice()concat().

const arr = [1, 2, 3, 4]
arrResult = arr.slice(0, 2).concat(0).concat(arr.slice(2))
console.log(arrResult) // [1, 2, 0, 3, 4]

Добавили в массив элемент 0 в середину данного массива. По сути мы просто в одной строке взяли первую половину массива, добавили (приконкатили) элемент - 0 и потом добавили оставшуюся часть массива.

Можно воспользоваться методом .splice(), но он изменит исходный массив

const arr = [1, 2, 3, 4]
arr.splice(2, 0, 6) // по индексу 2 удаляем 0 элемнтов
// и вставляем число 6. 3-й аргумент - элемент для вставки.
console.log(arr) // [1, 2, 6, 3, 4]

7. Чтобы очистить весь массив, можно просто указать длину = 0

arr.length = 0

8. Чтобы найти элемент в массиве, можно воспользоваться методом .find() arr.find(el => el === 2), вернёт нужный элемент. Или же arr.findIndex() - этот метод вернёт индекс (позицию) элемента в массиве и вы сможете взять элемент из массива по индексу.

Будьте с нами в социальных сетях. Наша группа в ВК, Канал в ТГ, Чат в ТГ

Оставьте свой e-mail чтобы получать уведомления о свежих статьях.