7.8 KiB

Raw Permalink Blame History

Mga Pangunahing Kaalaman sa JavaScript: Arrays at Loops

Sketchnote ni Tomomi Imura

Pre-Lecture Quiz

Ang araling ito ay tumatalakay sa mga pangunahing kaalaman sa JavaScript, ang wika na nagbibigay ng interactivity sa web. Sa araling ito, matututuhan mo ang tungkol sa arrays at loops, na ginagamit upang manipulahin ang data.

🎥 I-click ang mga imahe sa itaas para sa mga video tungkol sa arrays at loops.

Maaari mong kunin ang araling ito sa Microsoft Learn!

Arrays

Ang pagproseso ng data ay isang karaniwang gawain sa anumang wika, at mas madali itong gawin kapag ang data ay nakaayos sa isang istruktura, tulad ng arrays. Sa arrays, ang data ay iniimbak sa isang istruktura na katulad ng listahan. Isang malaking benepisyo ng arrays ay maaari kang mag-imbak ng iba't ibang uri ng data sa isang array.

✅ Ang arrays ay nasa paligid natin! Makakaisip ka ba ng isang halimbawa ng array sa totoong buhay, tulad ng isang solar panel array?

Ang syntax para sa isang array ay isang pares ng square brackets.

let myArray = [];

Ito ay isang walang laman na array, ngunit ang arrays ay maaaring ideklara na may laman na data. Ang maraming halaga sa isang array ay pinaghihiwalay ng comma.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

Ang mga halaga ng array ay binibigyan ng natatanging halaga na tinatawag na index, isang buong numero na itinalaga batay sa distansya nito mula sa simula ng array. Sa halimbawa sa itaas, ang string value na "Chocolate" ay may index na 0, at ang index ng "Rocky Road" ay 4. Gamitin ang index na may square brackets upang kunin, baguhin, o ipasok ang mga halaga ng array.

✅ Ikaw ba ay nagulat na ang arrays ay nagsisimula sa zero index? Sa ilang programming languages, ang mga index ay nagsisimula sa 1. Mayroong isang kawili-wiling kasaysayan tungkol dito, na maaari mong basahin sa Wikipedia.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Maaari mong gamitin ang index upang baguhin ang isang halaga, tulad nito:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

At maaari kang magpasok ng bagong halaga sa isang partikular na index tulad nito:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Ang mas karaniwang paraan upang magdagdag ng mga halaga sa isang array ay sa pamamagitan ng paggamit ng mga array operators tulad ng array.push()

Upang malaman kung ilang item ang nasa isang array, gamitin ang length property.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Subukan mo ito! Gumamit ng console ng iyong browser upang lumikha at manipulahin ang isang array na ikaw mismo ang gumawa.

Loops

Ang loops ay nagbibigay-daan sa atin na magsagawa ng paulit-ulit o iterative na mga gawain, at makakatipid ng maraming oras at code. Ang bawat iteration ay maaaring mag-iba sa kanilang mga variable, halaga, at kondisyon. May iba't ibang uri ng loops sa JavaScript, at lahat sila ay may maliliit na pagkakaiba, ngunit mahalagang pareho ang ginagawa: ang pag-loop sa data.

For Loop

Ang for loop ay nangangailangan ng 3 bahagi upang mag-iterate:

counter Isang variable na karaniwang sinisimulan sa isang numero na nagbibilang ng bilang ng iterations
condition Expression na gumagamit ng comparison operators upang ihinto ang loop kapag false
iteration-expression Tumatakbo sa dulo ng bawat iteration, karaniwang ginagamit upang baguhin ang counter value

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Patakbuhin ang code na ito sa console ng browser. Ano ang mangyayari kapag gumawa ka ng maliliit na pagbabago sa counter, condition, o iteration expression? Kaya mo bang gawing pabaliktad ang takbo nito, na parang countdown?

While loop

Hindi tulad ng syntax ng for loop, ang while loops ay nangangailangan lamang ng isang kondisyon na magpapahinto sa loop kapag ang kondisyon ay naging false. Ang mga kondisyon sa loops ay karaniwang umaasa sa ibang mga halaga tulad ng counters, at kailangang pamahalaan sa loob ng loop. Ang mga panimulang halaga para sa counters ay kailangang likhain sa labas ng loop, at anumang expression upang matugunan ang kondisyon, kabilang ang pagbabago ng counter, ay kailangang panatilihin sa loob ng loop.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ Bakit mo pipiliin ang for loop kumpara sa while loop? 17K na mga manonood ang may parehong tanong sa StackOverflow, at ang ilang mga opinyon maaaring maging kawili-wili sa iyo.

Loops at Arrays

Ang arrays ay madalas na ginagamit kasama ng loops dahil karamihan sa mga kondisyon ay nangangailangan ng haba ng array upang ihinto ang loop, at ang index ay maaari ring maging counter value.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Mag-eksperimento sa pag-loop sa isang array na ikaw mismo ang gumawa sa console ng iyong browser.

🚀 Hamon

May iba pang mga paraan ng pag-loop sa arrays bukod sa for at while loops. Mayroong forEach, for-of, at map. Isulat muli ang iyong array loop gamit ang isa sa mga teknik na ito.

Post-Lecture Quiz

Post-lecture quiz

Review at Pag-aaral sa Sarili

Ang arrays sa JavaScript ay may maraming mga method na nakakabit sa kanila, na lubos na kapaki-pakinabang para sa pag-manipula ng data. Basahin ang tungkol sa mga method na ito at subukan ang ilan sa mga ito (tulad ng push, pop, slice, at splice) sa isang array na ikaw mismo ang gumawa.

Takdang-Aralin

Loop an Array

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagama't sinisikap naming maging tumpak, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.

7.8 KiB Raw Permalink Blame History