15 Mga Paraan ng Array ng JavaScript na Dapat Mong Magkaroon Ngayon

Ang mga tagabuo ng web ng lahat ng antas ng kasanayan, mula sa mga rookie programmer hanggang sa mga eksperto sa pag-coding, upang makita ang kahalagahan ng JavaScript sa pagbuo ng mga modernong website. Napaka-nangingibabaw ng JavaScript na ito ay isang mahalagang kasanayan upang malaman kung gagawa ka ng mga web app.

Ang isa sa pinakamakapangyarihang mga bloke ng gusali na built-in sa wikang JavaScript ay ang mga arrays. Ang mga array ay karaniwang matatagpuan sa maraming mga wika ng programa at kapaki-pakinabang para sa pagtatago ng data.

Nagsasama rin ang JavaScript ng mga kapaki-pakinabang na tampok na kilala bilang mga pamamaraan ng pag-array. Narito ang labinlimang dapat mong tingnan nang mabuti upang mapalago ang iyong mga kasanayan bilang isang developer.

Ano ang Mga Pamamaraan ng Array?

Mga pamamaraan ng Array ay mga built-in na pag-andar sa JavaScript na maaari mong mailapat sa iyong mga array. Ang bawat pamamaraan ay may natatanging pagpapaandar na nagsasagawa ng pagbabago o pagkalkula sa iyong array, na nakakatipid sa iyo mula sa nangangailangan ng mga karaniwang pag-andar ng code mula sa simula.

Ang mga pamamaraan ng pag-array sa JavaScript ay pinapatakbo gamit ang isang dot-notation na nakakabit sa iyong variable ng array. Dahil ang mga ito ay mga pag-andar lamang ng JavaScript, lagi silang nagtatapos sa panaklong na maaaring maghawak ng mga opsyonal na argumento. Narito ang isang pamamaraan na naka-attach sa isang simpleng array na tinatawag myArray .

let myArray = [1,2,3]; myArray.pop();

Ang code na ito ay maglalapat ng isang pamamaraan na tinawag pop sa array.

Halimbawa ng Array

Para sa bawat halimbawa, gumamit ng isang sample na array na tatawagin namin myArray , upang maisagawa ang mga pamamaraan sa. Huwag mag-atubiling hilahin ang iyong console at code kasama.

let myArray = [2,4,5,7,9,12,14];

Ipinapalagay ng mga halimbawang ito na alam mo ang pundasyon ng ano ang JavaScript at kung paano ito gumagana . Kung hindi ka okay, lahat tayo narito upang matuto at lumago.

Humukay sa labinlimang makapangyarihang mga pamamaraan ng pag-aayos!

1. Array.push ()

Ano ang ginagawa nito: itulak () Kinukuha ang iyong array at nagdaragdag ng isa o higit pang mga elemento sa dulo ng array, pagkatapos ay ibabalik ang bagong haba ng array. Babaguhin ng pamamaraang ito ang iyong umiiral nang array.

Idagdag ang bilang 20 sa array sa pamamagitan ng pagtakbo itulak () , gamit ang 20 bilang isang pagtatalo.

let myArray = [2,4,5,7,9,12,14];  
myArray.push(20);

Suriin kung ito ay gumagana:

console.log(myArray); [2,4,5,7,9,12,14,20]

Pagpapatakbo ng itulak () Ang paraan sa myArray ay nagdagdag ng halagang ibinigay sa argument sa array. Sa kasong ito, 20. Kapag tiningnan mo ang myArray sa console, makikita mo ang halaga ay naidagdag na ngayon sa dulo ng array.

2. Array.concat ()

Ano ang ginagawa nito: concat () maaaring pagsamahin ang dalawa o higit pang mga arrays sa isang bagong array. Hindi nito binabago ang mayroon nang mga array ngunit lumilikha ng bago.

Kunin myArray at pagsamahin ang isang array na tinawag bagong Array papasok dito.

let myArray = [2,4,5,7,9,12,14];  
let newArray = [1,2,3];  
let result = myArray.concat(newArray);

console.log(result); [2,4,5,7,9,12,14,1,2,3]

Gumagawa ng kababalaghan ang pamamaraang ito kapag nakikipag-usap sa maraming mga arrays o halagang kailangan mong pagsamahin, lahat sa isang simpleng hakbang kapag gumagamit ng mga variable.

3. Array.join ()

