„JavaScript“ masyvo intarpas - kaip pridėti prie masyvo naudojant „Push“, „Shift“ ir „Concat“ funkcijas

„JavaScript“ masyvai yra lengvai vienas iš mano mėgstamiausių duomenų tipų. Jie yra dinamiški, lengvai naudojami ir siūlo daugybę integruotų metodų, kuriais galime pasinaudoti.

Tačiau kuo daugiau galimybių turite, tuo painiau gali būti sprendimas, kurį turėtumėte naudoti.

Šiame straipsnyje norėčiau aptarti kelis įprastus elemento pridėjimo prie „JavaScript“ masyvo būdus.

„Push“ metodas

Pirmasis ir turbūt dažniausiai pasitaikantis „JavaScript“ masyvo metodas yra „ push“) . Stūmimo () metodas naudojamas elementui pridėti prie masyvo pabaigos.

Tarkime, kad turite elementų masyvą, kiekvienas elementas yra eilutė, nurodanti užduotį, kurią turite atlikti. Būtų prasminga masyvo pabaigoje pridėti naujesnius elementus, kad galėtume pirmiausia atlikti ankstesnes užduotis.

Pažvelkime į pavyzdį kodo forma:

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

Gerai, todėl „push“ mums suteikė gražią ir paprastą sintaksę, kaip pridėti elementą į masyvo pabaigą.

Tarkime, kad norėjome į savo sąrašą įtraukti du ar tris elementus vienu metu, ką tada darytume? Kaip paaiškėja, „ push“ () gali priimti kelis elementus, kurie bus pridėti vienu metu.

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

Dabar, kai pridėjome dar keletą užduočių prie savo masyvo, galbūt norėsime sužinoti, kiek elementų šiuo metu yra mūsų masyve, kad nustatytume, ar mūsų lėkštėje yra per daug.

Laimei, pridedant mūsų elementą (-us) , push () turi grįžtamąją vertę su masyvo ilgiu.

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

Perkėlimo metodas

Ne visos užduotys sukurtos vienodai. Galite susidurti su scenarijumi, kai pridedate užduotis prie savo masyvo ir staiga susiduriate su skubesniu nei kiti.

Atėjo laikas pristatyti mūsų draugą „ Shift“ (), kuris leidžia mums pridėti elementų prie mūsų masyvo pradžios.

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

Aukščiau pateiktame pavyzdyje galite pastebėti, kad, kaip ir „ push“) metodas, „ Shift“ () grąžina naują masyvo ilgį, kurį galime naudoti. Tai taip pat suteikia mums galimybę pridėti daugiau nei vieną elementą vienu metu.

Concat metodas

Trumpai tariant susieti (susieti), concat () metodas naudojamas sujungti du (ar daugiau) masyvus.

Jei atsimenate iš viršaus, „ unshift“ () ir „ push“ () metodai pateikia naujo masyvo ilgį. concat () , kita vertus,grąžins visiškai naują masyvą.

Tai labai svarbus skirtumas ir „ concat“ () yra labai naudingas, kai dirbate su masyvais, kurių nenorite mutuoti (pvz., Masyvai, saugomi „React“ būsenoje).

Štai kaip gali atrodyti gana paprastas ir nesudėtingas atvejis:

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

Tarkime, kad turite kelis masyvus, kuriuos norėtumėte sujungti. Nesijaudinkite, concat () yra tam, kad išsaugotumėte dieną!

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

Klonavimas su Concat

Pamenate, kaip sakiau, kad „ concat“ () gali būti naudinga, kai nenorite mutuoti savo esamo masyvo? Pažvelkime, kaip galime panaudoti šią koncepciją, kad vieno masyvo turinį nukopijuotume į naują masyvą.

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

Nuostabu! Iš esmės galime masyvą „klonuoti“ naudodami „ concat“ () .

Tačiau šiame klonavimo procese yra maža „gotcha“. Naujas masyvas yra nukopijuoto masyvo „negili kopija“. Tai reiškia, kad bet kuris objektas nukopijuojamas pagal nuorodą, o ne faktinis objektas.

Pažvelkime į pavyzdį, kad aiškiau paaiškintume šią idėją.

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

Nors mes tiesiogiai nekeitėme jokio pradinio masyvo, masyvą galiausiai paveikė mūsų klonuoto masyvo pakeitimai!

Yra keli skirtingi būdai, kaip tinkamai atlikti masyvo „gilųjį kloną“, bet aš tai paliksiu jums kaip namų darbą.

TL; DR

Jei norite pridėti elementą prie masyvo pabaigos, naudokite „ push“ (). Jei jums reikia pridėti elementą prie masyvo pradžios, pabandykite atšaukti (). Ir tu galipridėkite masyvus kartu naudodami concat ().

Be abejo, yra daugybė kitų elementų pridėjimo prie masyvo variantų, ir aš kviečiu jus išeiti ir rasti dar keletą puikių masyvo metodų!

Nedvejodami kreipkitės į mane „Twitter“ ir praneškite man savo mėgstamą masyvo metodą, kaip pridėti elementų prie masyvo.