JavaScript Array Insert - Kako dodati matriko s funkcijami Push, Unshift in Concat

Polja JavaScript so eno izmed mojih najljubših vrst podatkov. So dinamični, enostavni za uporabo in ponujajo cel kup vgrajenih metod, ki jih lahko izkoristimo.

Vendar več možnosti imate, bolj zmedeno je pri odločitvi, katero naj uporabite.

V tem članku bi rad razpravljal o nekaterih pogostih načinih dodajanja elementa v polje JavaScript.

Potisna metoda

Prva in verjetno najpogostejša metoda matrike JavaScript, s katero se boste srečali, je push () . Metoda push () se uporablja za dodajanje elementa na konec polja.

Recimo, da imate vrsto elementov, pri čemer je vsak element niz, ki predstavlja nalogo, ki jo morate opraviti. Smiselno bi bilo, da na konec polja dodate novejše elemente, da lahko najprej dokončamo prejšnje naloge.

Poglejmo primer v obliki kode:

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

V redu, zato nam je push dal lepo in preprosto sintakso za dodajanje elementa na konec našega polja.

Recimo, da smo želeli na svoj seznam dodati dva ali tri elemente hkrati, kaj bi potem počeli? Izkazalo se je, da push () lahko sprejme več elementov, ki jih je treba dodati hkrati.

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

Zdaj, ko smo v našo matriko dodali še nekaj nalog, bomo morda želeli vedeti, koliko elementov je trenutno v naši matriki, da ugotovimo, ali imamo na krožniku preveč.

Na srečo ima push () vrnjeno vrednost z dolžino polja, potem ko so bili dodani naši elementi.

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 premika

Niso vsa opravila ustvarjena enako. Lahko naletite na scenarij, v katerem v svojo matriko dodajate naloge in nenadoma naletite na enega, ki je bolj nujen kot drugi.

Čas je, da predstavimo našega prijatelja unshift (), ki nam omogoča dodajanje elementov na začetek našega polja.

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

V zgornjem primeru lahko opazite, da tako kot metoda push () tudi unshift () vrne novo dolžino polja, ki jo lahko uporabimo. Omogoča nam tudi dodajanje več elementov hkrati.

Metoda Concat

Okrajšava za concatenate (za povezavo skupaj), metoda concat () se uporablja za združevanje dveh (ali več) nizov.

Če se spomnite od zgoraj, metodi unshift () in push () vrneta dolžino nove matrike. concat () , na drugi stranibo vrnil popolnoma novo matriko.

To je zelo pomembna razlika in omogoča, da je concat () izjemno uporaben, ko imate opravka z nizi, ki jih ne želite mutirati (kot so nizi, shranjeni v stanju React).

Evo, kako bi lahko izgledal dokaj osnovni in enostaven primer:

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

Recimo, da imate več nizov, ki bi jih radi združili. Brez skrbi, concat () je tu, da reši dan!

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

Kloniranje s Concatom

Se spomnite, kako sem rekel, da je concat () lahko koristen, če ne želite mutirati obstoječega polja? Oglejmo si, kako lahko uporabimo ta koncept za kopiranje vsebine enega polja v novo polje.

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

Super! V bistvu lahko "kloniramo" matriko z uporabo concat () .

Toda v tem postopku kloniranja obstaja majhna napaka. Novo polje je "plitva kopija" kopiranega polja. To pomeni, da se kateri koli predmet kopira s sklicem in ne dejanski objekt.

Oglejmo si primer, da bomo to idejo jasneje razložili.

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

Čeprav nismo neposredno spreminjati na naš prvotni matriki, je matrika s spremembami, ki smo iz našega kloniranega paleto koncu prizadeta!

Obstaja več različnih načinov, kako pravilno narediti "globok klon" polja, vendar vam bom to pustil kot domačo nalogo.

TL; DR

Ko želite dodati element na konec matrike, uporabite push (). Če morate element dodati na začetek polja, poskusite unshift (). In lahkododajte polja skupaj z uporabo concat ().

Vsekakor obstaja veliko drugih možnosti za dodajanje elementov v matriko in vabim vas, da poiščete še nekaj odličnih metod matrike!

Prosto me pokličite na Twitterju in mi sporočite svojo najljubšo metodo matrike za dodajanje elementov v matriko.