LearnJS

Добавление элементов в массив в JavaScript

В массив можно добавлять новые элементы. Чаще всего это делают в конец массива, но иногда элемент нужно поставить в начало или в конкретное место.

let fruits = ['apple', 'orange'];

fruits.push('banana');

console.log(fruits); // ['apple', 'orange', 'banana']

Добавление в конец массива

Метод push() добавляет элемент в конец массива.

let users = ['Анна', 'Олег'];

users.push('Мария');

console.log(users); // ['Анна', 'Олег', 'Мария']

push() изменяет исходный массив. Он не создает новую копию.

Этот способ используют чаще всего: например, когда нужно добавить новый товар в корзину или новое сообщение в список.

Несколько элементов сразу

В push() можно передать сразу несколько элементов.

let numbers = [1, 2];

numbers.push(3, 4, 5);

console.log(numbers); // [1, 2, 3, 4, 5]

Элементы добавятся в том порядке, в котором они записаны в скобках.

Что возвращает push()

push() возвращает новую длину массива, а не сам массив.

let fruits = ['apple', 'orange'];

let result = fruits.push('banana');

console.log(result); // 3
console.log(fruits); // ['apple', 'orange', 'banana']

Если нужен обновленный массив, обращайтесь к самой переменной fruits.

Добавление в начало массива

Метод unshift() добавляет элемент в начало массива.

let fruits = ['orange', 'banana'];

fruits.unshift('apple');

console.log(fruits); // ['apple', 'orange', 'banana']

Как и push(), метод unshift() изменяет исходный массив и возвращает новую длину.

let fruits = ['orange', 'banana'];

let length = fruits.unshift('apple');

console.log(length); // 3

Добавление по индексу

Элемент можно добавить по индексу напрямую.

let fruits = ['apple', 'orange'];

fruits[2] = 'banana';

console.log(fruits); // ['apple', 'orange', 'banana']

Для добавления в конец можно использовать текущую длину массива.

let fruits = ['apple', 'orange'];

fruits[fruits.length] = 'banana';

console.log(fruits); // ['apple', 'orange', 'banana']

Но на практике для конца массива обычно выбирают push(): так короче и понятнее.

Если указать индекс намного больше текущей длины, в массиве появятся пустые места.

let fruits = ['apple', 'orange'];

fruits[5] = 'banana';

console.log(fruits.length); // 6
console.log(fruits[3]); // undefined

Такой массив становится разреженным. В обычном коде лучше не добавлять элементы с пропуском индексов.

Добавление в середину массива

Если элемент нужно вставить в середину массива, используют метод splice().

let fruits = ['apple', 'banana'];

fruits.splice(1, 0, 'orange');

console.log(fruits); // ['apple', 'orange', 'banana']

Первое число показывает индекс, куда вставить элемент. Второе число показывает, сколько элементов удалить. Если поставить 0, элементы не удаляются.

fruits.splice(1, 0, 'orange');

В этом примере orange добавляется на индекс 1, а старые элементы сдвигаются вправо.

Создание нового массива

Иногда исходный массив изменять не нужно. Например, в интерфейсах часто создают новый массив на основе старого.

Для этого удобно использовать spread-оператор ….

let fruits = ['apple', 'orange'];

let updatedFruits = [...fruits, 'banana'];

console.log(updatedFruits); // ['apple', 'orange', 'banana']
console.log(fruits); // ['apple', 'orange']

Так можно добавить элемент и в начало.

let fruits = ['orange', 'banana'];

let updatedFruits = ['apple', ...fruits];

console.log(updatedFruits); // ['apple', 'orange', 'banana']

Что выбрать

Если можно изменять исходный массив, для добавления в конец используйте push().

Если элемент нужен в начале массива, подойдет unshift().

Если нужно вставить элемент в середину, используйте splice().

Если исходный массив менять нельзя, создайте новый массив через spread-оператор.

Итого

Способ добавления зависит от того, куда нужно поставить новый элемент.

  • push() добавляет элементы в конец массива.
  • unshift() добавляет элементы в начало массива.
  • array[array.length] = value тоже добавляет элемент в конец, но push() читается проще.
  • splice() помогает вставить элемент в середину массива.
  • […array, value] создает новый массив с добавленным элементом.