Ano ang ginagawa nito: sumali () tumatagal ng isang array at concatenates ang mga nilalaman ng array, na pinaghihiwalay ng isang kuwit. Ang resulta ay inilalagay sa isang string. Maaari mong tukuyin ang isang separator kung nais mong gumamit ng isang kahalili sa isang kuwit.

Tingnan kung paano ito gumagana gamit ang myArray. Una na ginagamit ang default na pamamaraan nang walang hiwalay na argumento, na gagamit ng isang kuwit.

let myArray = [2,4,5,7,9,12,14];  
myArray.join();

'2,4,5,7,9,12,14'

Ang JavaScript ay maglalabas ng isang string, sa bawat halaga sa array na pinaghihiwalay ng isang kuwit. Maaari mong gamitin ang isang argument sa pagpapaandar upang baguhin ang separator. Pagmasdan ito sa dalawang mga argumento: isang solong puwang at isang string.

myArray.join(' ');  
'2 4 5 7 9 12 14'

myArray.join(' and ');  
'2 and 4 and 5 and 7 and 9 and 12 and 14'

Ang unang halimbawa ay isang puwang, na gumagawa ng isang string na madali mong mabasa.

Gumagamit ang pangalawang halimbawa ('at') , at mayroong dalawang bagay na dapat malaman dito.

Una, ginagamit namin ang salitang 'at' upang paghiwalayin ang mga halaga. Pangalawa, mayroong puwang sa magkabilang panig ng salitang 'at'. Ito ay isang mahalagang bagay na dapat tandaan kapag gumagamit sumali () . Ang literal na binabasa ng JavaScript ang mga argumento; kaya kung ang puwang na ito ay naiwan, ang lahat ay mai-scrunch nang magkakasama (ibig sabihin, '2and4and5 ...' atbp.) Hindi isang napaka nababasa na output!

4. Array.forEach ()

Ano ang ginagawa nito: para sa bawat () (Kaso sensitibo!) Gumagawa ng isang pag-andar sa bawat item sa iyong array. Ang pagpapaandar na ito ay anumang pagpapaandar na nilikha mo, katulad ng paggamit ng isang 'for' loop upang mag-apply ng isang function sa isang array ngunit may mas kaunting trabaho sa code.

Mayroong kaunti pa para sa bawat () ; tingnan ang syntax, pagkatapos ay magsagawa ng isang simpleng pagpapaandar upang maipakita.

  
myArray.forEach(function(item){  
//code  
});

Ginagamit namin myArray , para sa bawat () ay inilapat sa notasyong tuldok. Inilalagay mo ang pagpapaandar na nais mong gamitin sa loob ng panaklong na argument, kung alin pagpapaandar (item) sa halimbawa.

Tingnan mo pagpapaandar (item) . Ito ang pagpapaandar na isinagawa sa loob ng forEach (), at mayroon itong sariling argument. Tinatawagan namin ang pagtatalo item . Mayroong dalawang bagay na dapat malaman tungkol sa argumentong ito:

Kapag ang loop ng forEach () sa iyong array, inilalapat nito ang code sa argumentong ito. Isipin ito bilang isang pansamantalang variable na humahawak sa kasalukuyang elemento.
Pinili mo ang pangalan ng argument, maaari itong mapangalanan kahit anong gusto mo. Kadalasan ay mapangalanan ito ng isang bagay na ginagawang mas madaling maunawaan, tulad ng 'item' o 'elemento'.

Sa isip ng dalawang bagay na iyon, tingnan ang simpleng halimbawang ito. Magdagdag ng 15 sa bawat halaga, at ipakita sa console ang resulta.

  
myArray.forEach(function(item){  
 console.log(item + 15);  
});

Ginagamit namin item sa halimbawang ito bilang variable, kaya nakasulat ang pagpapaandar upang magdagdag ng 15 sa bawat halaga sa pamamagitan ng item . Pagkatapos ay i-print ng console ang mga resulta. Narito kung ano ang hitsura nito sa isang Google Chrome console.

Ang resulta ay bawat numero sa array, ngunit may 15 naidagdag dito!

5. Array.map ()

Ano ang ginagawa nito: mapa () gumaganap ng isang pag-andar sa bawat elemento sa iyong array at inilalagay ang resulta sa isang bagong array.

Ang pagpapatakbo ng isang pag-andar sa bawat elemento ay parang tunog ng forEach (). Ang pagkakaiba dito ay mapa () lumilikha ng isang bagong array kapag nagpatakbo. Ang forEach () ay hindi awtomatikong lumilikha ng isang bagong array, kakailanganin mong i-code ang isang tukoy na pagpapaandar upang magawa ito.

