Как добавить несколько элементов в начало массива javascript
Перейти к содержимому

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

  • автор:

Метод unshift

Метод unshift добавляет неограниченное количество новых элементов в начало массива. При этом исходный массив изменяется, а результатом возвращается новая длина массива.

Синтаксис

массив.unshift(элемент, элемент, элемент. );

Пример

Давайте в начало массива добавим еще два новых элемента и выведем измененный массив:

let arr = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; arr.unshift(‘1’, ‘2’); console.log(arr);

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

[‘1’, ‘2’, ‘a’, ‘b’, ‘c’, ‘d’, ‘e’]

Пример

Давайте добавим два новых элемента и выведем новую длину массива:

let arr = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; let length = arr.unshift(‘1’, ‘2’); console.log(length);

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

Смотрите также

  • метод push ,
    который добавляет элементы в конец массива
  • методы shift и pop ,
    которые удаляют элементы из массива
  • метод fill ,
    который заполняет массив

Как добавить элемент в массив 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);

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

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

Подскажите как можно добавить новые элементы в начало обычного массива состоящего из рандомных цифр в Javascript?

  • Количеству голосов ▼
  • Дата создания

19 октября 2021

Для добавления новых элементов в массив можно воспользоваться, например, двумя способами. С помощью метода unshift(), который изменяет (мутирует) текущий массив. Также можно воспользоваться возможностями spread оператора и получить на выходе иммутабельное решение. Например так:

 [ 3, 4, 1, 2, 3 ] 

18 октября 2021

Если не ошибаюсь, то метод unshift() может добавить элемент в начало массива и возвращает новую длину массива. Можно добавлять один или несколько элементов.

arr.unshift(element1[, . [, elementN]]) 

Array.prototype.unshift()

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

Синтаксис

arr.unshift(element1[, . [, elementN]])

Параметры

Элементы, добавляемые в начало массива.

Возвращаемое значение

Новое свойство length объекта, над которым был вызван метод unshift .

Описание

Метод unshift вставляет переданные значения в начало массивоподобного объекта.

Метод unshift не является привязанным к типу; этот метод может быть вызван или применён к объектам, напоминающим массив. Объекты, не содержащие свойство length , отражающее последний элемент в серии последовательных числовых, начинающихся с нуля, свойств, могут повести себя неправильным образом.

Примеры

var arr = [1, 2]; arr.unshift(0); // результат вызова равен 3, новой длине массива // arr равен [0, 1, 2] arr.unshift(-2, -1); // = 5 // arr равен [-2, -1, 0, 1, 2] arr.unshift([-3]); // arr равен[[-3], -2, -1, 0, 1, 2] 

Спецификации

Specification
ECMAScript Language Specification
# sec-array.prototype.unshift

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Array.prototype.push()
  • Array.prototype.pop()
  • Array.prototype.shift()

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 20 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *