JavaScript nizovi su lako jedna od mojih najdražih vrsta podataka. Dinamični su, jednostavni za upotrebu i nude čitav niz ugrađenih metoda koje možemo iskoristiti.
Međutim, što više opcija imate, to može biti zbunjujuće pri odluci koju biste trebali koristiti.
U ovom bih članku želio razgovarati o nekim uobičajenim načinima dodavanja elementa u JavaScript niz.
Push metoda
Prva i vjerojatno najčešća metoda JavaScript niza s kojom ćete se susresti je push () . Metoda push () koristi se za dodavanje elementa na kraj niza.
Recimo da imate niz elemenata, a svaki element je niz koji predstavlja zadatak koji trebate izvršiti. Bilo bi logično dodati novije stavke na kraj niza kako bismo prvo mogli završiti svoje ranije zadatke.
Pogledajmo primjer u obliku koda:
const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']U redu, tako da nam je push dao lijepu i jednostavnu sintaksu za dodavanje stavke na kraj našeg niza.
Recimo da smo željeli dodati dvije ili tri stavke odjednom na svoj popis, što bismo onda učinili? Ispostavilo se da push () može prihvatiti dodavanje više elemenata odjednom.
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']Sad kad smo našem nizu dodali još nekoliko zadataka, možda bismo željeli znati koliko se predmeta trenutno nalazi u našem nizu da bismo utvrdili imamo li previše na tanjuru.
Srećom, push () ima povratnu vrijednost s duljinom niza nakon dodavanja naših elemenata.
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']Metoda bez pomaka
Nisu svi zadaci jednaki. Mogli biste naletjeti na scenarij u kojem dodajete zadatke u svoj niz i odjednom naiđete na onaj koji je hitniji od ostalih.
Vrijeme je da predstavimo našeg prijatelja unshift () koji nam omogućuje dodavanje predmeta na početak našeg niza.
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']U gornjem primjeru možete primijetiti da, baš kao i metoda push () , unshift () vraća novu duljinu niza koju ćemo koristiti. Također nam daje mogućnost dodavanja više elemenata odjednom.
Concat metoda
Kratko za concatenate (za povezivanje), metoda concat () koristi se za spajanje dvaju (ili više) nizova.
Ako se sjećate odozgo, metode unshift () i push () vraćaju duljinu novog polja. concat () , s druge strane,vratit će potpuno novi niz.
Ovo je vrlo važna razlika i čini concat () izuzetno korisnim kada imate posla s nizovima koje ne želite mutirati (poput nizova pohranjenih u stanju React).
Evo kako bi mogao izgledati prilično osnovni i izravni slučaj:
const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] Recimo da imate više nizova koje biste željeli spojiti. Bez brige, concat () je tu da spasi dan!
const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] Kloniranje s Concatom
Sjećate se kako sam rekao da concat () može biti koristan kada ne želite mutirati svoj postojeći niz? Pogledajmo kako možemo iskoristiti ovaj koncept za kopiranje sadržaja jednog niza u novi niz.
const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]Super! U osnovi možemo "klonirati" niz pomoću concat () .
Ali u ovom procesu kloniranja postoji mali "problem". Novi niz je "plitka kopija" kopiranog niza. To znači da se bilo koji objekt kopira referencom, a ne stvarnim objektom.
Pogledajmo primjer kako bismo jasnije objasnili ovu ideju.
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: '?' } ]Iako nismo izravno unijeli nikakve promjene u naš izvorni niz, na kraj su u konačnici utjecale promjene koje smo napravili na našem kloniranom nizu!
Postoji više različitih načina kako pravilno napraviti "duboki klon" niza, ali to ću vam ostaviti kao domaću zadaću.
TL; DR
Kada želite dodati element na kraj niza, upotrijebite push (). Ako trebate dodati element na početak niza, pokušajte unshift (). A ti možešdodajte nizove zajedno pomoću concat ().
Svakako postoji mnogo drugih mogućnosti za dodavanje elemenata u niz, a ja vas pozivam da izađete i pronađete još neke izvrsne metode niza!
Slobodno me kontaktirajte na Twitteru i javite mi vašu omiljenu metodu za dodavanje elemenata u niz.