Pinakamahusay na Kasanayan para sa Iterasyon sa JavaScript

Ipinaliwanag ng artikulong ito ang pinakamahusay na kasanayan para sa iterasyon sa JavaScript.

YouTube Video

Pinakamahusay na Kasanayan para sa Iterasyon sa JavaScript

Karaniwan ang paggamit ng mga for loops para sa iterasyon sa JavaScript. Dito, magbibigay kami ng detalyadong paliwanag ukol sa pinakamahusay na kasanayan para sa paggamit ng for loops upang makapagsulat ng mahusay at madaling basahing code.

Piliin ang Tamang Estruktura ng Pagsusuri

Nagbibigay ang JavaScript ng iba't ibang estruktura ng pagsusuri, bawat isa ay angkop para sa iba't ibang layunin.

 1// Example of a for loop
 2for (let i = 0; i < 5; i++) {
 3    console.log(i);
 4}
 5
 6// Example of a for...of loop
 7const array = [10, 20, 30];
 8for (const value of array) {
 9    console.log(value);
10}
11
12// Example of a for...in loop
13const obj = { a: 1, b: 2, c: 3 };
14for (const key in obj) {
15    console.log(`${key}: ${obj[key]}`);
16}
17
18// Example of a while loop
19let count = 0;
20while (count < 5) {
21    console.log(count);
22    count++;
23}

• Ang for statement ay angkop kapag ang bilang ng pag-uulit ay paunang natukoy.
• Ang for...of statement ay angkop para sa maikling pagproseso ng arrays at iterable na mga object.
• Ang for...in statement ay ginagamit upang mag-iterate sa mga property ng isang object. Gayunpaman, hindi ito angkop para sa mga array.
• Ang while statement at do...while statement ay ginagamit upang kontrolin ang mga loop batay sa mga kondisyon.

Pagamit ng forEach na method at for...of na statement

Kapag nag-loop sa isang array, karaniwang gumagamit ng for statement upang ma-access ang index, ngunit maaaring mas madaling basahin ang forEach method o ang for...of statement.

 1// Using a standard for loop
 2const array = ["apple", "banana", "cherry"];
 3for (let i = 0; i < array.length; i++) {
 4    console.log(array[i]);
 5}
 6
 7// Using forEach
 8array.forEach(item => console.log(item));
 9
10// Using for...of
11for (const item of array) {
12    console.log(item);
13}

• Ang for statement ay nagpapahintulot sa malinaw na pamamahala ng index habang nag-iiterate.
• Ang forEach method ay gumagamit ng callback function upang maiproseso nang maikli ang bawat elemento.
• Ang for...of statement ay madaling basahin at nagbibigay-daan para sa direktang pag-access sa bawat elemento sa isang array.

I-optimize ang mga Kondisyon ng Loop

Dahil paulit-ulit na sinusuri ang kondisyon ng loop, ang pag-iwas sa hindi kinakailangang mga pagkalkula ay maaaring magpabuti sa pagganap.

 1const names = ["Alice", "Bob", "Charlie"];
 2const scores = [85, 92, 78];
 3
 4// Inefficient example
 5for (let i = 0; i < Math.min(names.length, scores.length); i++) {
 6    console.log(`${names[i]} scored ${scores[i]}`);
 7}
 8
 9// Efficient example
10for (let i = 0, len = Math.min(names.length, scores.length); i < len; i++) {
11    console.log(`${names[i]} scored ${scores[i]}`);
12}

• Tulad ng ipinapakita sa halimbawang ito, ang pag-iimbak ng resulta ng kalkulasyon sa isang variable nang maaga ay nagbibigay-daan para sa mas mahusay na pagpapatupad ng loop.

 1const scores = [85, 92, 78];
 2let sum = 0;
 3let sum2 = 0;
 4
 5// Inefficient example
 6for (let i = 0; i < scores.length; i++) {
 7    sum += scores[i];
 8}
 9console.log(`Total score : ${sum}`);
