Вставка массива JavaScript - как добавить в массив с помощью функций Push, Unshift и Concat

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

Однако чем больше у вас вариантов, тем труднее решить, какой из них вам следует использовать.

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

Метод толчка

Первый и, вероятно, самый распространенный метод массива JavaScript, с которым вы столкнетесь, - это push () . Метод push () используется для добавления элемента в конец массива.

Предположим, у вас есть массив элементов, каждый из которых представляет собой строку, представляющую задачу, которую необходимо выполнить. Было бы разумно добавлять новые элементы в конец массива, чтобы мы могли сначала завершить наши предыдущие задачи.

Давайте посмотрим на пример в виде кода:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

Хорошо, push дал нам красивый и простой синтаксис для добавления элемента в конец нашего массива.

Допустим, мы хотим добавить в наш список два или три элемента за раз, что мы будем делать тогда? Как оказалось, push () может принимать сразу несколько элементов.

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

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

К счастью, push () имеет возвращаемое значение с длиной массива после добавления нашего элемента (ов).

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Метод без сдвига

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

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

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

В приведенном выше примере вы можете заметить, что, как и метод push () , unshift () возвращает новую длину массива, которую мы можем использовать. Это также дает нам возможность добавлять более одного элемента за раз.

Метод Concat

Сокращенно от concatenate (связывание вместе), метод concat () используется для объединения двух (или более) массивов.

Если вы помните, из вышесказанного, методы unshift () и push () возвращают длину нового массива. concat () , с другой стороны,вернет совершенно новый массив.

Это очень важное различие, которое делает concat () чрезвычайно полезным, когда вы имеете дело с массивами, которые не хотите изменять (например, с массивами, хранящимися в состоянии React).

Вот как может выглядеть довольно простой и понятный случай:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

Допустим, у вас есть несколько массивов, которые вы хотите объединить. Не беспокойтесь, concat () может спасти положение!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

Клонирование с помощью Concat

Помните, как я сказал, что concat () может быть полезен, когда вы не хотите изменять существующий массив? Давайте посмотрим, как мы можем использовать эту концепцию для копирования содержимого одного массива в новый массив.

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

Потрясающие! По сути, мы можем «клонировать» массив с помощью concat () .

Но в этом процессе клонирования есть небольшая проблема. Новый массив является «мелкой копией» скопированного массива. Это означает, что по ссылке копируется любой объект , а не сам объект.

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

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

Несмотря на то, что мы напрямую не вносили никаких изменений в наш исходный массив, на него в конечном итоге повлияли изменения, которые мы внесли в наш клонированный массив!

Есть несколько разных способов правильно сделать «глубокий клон» массива, но я оставлю это вам в качестве домашнего задания.

TL; DR

Если вы хотите добавить элемент в конец массива, используйте push (). Если вам нужно добавить элемент в начало вашего массива, попробуйте unshift (). И ты можешьскладывать массивы вместе с помощью concat ().

Конечно, есть много других вариантов добавления элементов в массив, и я приглашаю вас найти еще несколько отличных методов массива!

Не стесняйтесь обращаться ко мне в Твиттере и сообщать о своем любимом методе массива для добавления элементов в массив.