Gumamit ng mapa () upang doblehin ang halaga ng bawat elemento sa myArray, at ilagay ang mga ito sa isang bagong array. Makikita mo ang pareho pagpapaandar (item) syntax para sa kaunti pang pagsasanay.

let myArray = [2,4,5,7,9,12,14];

let doubleArray = myArray.map(function(item){  
return item * 2;  
});

Suriin ang mga resulta sa console.

console.log(doubleArray); [4,8,10,14,18,24,28]

myArray ay hindi nagbabago:

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift ()

Ano ang ginagawa nito: Katulad ng kung paano gumagana ang push () na pamamaraan, ang hindi mabilis () Dadalhin ng pamamaraan ang iyong array at nagdaragdag ng isa o higit pang mga elemento sa pagsisimula ng array sa halip na sa pagtatapos, at ibabalik ang bagong haba ng array. Babaguhin ng pamamaraang ito ang iyong umiiral nang array.

let myArray = [2,4,5,7,9,12,14];  
myArray.unshift(0);

Sa pag-log sa array sa console, dapat mong makita ang numero 0 sa simula ng array.

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Array.sort ()

Ano ang ginagawa nito: Ang pag-uuri ay isa sa mga pinakakaraniwang pagpapatakbo na isinagawa sa isang array at lubos na kapaki-pakinabang. JavaScript's pag-uri-uriin () Maaaring magamit ang pamamaraan ng pag-array upang pag-uri-uriin ang isang hanay ng mga numero o kahit na mga string na may isang solong linya lamang ng code. Ang operasyon na ito ay nasa lugar at ibabalik ang pinagsunod-sunod na array sa pamamagitan ng pagbabago ng paunang array. Kumuha ng ibang hanay ng mga numero para sa myArray sa oras na ito

let myArray = [12, 55, 34, 65, 10];  
myArray.sort((a,b) => a - b);

Dahil ang pag-uuri ay tapos na sa lugar, hindi mo kailangang ideklara ang isang hiwalay na variable para sa pinagsunod-sunod na array.

console.log(myArray); [10, 12, 34, 55, 65]

Bilang default, ang array ay pinagsunod-sunod sa pataas na pagkakasunud-sunod, ngunit maaari mong opsyonal na ipasa ang isang pasadyang pagpapaandar sa pag-uri-uriin () pamamaraan upang pag-uri-uriin ang array sa nais na paraan. Sa kasong ito, nakapasa ako sa isang pasadya pagpapaandar ng arrow upang ayusin ang array ayon sa bilang sa pataas na pagkakasunud-sunod.

8. Array.reverse ()

Ano ang ginagawa nito: Tulad ng iminumungkahi ng pangalan, ang baligtarin () ginagamit ang pamamaraan upang baligtarin ang pagkakasunud-sunod ng mga elemento sa array. Tandaan na hindi nito binabaligtad ang mga nilalaman ng array ngunit ang pagkakasunud-sunod lamang. Narito ang isang halimbawa upang maunawaan ang pamamaraang ito nang mas mabuti:

let myArray = [2,4,5,7,9,12,14];  
myArray.reverse()

I-log ang output sa console upang ma-verify ang operasyon.

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

Tulad ng nakikita mo, ang pagkakasunud-sunod ng mga elemento ay nabaligtad. Dati, ang elemento sa huling index (elemento 14 sa index 6) ay ngayon ang elemento sa zeroth index at iba pa.

9. Array.slice ()

Ano ang ginagawa nito: hiwa () ay ginagamit upang makuha ang isang mababaw na kopya ng isang bahagi ng isang array. Sa mas simpleng mga termino, pinapayagan ka ng pamamaraang ito na pumili ng mga tukoy na elemento mula sa isang array ayon sa kanilang index. Maaari mong ipasa ang panimulang index ng elemento mula sa kung saan mo nais na kunin at mga elemento at opsyonal na ang end index din.

Kung hindi mo ibibigay ang end index, lahat ng mga elemento mula sa start index hanggang sa dulo ng array ay makuha. Ang pamamaraang ito ay nagbabalik ng isang bagong array at hindi binabago ang mayroon nang isa.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(2);

Sa code sa itaas, lahat ng mga elemento mula sa pangalawang index hanggang sa huling index ay nakuha dahil hindi naipasa ang parameter ng end index. I-log ang parehong mga arrays sa console.