10
11// Efficient example
12for (let i = scores.length - 1; i >= 0; i--) {
13    sum2 += scores[i];
14}
15console.log(`Total score : ${sum2}`);

• Tulad ng ipinapakita sa halimbawang ito, ang pagbabaliktad ng kundisyon ay minsan ay mas mahusay.

Pag-optimize ng Proseso ng Loop

Dahil ang proseso ng loop ay paulit-ulit na isinasagawa, ang pag-iwas sa hindi kinakailangang mga kalkulasyon ay maaaring mapabuti ang pagganap.

 1const array = ["apple", "banana", "cherry"];
 2
 3// Inefficient example
 4for (let i = 0; i < 100; i++) {
 5    const element = document.querySelector("#myElement");
 6    element.textContent = `Count: ${i}`;
 7}
 8
 9// Efficient example
10const element = document.querySelector("#myElement");
11for (let i = 0; i < 100; i++) {
12    element.textContent = `Count: ${i}`;
13}

• Sa halimbawang ito, sa pamamagitan ng paglipat ng querySelector na pamamaraan sa labas ng loop, naiiwasan ang hindi kinakailangang paulit-ulit na mga kalkulasyon.

Maging Maingat sa Saklaw (Scope)

Gamitin ang let o const upang matiyak na may tamang saklaw ang mga variable sa loob ng loop. Dahil ang var ay limitado lamang sa saklaw ng function, maaari itong magdulot ng hindi inaasahang kilos.

 1// Using let
 2for (let i = 0; i < 3; i++) {
 3    console.log(i);
 4}
 5
 6// Potential issue with var
 7for (var i = 0; i < 3; i++) {
 8    setTimeout(() => console.log(i), 1000); // 3, 3, 3
 9}
10
11// Using let to avoid the issue
12for (let i = 0; i < 3; i++) {
13    setTimeout(() => console.log(i), 1000); // 0, 1, 2
14}

• Ang var ay may saklaw ng function, kaya pagkatapos ng loop ang i ay 3, at lahat ng mga function na isinagawa ng setTimeout ay naglalabas ng 3.
• Sa paggamit ng let, ang i sa loob ng setTimeout na callback function ay tumutukoy sa bagong halaga para sa bawat loop, kaya ang 0, 1, 2 ay nailalabas ayon sa inaasahan.

Pagbutihin ang Pagkabasa sa Pamamagitan ng Maagang Paglabas

Upang gawing mas simple ang pagproseso ng loop, gamitin nang tama ang break at continue upang mapabuti ang pagbabasa.

 1// Example using break
 2for (let i = 0; i < 10; i++) {
 3    if (i === 5) {
 4        break; // Exit the loop
 5    }
 6    console.log(i);
 7}
 8
 9// Example using continue
10for (let i = 0; i < 10; i++) {
11    if (i % 2 === 0) {
12        continue; // Skip to the next iteration
13    }
14    console.log(i);
15}

• Ang paggamit ng break ay nagbibigay-daan sa pagtapos ng loop process sa kalagitnaan, nilalampasan ang lahat ng susunod na mga pag-ulit.
• Ang paggamit ng continue ay nagbibigay-daan sa pag-skip ng kasalukuyang proseso ng loop at paglipat sa susunod na pag-ulit.

Iwasan ang Malalim na Pagkaka-ugat (Nesting)

Ang malalim na pagkaka-ugat ay nagpapahirap sa pagbabasa ng code, kaya hangarin na gawing mababaw ang nesting sa pamamagitan ng maagang pagbabalik o paghahati ng mga functionality sa mga function.

 1// Deeply nested example
 2for (let i = 0; i < 5; i++) {
 3    for (let j = 0; j < 5; j++) {
 4        if (i + j > 5) {
 5            console.log(i, j);
 6        }
 7    }
 8}
 9
10// Improved using function decomposition
11function processPairs(i) {
12    for (let j = 0; j < 5; j++) {
13        if (i + j > 5) {
14            console.log(i, j);
15        }
16    }
17}
18
19for (let i = 0; i < 5; i++) {
20    processPairs(i);
21}

• Sa halimbawang ito, ginagamit ang mga function upang mabawasan ang pag-nesting.

Isaalang-alang ang paghawak ng mga error

Kung may posibilidad ng mga error na maganap sa loob ng loop, magpatupad ng wastong paghawak ng error.

 1const data = ["123", "abc", "456", "xyz"];
 2
 3// Without Error Handling
 4for (const item of data) {
 5    const result = parseInt(item);
 6    console.log(`Parsed value: ${result}`);
 7}
 8
 9// With Error Handling
10for (const item of data) {
11    try {
12        const result = parseInt(item);
13        if (isNaN(result)) {
14            throw new Error(`Invalid number: ${item}`);
15        }
16        console.log(`Parsed value: ${result}`);
17    } catch (error) {
18        console.error(`Error processing item: ${item}. ${error.message}`);
19    }
20}

• Sa halimbawang ito, ang paghawak ng error ay ginagawa para sa pagproseso ng hindi wastong data, pagtukoy at pag-uulat ng mga isyu.

Mga punto na dapat tandaan sa asynchronous na pagproseso

Kapag humahawak ng asynchronous na pagproseso sa mga loop, ang paggamit ng async/await ay maaaring magresulta sa maikli at madaling maunawaang code.

 1const urls = ["https://example.com/1", "https://example.com/2"];
 2
 3// Proper handling of asynchronous operations
 4async function fetchUrls() {
 5    for (const url of urls) {
 6        const response = await fetch(url);
 7        const data = await response.json();
 8        console.log(data);
 9    }
10}
11
12fetchUrls();

• Ang code na ito ay asynchronous na kumukuha ng mga URL mula sa urls na array paisa-isa at pinoproseso ang mga resulta sa JSON na format. Ang paggamit ng async/await ay nagpapadali ng mga asynchronous na operasyon, sunod-sunod na kinukuha ang data para sa bawat URL at inilalabas ito sa console.

Unawain ang pagkakaiba sa pagitan ng for...of na pahayag at forEach() sa asynchronous na pagproseso.

 1async function asyncTask(num) {
 2    return new Promise(resolve => {
 3        setTimeout(() => {
 4            console.log(`Task ${num} done`);
 5            resolve();
 6        }, 100);
 7    });
 8}
 9
10async function runWithForOf() {
11    console.log("Start for...of");
12    for (const num of [1, 2, 3]) {
13        await asyncTask(num);
14    }
15    console.log("End for...of");
16}
17
18async function runWithForEach() {
19    console.log("Start forEach");
20    [1, 2, 3].forEach(async num => {
21        await asyncTask(num);
22    });
23    console.log("End forEach");
24}
25
26async function executeExamples() {
27    await runWithForOf();
28    await runWithForEach();
29}
30
31executeExamples();

• Kapag humahawak ng asynchronous na pagproseso sa mga loop, tandaan ang pagkakaiba sa pag-uugali, tulad ng ipinapakita sa halimbawa na ito, sa pagitan ng paggamit ng for...of na may async/await at paggamit ng forEach().

• Sa for...of, ang code ay isinasagawa nang sunud-sunod at naghihintay sa await sa loob ng loop bago magpatuloy sa susunod na iterasyon. Sa kabilang banda, ang forEach() ay isinasagawa ang pagproseso nang sabay-sabay.

Konklusyon

Ang for na pahayag sa JavaScript ay isang simple ngunit makapangyarihang kasangkapan. Sa pamamagitan ng paggamit ng mga pinakamahusay na kasanayan na ipinakita dito, makakagawa ka ng mahusay at mataas na nababasang code. Bigyang-pansin ang pagpili ng angkop na mga istruktura ng loop, pamamahala ng saklaw, paghawak ng error, at maghangad ng mataas na mapapanatiling code.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video