Вставка масиву 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 () повертає нову довжину масиву для використання. Це також дає нам можливість одночасно додавати більше одного елемента.

Метод Конката

Скорочене слово 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 () може бути корисним, коли ви не хочете мутувати існуючий масив? Давайте подивимося, як ми можемо використати цю концепцію для копіювання вмісту одного масиву в новий масив.

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 ().

Безумовно, існує безліч інших варіантів додавання елементів до масиву, і я запрошую вас вийти і знайти ще кілька чудових методів масиву!

Не соромтеся звертатися до мене в Twitter і повідомляти ваш улюблений метод масиву для додавання елементів до масиву.