console.log(myArray);  
console.log(slicedArray);

[2, 4, 5, 7, 9, 12, 14]  
[5, 7, 9, 12, 14]

Malinaw, ang paunang array ay hindi binago ng slice () na pamamaraan at sa halip ay nagbabalik ng isang bagong array na nakaimbak sa hiniwaArray variable. Narito ang isang halimbawa kung saan ang end index parameter ay naipasa rin sa hiwa () pamamaraan

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(1, 3);  
console.log(slicedArray);

[4, 5]

10. Array.splice ()

Ano ang ginagawa nito: splice () ay isang kapaki-pakinabang na pamamaraan ng pag-array na ginamit para sa pag-alis o pagpapalit ng mga elemento sa array sa lugar. Sa pamamagitan ng pagtukoy sa index at bilang ng mga elemento na tatanggalin, binabago nito ang array.

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3);  
console.log(myArray);

Sa halimbawa sa itaas, ang myArray Ang array ay hinaluan mula sa index 2 at 3 mga elemento ang aalisin mula rito. Ang array ay binubuo ngayon ng:

[2, 4, 12, 14]

Upang mapalitan ang mga elemento sa halip na tanggalin lamang ang mga ito, maaari mong ipasa ang anumang bilang ng mga opsyonal na parameter sa mga elemento na nais mong palitan, tulad nito:

ano ang wps sa isang router

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3, 1, 2, 3);  
console.log(myArray);

[2, 4, 1, 2, 3, 12, 14]

11. Array.filter ()

Ano ang ginagawa nito: Ang filter () Ang pamamaraan ay isang kapaki-pakinabang na pamamaraan ng pag-array na tumatagal ng isang pagpapaandar na naglalaman ng isang pagsubok at nagbabalik ng isang bagong array sa lahat ng mga elemento na pumasa sa pagsubok na iyon. Totoo sa pangalan nito, ginagamit ang pamamaraang ito upang salain ang mga elemento na kailangan mo mula sa iba pang mga elemento. Ang pagsala ay tapos na gamit ang isang pagpapaandar na nagbabalik ng isang halaga ng boolean.

Narito ang isang halimbawa ng filter () ginamit ang pamamaraan para sa pagkuha lamang ng mga elemento mula sa pag-aayos na mahahati sa pamamagitan ng 2.

let myArray = [2,4,5,7,9,12,14];  
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);  
console.log(divisibleByTwo);

Sa halimbawa sa itaas, ang isang arrow function ay naipasa bilang parameter na kumukuha ng bawat numero mula sa orihinal na array at susuriin kung nahahati ito ng 2 gamit ang modulo ( % ) at pagkakapantay-pantay ( === ) operator. Narito kung ano ang hitsura ng output:

[2, 4, 12, 14]

12. Array. Bawasan ()

Ano ang ginagawa nito: bawasan () ay isang paraan ng pag-array na tumatagal ng isang function na reducer at isinasagawa ito sa bawat elemento ng array upang mag-output ng isang solong halaga habang bumabalik. Ito ay tumatagal ng isang function na reducer na may variable ng nagtitipon at isang kasalukuyang variable ng elemento tulad ng kinakailangang mga parameter. Ang halaga ng nagtitipon ay naaalala sa lahat ng mga pag-ulit at sa huli ay ibinalik pagkatapos ng huling pag-ulit.

Ang isang tanyag na kaso ng paggamit ng pamamaraang ito ay upang makalkula ang kabuuan ng lahat ng mga elemento sa array. Ang pagpapatupad ng pagpapaandar na ito ay ang mga sumusunod:

let myArray = [2,4,5,7,9,12,14];  
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

Ang 0 ay naipasa bilang pangalawang parameter sa halimbawa sa itaas, na ginagamit bilang paunang halaga ng variable ng nagtitipon. Ang sumOfNums ang variable ay maglalaman ng halaga ng pagbabalik ng bawasan () paraan na kung saan ay inaasahang maging kabuuan ng lahat ng mga elemento sa array.

console.log(sumOfNums); 53

13. Array. Kasama ang ()

Ano ang ginagawa nito: Ang paghahanap ng isang elemento sa isang array upang suriin kung naroroon ito ay isang operasyon na ginagamit nang madalas at samakatuwid, ang JavaScript ay may built-in na pamamaraan para dito sa anyo ng may kasamang () pamamaraan ng array. Narito kung paano mo ito magagamit:

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.includes(4));  
console.log(myArray.includes(2, 1));  
console.log(myArray.includes(12, 2));  
console.log(myArray.includes(18));

Ang pamamaraang ito ay tumatagal ng isang kinakailangang parameter, ang sangkap na hahanapin, at isang opsyonal na parameter, ang array index kung saan magsisimulang maghanap. Nakasalalay sa kung mayroon ang elementong iyon o wala, babalik ito totoo o hindi totoo ayon sa pagkakabanggit. Samakatuwid, ang output ay magiging:

true  
false  
true  
false

14. Array.indexOf ()

Ano ang ginagawa nito: indexOf () ginagamit ang pamamaraan upang malaman ang index kung saan ang unang paglitaw ng isang tinukoy na elemento ay maaaring matagpuan sa array. Kahit na ito ay katulad sa kasamang () pamamaraan, ibabalik ng pamamaraang ito ang numerical index o -1 kung ang elemento ay wala sa array.

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.indexOf(4));  
console.log(myArray.indexOf('4'));  
console.log(myArray.indexOf(9, 2));

indexOf () ang pamamaraan ay gumagamit ng mahigpit na pagkakapantay-pantay upang suriin kung ang isang elemento ay naroroon, na nangangahulugang ang halaga, pati na rin ang uri ng data, ay dapat na pareho. Kinukuha ng opsyonal na pangalawang parameter ang index upang magsimulang maghanap. Batay sa mga pamantayang ito, magiging ganito ang output:

1  
-1  
4

15. Array.fill ()

Ano ang ginagawa nito: Kadalasan, maaaring kailanganin mong itakda ang lahat ng mga halaga sa array sa isang static na halaga tulad ng 0. Sa halip na gumamit ng isang loop, maaari mong subukan ang punan () pamamaraan para sa parehong layunin. Maaari mong tawagan ang pamamaraang ito sa isang array na may 1 kinakailangang parameter: ang halaga upang punan ang array at 2 mga opsyonal na parameter: ang pagsisimula at ang end index upang punan ang pagitan. Binabago ng pamamaraang ito ang lumalabas na array.

let myArray = [2,4,5,7,9,12,14];  
let array1 = myArray.fill(0);  
myArray = [2,4,5,7,9,12,14];  
let array2 = myArray.fill(0, 2);  
myArray = [2,4,5,7,9,12,14];  
let array3 = myArray.fill(0, 1, 3);

Sa pag-log ng output sa console, makikita mo ang:

console.log(array1);  
console.log(array2);  
console.log(array3);

[0, 0, 0, 0, 0, 0, 0]  
[2, 4, 0, 0, 0, 0, 0]  
[2, 0, 0, 7, 9, 12, 14]

Mga Susunod na Hakbang sa Iyong JavaScript Journey

Ang mga array ay isang malakas na bahagi ng wikang JavaScript, kung kaya't maraming mga built-in na pamamaraan upang gawing mas madali ang iyong buhay bilang isang developer. Ang pinakamahusay na paraan upang makabisado ang labinlimang pamamaraan ay ang pagsasanay.

Habang nagpapatuloy kang matuto ng JavaScript, Ang MDN ay isang mahusay na mapagkukunan para sa detalyadong dokumentasyon. Kumuha ng komportable sa console, pagkatapos ay kunin ang iyong mga kasanayan sa isang bingaw kasama ang pinakamahusay na mga editor ng JavaScript para sa mga programmer. Handa nang buuin ang iyong website gamit ang JavaScript? Bakit hindi tingnan ang ilang mga balangkas na maaari mong isaalang-alang.

Magbahagi Magbahagi Mag-tweet Email 6 JavaScript Frameworks Worth Learning

Maraming mga balangkas ng JavaScript doon upang makatulong sa pag-unlad. Narito ang ilan na dapat mong malaman.

Basahin Susunod Mga Kaugnay na Paksa

Programming
JavaScript
Mga Tip sa Coding

Tungkol sa May-akda Nitin Ranganath(31 Mga Artikulo Na-publish)

Ang Nitin ay isang masugid na developer ng software at isang mag-aaral sa computer engineering na bumubuo ng mga aplikasyon sa web gamit ang mga teknolohiya ng JavaScript. Gumagawa siya bilang isang freelance web developer at gustong magsulat para sa Linux at Programming sa kanyang libreng oras.

Higit pa Mula sa Nitin Ranganath

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe