JavaScripti massiivi lisamine - kuidas massiivi lisada funktsioonide Push, Unshift ja Concat abil

JavaScripti massiivid on hõlpsasti üks minu lemmikandmetüüpe. Need on dünaamilised, hõlpsasti kasutatavad ja pakuvad tervet hulka sisseehitatud meetodeid, mida saame ära kasutada.

Kuid mida rohkem võimalusi teil on, seda segasemaks võib osutuda see, millist valikut peaksite kasutama.

Selles artiklis tahaksin arutada mõningaid levinumaid viise elemendi lisamiseks JavaScripti massiivi.

Push meetod

Esimene ja tõenäoliselt kõige tavalisem JavaScripti massiivi meetod on push () . Push () meetodit kasutatakse elemendi lisamiseks massiivi lõppu.

Oletame, et teil on hulgaliselt elemente, millest igaüks on string, mis tähistab ülesannet, mille peate täitma. Mõistlik oleks massiivi lõppu lisada uuemad üksused, et saaksime oma varasemad ülesanded kõigepealt lõpule viia.

Vaatame näidet koodivormis:

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

Olgu, nii et push on andnud meile kena ja lihtsa süntaksi üksuse lisamiseks massiivi lõppu.

Oletame, et tahtsime oma loendisse lisada kaks või kolm üksust korraga, mida me siis teeksime? Nagu selgub, võib push () aktsepteerida mitme elemendi lisamist korraga.

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

Nüüd, kui oleme lisanud oma massiivi veel mõned ülesanded, võiksime teada, kui palju üksusi on praegu meie massiivil, et teha kindlaks, kas meil on liiga palju plaati.

Õnneks on push () tagastusväärtus massiivi pikkusega pärast seda, kui meie element (id) on lisatud.

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

Nihutamismeetod

Kõiki ülesandeid pole loodud võrdselt. Võite sattuda stsenaariumi, kus lisate massiivi ülesandeid ja äkki satute teist, mis on kiirem kui teised.

On aeg tutvustada meie sõpra unshift (), mis võimaldab meil lisada massiivi algusesse üksusi.

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

Ülalolevas näites võite märgata, et nii nagu meetod push () , tagastab unshift () meile uue massiivi pikkuse. See annab meile ka võimaluse lisada rohkem kui üks element korraga.

Concati meetod

Lühendina konkatenaadiks (omavahel ühendamiseks) kasutatakse meetodit concat () kahe (või enama) massiivi ühendamiseks.

Kui mäletate ülalt, tagastavad meetodid unshift () ja push () uue massiivi pikkuse. concat () seevastutagastab täiesti uue massiivi.

See on väga oluline erinevus ja muudab concat () ülimalt kasulikuks, kui tegelete massiividega, mida te ei soovi muteerida (näiteks massiivid, mis on salvestatud olekusse React).

Nii võib välja näha üsna lihtne ja arusaadav juhtum:

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

Oletame, et teil on mitu massiivi, millega soovite koos liituda. Pole muret, concat () on päeva päästmiseks olemas!

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

Kloonimine Concatiga

Mäletate, kuidas ma ütlesin, et concat () võib olla kasulik, kui te ei soovi oma olemasolevat massiivi muteerida? Vaatame, kuidas saaksime selle kontseptsiooni abil ühe massiivi sisu uude massiivi kopeerida.

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

Vinge! Sisuliselt saame massiivi "kloonida" concat () abil .

Kuid selles kloonimisprotsessis on väike "gotcha". Uus massiiv on kopeeritud massiivi "madal koopia". See tähendab, et mis tahes objekt kopeeritakse viitena, mitte tegelik objekt.

Vaatame selle idee selgemaks selgitamiseks näite.

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

Kuigi me ei teinud otseselt oma algsesse massiivi muudatusi, mõjutasid massiivi lõpuks kloonitud massiivi muudatused!

Massiivi "sügava klooni" korralikuks tegemiseks on mitu erinevat viisi, kuid jätan selle teile kodutööks.

TL; DR

Kui soovite lisada massiivi lõppu elemendi, kasutage push (). Kui peate massiivi algusse lisama elemendi, proovige unshift (). Ja saatelisage massiivid koos concat () abil.

Massiivi elementide lisamiseks on kindlasti palju muid võimalusi ja ma kutsun teid üles minema ja leidma veel mõned suurepärased massiivi meetodid!

Pöörduge julgelt Twitteri poole ja andke mulle teada oma lemmikmassiivi meetodist massiivi elementide lisamiseks.