Vloženie poľa JavaScript - Ako pridať do poľa pomocou funkcií Push, Unshift a Concat

Polia JavaScript sú ľahko jedným z mojich obľúbených dátových typov. Sú dynamické, ľahko použiteľné a ponúkajú množstvo vstavaných metód, ktoré môžeme využiť.

Čím viac možností však máte, tým viac môže byť neprehľadné rozhodnúť sa, ktorú z nich by ste mali použiť.

V tomto článku by som rád prediskutoval niekoľko bežných spôsobov pridania prvku do poľa JavaScriptu.

Push metóda

Prvá a pravdepodobne najbežnejšia metóda poľa JavaScriptu, s ktorou sa stretnete, je push () . Na pridanie prvku na koniec poľa sa používa metóda push ().

Povedzme, že máte množstvo prvkov, pričom každý prvok je reťazec predstavujúci úlohu, ktorú musíte splniť. Malo by zmysel pridávať novšie položky na koniec poľa, aby sme mohli najskôr dokončiť naše staršie úlohy.

Pozrime sa na príklad vo forme kódu:

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

Dobre, takže funkcia push nám poskytla peknú a jednoduchú syntax pre pridanie položky na koniec nášho poľa.

Povedzme, že sme chceli pridať do nášho zoznamu naraz dve alebo tri položky, čo by sme potom robili? Ako sa ukázalo, funkcia push () môže prijať viac prvkov, ktoré sa majú pridať naraz.

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']

Teraz, keď sme do nášho poľa pridali ďalšie úlohy, možno budeme chcieť vedieť, koľko položiek je momentálne v našom poli, aby sme určili, či ich máme na tanieri príliš veľa.

Našťastie má push () návratovú hodnotu s dĺžkou poľa po pridaní našich prvkov.

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']

Metóda Unshift

Nie všetky úlohy sú vytvorené rovnako. Môžete naraziť na scenár, v ktorom pridávate úlohy do svojho poľa a narazíte na jeden, ktorý je urgentnejší ako ostatné.

Je čas predstaviť nášho priateľa unshift (), ktorý nám umožňuje pridávať položky na začiatok nášho poľa.

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']

Vo vyššie uvedenom príklade si môžete všimnúť, že rovnako ako metóda push () , unshift () vráti novú dĺžku poľa, ktorú môžeme použiť. Dáva nám tiež možnosť pridať viac ako jeden prvok súčasne.

Metóda Concat

Skrátka concatenate (na vzájomné prepojenie), metóda concat () sa používa na spojenie dvoch (alebo viacerých) polí.

Ak si spomeniete zhora, metódy unshift () a push () vrátia dĺžku nového poľa. concat () , na druhej strane,vráti úplne nové pole.

Toto je veľmi dôležitý rozdiel a robí concat () mimoriadne užitočným, keď pracujete s poľami, ktoré nechcete mutovať (ako polia uložené v stave React).

Takto by mohol vyzerať celkom jednoduchý a priamy prípad:

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

Povedzme, že máte viac polí, ktoré by ste sa chceli spojiť. Žiadne starosti, concat () je tu na to, aby vám zachránil deň!

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

Klonovanie pomocou Concat

Pamätáte si, ako som povedal, že concat () môže byť užitočný, keď nechcete mutovať svoje existujúce pole? Poďme sa pozrieť na to, ako môžeme tento koncept využiť na kopírovanie obsahu jedného poľa do nového poľa.

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

Úžasné! Pole môžeme v podstate „naklonovať“ pomocou funkcie concat () .

Ale v tomto procese klonovania je malé „gotcha“. Nové pole je „plytkou kópiou“ kopírovaného poľa. To znamená, že akýkoľvek objekt je kopírovaný odkazom, a nie skutočným objektom.

Pozrime sa na príklad, ktorý objasní túto myšlienku jasnejšie.

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: '?' } ]

Aj keď sme priamo neurobili žiadne zmeny v našom pôvodnom poli, pole bolo nakoniec ovplyvnené zmenami, ktoré sme vykonali v našom klonovanom poli!

Existuje niekoľko rôznych spôsobov, ako správne urobiť „hlboký klon“ poľa, ale to už nechám na vás ako domácu úlohu.

TL; DR

Ak chcete pridať prvok na koniec poľa, použite push (). Ak potrebujete pridať prvok na začiatok poľa, skúste unshift (). A môžetepridajte polia dohromady pomocou concat ().

Existuje určite veľa ďalších možností na pridanie prvkov do poľa a ja vás pozývam, aby ste vyšli von a našli ďalšie vynikajúce metódy poľa!

Neváhajte ma osloviť na Twitteri a dajte mi vedieť svoju obľúbenú metódu poľa na pridávanie prvkov do poľa.