JavaScript Array Insert - Как да добавите към масив с функциите 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 ().

Със сигурност има много други опции за добавяне на елементи към масив и ви каня да излезете и да намерите още някои страхотни методи за масив!

Чувствайте се свободни да се свържете с мен в Twitter и да ме уведомите за вашия любим метод на масив за добавяне на елементи към масив.