Как добавить элемент в массив JS?

Для добавления нового элемента в массив JavaScript есть несколько доступных способов.

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

Для этого, мы можем воспользоваться стандартным методом массива push(). Это наиболее распространенный вариант:

const arr = ['Samsung', 'Apple', 'LG', 'Huawei'];

arr.push('Xiaomi');

console.log(arr); // ['Samsung', 'Apple', 'LG', 'Huawei', 'Xiaomi'];

Чтобы добавить несколько элементов одновременно, вы можете использовать этот же метод, только все элементы нужно будет перечислить через запятую:

const arr = ['Samsung', 'Apple', 'LG', 'Huawei'];

arr.push('Xiaomi', 'Sony', 'Oppo');

console.log(arr); // ['Samsung', 'Apple', 'LG', 'Huawei', 'Xiaomi', 'Sony', 'Oppo']

concat()

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

const arr = ['Samsung', 'Apple'];
const newArr = arr.concat('LG', 'Huawei');

console.log(newArr); // ['Samsung', 'Apple', 'LG', 'Huawei']
console.log(arr); // ['Samsung', 'Apple']

Еще одно отличие данного метода в том, что если вы передадите в качестве параметра массив значений, он разобьет его на отдельные элементы:

const arr = ['Samsung', 'Apple', 'LG', 'Huawei'];
const newArr = arr.concat('Xiaomi', ['Sony', 'Oppo']);

console.log(newArr); // ['Samsung', 'Apple', 'LG', 'Huawei', 'Xiaomi', 'Sony', 'Oppo']

В то время как push() просто вставит массив в массив:

const arr = ['Samsung', 'Apple', 'LG', 'Huawei'];

arr.push('Xiaomi', ['Sony', 'Oppo']);

console.log(arr); // ['Samsung', 'Apple', 'LG', 'Huawei', 'Xiaomi', ['Sony', 'Oppo']]

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

Есть также метод, с помощью которого вы можете добавить элемент в начало массива:

const arr = ['Samsung', 'Apple', 'LG', 'Huawei'];

arr.unshift('Xiaomi');

console.log(arr); // ['Xiaomi', 'Samsung', 'Apple', 'LG', 'Huawei'];

По аналогии с предыдущим методом, вы можете добавить несколько элементов в начало массива:

const arr = ['Samsung', 'Apple', 'LG', 'Huawei'];

arr.unshift('Xiaomi', 'Sony', 'Oppo');

console.log(arr); // ['Xiaomi', 'Sony', 'Oppo', 'Samsung', 'Apple', 'LG', 'Huawei']

Добавление элемента с определенным индексом

Если вам нужно добавить элемент с заранее известным индексом (при этом такого элемента не должно быть в массиве т.к. будет просто произведена замена элемента), вы можете указать его в квадратных скобках:

const arr = [];
arr[1] = 'Xiaomi';

console.log(arr); // [empty, 'Xiaomi']

const arr2 = ['Samsung', 'Apple'];
arr2[1] = 'Xiaomi';

console.log(arr2); // ['Samsung', 'Xiaomi']

Зная длину массива мы также можем добавить элемент в конец с помощью свойства length

const arr = ['Samsung', 'Apple', 'LG', 'Huawei'];

console.log(arr.length); // 4

arr[arr.length] = 'Xiaomi';

console.log(arr); // ['Samsung', 'Apple', 'LG', 'Huawei', 'Xiaomi']

Длинна массива — это количество элементов в нем. Но т.к. отсчет элементов начинается с 0, свойство .length можно использовать для добавления элемента с новым индексом. Вот так будет выглядеть обновленный массив:

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

По сути объект является обычным элементом и его добавление в массив ничем не отличается от вышеописанных действий:

const arr = [
  { name: 'user_2', age: 30 },
  { name: 'user_3', age: 31 },
  { name: 'user_4', age: 32 },
];

arr.unshift({ name: 'user_1', age: 29 });
arr.push({ name: 'user_5', age: 33 });

console.table(arr);

Результат выполнения данного кода вы можете увидеть ниже: