Вступление

Массив - это линейная структура данных и, возможно, одна из самых популярных структур данных, используемых в компьютерных науках. Изменение массива - часто встречающаяся операция. Здесь мы обсудим, как добавить элемент в любую позицию массива в JavaScript .

Элемент можно добавить в массив в трех местах:

• Старт / Первый элемент
• Конец / Последний элемент
• Где-нибудь еще

Начнем с добавления элементов в начало массива!

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

Метод unshift() в объектах массива добавляет один или несколько элементов в начало массива. При выполнении он также возвращает новую длину массива:

 const startArray = [3, 4, 5]; 
 const newLength = startArray.unshift(2); 
 console.log(newLength); 
 console.log(startArray); 
 
 startArray.unshift(-1, 0, 2); 
 console.log(startArray); 

Это дает нам ожидаемый результат:

 4 
 [ 2, 3, 4, 5 ] 
 [ -1, 0, 2, 2, 3, 4, 5 ] 

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

Использование последнего индекса массива

Чтобы добавить элемент в конец массива, мы можем использовать тот факт, что длина массива всегда на единицу меньше индекса.

Скажем, длина массива равна 5, а затем последний индекс, в котором значение будет 4. Итак, мы можем напрямую добавить элемент по last+1 индексу. Давайте посмотрим:

 const indexArray = [1, 2, 3]; 
 console.log(indexArray.length); 
 console.log(indexArray[2]); 
 console.log(indexArray[3]); 
 
 indexArray[indexArray.length] = 4 
 console.log(indexArray); 

Запуск этого в консоли JS отображает:

 3 
 3 
 undefined 
 [ 1, 2, 3, 4 ] 

Массив имеет 3 , а второй элемент - 3 . Третьего элемента нет, поэтому нас встречает undefined . Наконец, в эту позицию мы вставляем значение 4 .

Метод push ()

Метод push() массива добавляет один или несколько элементов в его конец. Как и unshift() , он также возвращает новую длину массива:

 const pushArray = [1, 2, 3] 
 const newLength = pushArray.push(4, 5, 6, 7); 
 console.log(newLength); 
 console.log(pushArray); 

Запуск приведенного выше кода отобразит это:

 7 
 [ 1, 2, 3, 4, 5, 6, 7 ] 

Метод concat ()

Слияние или объединение двух или более массивов достигается методом массива concat() . Он создает новую копию вывода и не влияет на исходные массивы . В отличие от предыдущих методов, он возвращает новый массив. Объединяемые значения всегда прибывают в конец массива с помощью метода.

Мы можем объединить массив с другим массивом:

 const example1Array1 = [1, 2, 3]; 
 const valuesToAdd = [4, 5, 6]; 
 const example1NewArray = example1Array1.concat(valuesToAdd); 
 
 console.log(example1NewArray); 
 console.log(example1Array1); 

Что печатает этот вывод:

 [ 1, 2, 3, 4, 5, 6 ] 
 [ 1, 2, 3 ] 

Мы можем объединить массив с последовательностью значений:

 const array = [1,2,3]; 
 const newArray = array.concat('12', true, null, 4,5,6,'hello'); 
 console.log(array); 
 console.log(newArray); 

Выполнение приведенного выше кода сохранит это на наших консолях:

 [ 1, 2, 3 ] 
 [ 1, 2, 3, '12', true, null, 4, 5, 6, 'hello' ] 

Мы можем объединить массив с несколькими массивами:

 const array1 = [1, 2, 3]; 
 const array2 = [4, 5, 6]; 
 const array3 = [7, 8, 9]; 
 const oneToNine = array1.concat(array2, array3); 
 
 console.log(oneToNine); 

При выполнении приведенный выше код печатает список чисел от 1 до 9:

 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] 

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

Теперь мы обсудим метод masterstroke, который можно использовать для добавления элемента в любом месте массива - в начале, в конце, в середине и в любом другом месте между ними.

Метод splice() добавляет, удаляет и заменяет элементы в массиве. Обычно он используется для управления массивами. Этот метод не создает новый массив, а обновляет тот, который его вызвал.

Давайте посмотрим на splice() в действии. Мы собираемся взять массив дней недели и добавить элемент «среда» между «вторник» и «четверг»:

 const weekdays = ['monday', 'tuesday', 'thursday', 'friday'] 
 const deletedArray = weekdays.splice(2, 0, 'wednesday'); 
 
 console.log(weekdays); 
 console.log(deletedArray); 

Приведенный выше код записывает это в консоль:

 [ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ] 
 [] 

Давайте разберем приведенный выше код. Мы хотели добавить «среду» в массив weekdays на 2-й позиции. Здесь нет необходимости удалять элементы. Код weekdays.splice(2, 0, 'wednesday') читается как вторая позиция, не удаляйте никаких элементов и добавляйте wednesday .

Вот общий синтаксис использования splice() :

 let removedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 

Где:

• start - индекс, с которого следует начать изменение массива.
• deleteCount - необязательное количество элементов в массиве, которые нужно удалить с start . Если не указано, то все элементы после start будут удалены.
• item1, item2, ... - необязательные элементы, добавляемые в массив с самого start . Если он не указан, он удалит только элементы из массива.

Давайте посмотрим на другой пример slice() где мы одновременно добавляем и удаляем массив. Мы добавим «среда» во вторую позицию, однако мы также удалим там ошибочные значения выходных:

 const weekdays = ['monday', 'tuesday', 'saturday', 'sunday', 'thursday', 'friday'] 
 const deletedArray = array.splice(2, 2, 'wednesday'); 
 
 console.log(weekdays); 
 console.log(deletedArray); 

Приведенный выше код напечатает:

 [ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ] 
 [ 'saturday', 'sunday' ] 

В приведенном выше примере array.splice(2, 2, 'wednesday') удаляет два элемента из второй позиции (начала) и добавляет туда 'wednesday'. В этом и заключается сила slice() !

Заключение

В этой статье мы рассмотрели множество способов добавления элементов в массив в JavaScript. Мы можем добавить их в начало с помощью unshift() . Мы можем добавить их в конец, используя их индекс, метод pop() метод concat() . Мы получаем еще больший контроль над их размещением с помощью метода splice()