JavaScript masīva ieliktnis - kā pievienot masīvam, izmantojot Push, Unshift un Concat funkcijas

JavaScript masīvi ir viegli viens no maniem iecienītākajiem datu veidiem. Tās ir dinamiskas, viegli lietojamas un piedāvā veselu virkni iebūvētu metožu, kuras mēs varam izmantot.

Tomēr, jo vairāk iespēju jums ir, jo mulsinošāk var būt izlemt, kuru no tām izmantot.

Šajā rakstā es vēlētos apspriest dažus izplatītākos elementu pievienošanas elementus JavaScript masīvam.

Push metode

Pirmā un, iespējams, visbiežāk sastopamā JavaScript masīva metode ir push () . Push () metodi izmanto elementa pievienošanai masīva galā.

Pieņemsim, ka jums ir elementu masīvs, katrs elements ir virkne, kas apzīmē uzdevumu, kas jums jāveic. Būtu lietderīgi masīva beigās pievienot jaunākus vienumus, lai mēs vispirms varētu pabeigt savus iepriekšējos uzdevumus.

Apskatīsim piemēru koda formā:

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

Labi, tāpēc push ir devis mums jauku un vienkāršu sintaksi, lai pievienotu vienumu mūsu masīva beigām.

Pieņemsim, ka mēs savam sarakstam gribējām pievienot divus vai trīs vienumus, ko mēs tad darītu? Kā izrādās, push () var pieņemt vairākus elementus, kas jāpievieno vienlaikus.

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

Tagad, kad esam pievienojuši vēl dažus uzdevumus savam masīvam, mēs varētu vēlēties uzzināt, cik daudz vienumu pašlaik ir mūsu masīvā, lai noteiktu, vai mūsu plāksnē ir pārāk daudz.

Par laimi, push () ir atgriešanās vērtība ar masīva garumu pēc mūsu elementa (-u) pievienošanas.

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

Pārslēgšanas metode

Ne visi uzdevumi ir izveidoti vienādi. Jums var rasties scenārijs, kurā jūs pievienojat uzdevumus savam masīvam, un pēkšņi jūs sastopaties ar vienu, kas ir steidzamāks nekā citi.

Ir pienācis laiks iepazīstināt mūsu draugu unshift (), kas ļauj mums pievienot vienumus mūsu masīva sākumam.

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

Iepriekš redzamajā piemērā varat pamanīt, ka tāpat kā metode push () , arī Shift () atgriež jauno masīva garumu, kuru mēs varam izmantot. Tas arī dod mums iespēju vienlaikus pievienot vairāk nekā vienu elementu.

Concat metode

Īsāk par konkatenātu (lai sasaistītu kopā), metodi concat () izmanto divu (vai vairāku) masīvu savienošanai.

Ja atceraties no augšas, metodes Shift () un push () atgriež jaunā masīva garumu. concat () , no otras puses,atgriezīs pilnīgi jaunu masīvu.

Šī ir ļoti svarīga atšķirība un padara concat () ārkārtīgi noderīgu, ja jums ir darījumi ar masīviem, kurus nevēlaties mutēt (piemēram, masīvi, kas tiek glabāti reaģēšanas stāvoklī).

Lūk, kā varētu izskatīties diezgan vienkāršs un vienkāršs gadījums:

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

Pieņemsim, ka jums ir vairāki masīvi, kurus vēlaties apvienot. Neuztraucieties, concat () ir paredzēts, lai glābtu dienu!

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

Klonēšana ar Concat

Atcerieties, kā es teicu, ka concat () var būt noderīgs, ja nevēlaties mutēt esošo masīvu? Apskatīsim, kā mēs varam izmantot šo koncepciju, lai viena masīva saturu pārkopētu jaunā masīvā.

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

Satriecošs! Būtībā mēs varam "klonēt" masīvu, izmantojot concat () .

Bet šajā klonēšanas procesā ir neliela "gotcha". Jaunais masīvs ir kopētās masīva "sekla kopija". Tas nozīmē, ka jebkurš objekts tiek kopēts ar atsauci, nevis faktiskais objekts.

Apskatīsim piemēru, lai skaidrāk izskaidrotu šo 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: '?' } ]

Pat ja mēs tieši neveicām izmaiņas sākotnējā masīvā, masīvu galu galā ietekmēja izmaiņas, ko veicām mūsu klonētajā masīvā!

Ir vairāki dažādi veidi, kā pareizi izpildīt masīva "dziļu klonu", taču es to atstāšu jums kā mājas darbu.

TL; DR

Ja vēlaties masīva beigās pievienot elementu, izmantojiet push (). Ja masīva sākumā jums jāpievieno elements, mēģiniet atcelt Shift (). Un jūs varatpievienojiet masīvus kopā, izmantojot concat ().

Elementu pievienošanai masīvam noteikti ir daudz citu iespēju, un es aicinu jūs iziet un atrast vēl dažas lieliskas masīva metodes!

Jūtieties brīvi sazināties ar mani Twitter un informējiet mani par savu iecienītāko masīva metodi elementu pievienošanai masīvam.