Articles
Panimula sa TypeScript
Mga Pinakamahusay na Kasanayan para sa Mga 'for Loop' sa TypeScript

Mga Pinakamahusay na Kasanayan para sa Mga 'for Loop' sa TypeScript

Ipinaliliwanag ng artikulong ito ang mga pinakamahusay na kasanayan sa paggamit ng mga 'for loop' sa TypeScript.

YouTube Video

Mga Pinakamahusay na Kasanayan para sa Mga 'for Loop' sa TypeScript

Ang mga for na pahayag ay pangunahing at makapangyarihang syntax para sa pagsasagawa ng mga paulit-ulit na operasyon. Sa TypeScript, ang paggamit ng type safety at pagsusulat ng code nang isinasaalang-alang ang pagiging mababasa at pagpapanatili nito ay nagbibigay-daan sa iyo na magsulat ng mahusay na code na may mas kaunting mga pagkakamali.

Pagpili ng Tamang Uri ng Loop

Nag-aalok ang TypeScript ng ilang konstruksyon ng loop, na angkop para sa iba't ibang mga paggamit. Mahalaga ang pagpili ng tamang loop para sa kaliwanagan ng code at performance.

Klasikong for Loop 

1for (let i = 0; i < 10; i++) {
2    console.log(i);
3}

Ang karaniwang for loop ay perpekto kapag kailangan mo ng tumpak na kontrol sa iteration index.

Pinakamahusay na Kasanayan 
1const maxIterations = 10;
2for (let i = 0; i < maxIterations; i++) {
3    console.log(i);
4}

Kapag nagsusulat ng mga for na pahayag, ang pag-alala sa mga sumusunod na puntos ay makakatulong sa iyo na magsulat ng mas ligtas at mas mababasang code.

  • Gumamit ng let para sa mga index variable
    • Ang paggamit ng let sa halip ng var ay nililimitahan ang saklaw sa block, na pumipigil sa mga hindi inaasahang pag-uugali.
  • Gumamit ng mga constant at makabulas na mga pangalan ng variable upang gawing malinaw ang mga hangganan ng loop
    • Ang pag-iwas sa magic numbers at paggamit ng makahulugang mga pangalan ng variable ay nagpapabuti sa pagiging mababasa.

for...of Loop 

1const array = [1, 2, 3];
2for (let value of array) {
3    console.log(value);
4}

Ang for...of loop ay angkop para sa pag-ulit sa mga iterable na bagay tulad ng arrays at strings.

Pinakamahusay na Kasanayan 
1const array = [1, 2, 3];
2for (const value of array) {
3    console.log(value);
4}

Kapag nagsusulat ng mga for...of na loop, ang pagbibigay pansin sa mga sumusunod na puntos ay makakatulong sa iyo na magsulat ng mas ligtas na code.

  • Gumamit ng const para sa mga variable sa loop
    • Kung ang mga halaga ay hindi binabago sa loob ng loop, ang paggamit ng const ay nakakatulong na maiwasan ang hindi sinasadyang muling pag-assign.

for...in Loop 

1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3    console.log(`${key}: ${obj[key]}`);
4}

Ang for...in loop ay umiikot sa mga enumerable na katangian ng isang object.

Pinakamahusay na Kasanayan 
1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3    if (obj.hasOwnProperty(key)) {
4        console.log(`${key}: ${obj[key]}`);
5    }
6}

Kapag sumusulat ng isang for...in loop, maaari mong isaalang-alang ang mga sumusunod na punto.

  • Salain ang mga property
    • Kung kailangan mong iwasan ang mga namamanang katangian, maaari mong gamitin ang hasOwnProperty.
  • Huwag gumamit ng for...in sa mga array Iwasang gumamit ng for...in para sa mga array. Maaaring mag-loop ito sa lahat ng enumerable property, kabilang ang mga hindi index ng array.

forEach Method 

1const array = [1, 2, 3];
2array.forEach((value, index) => {
3    console.log(`Index: ${index}, Value: ${value}`);
4});

Kapag nag-uulit sa mga array, ang forEach ay maikli at tinatanggal ang pangangailangan na pamahalaan ang mga index.

Pinakamahusay na Kasanayan

Kapag gumagamit ng forEach na metodo, maaari mong isaalang-alang ang mga sumusunod na punto.

  • Gumamit ng arrow function
    • Gumamit ng maikling arrow function upang mapabuti ang nababasa.
  • Iwasan ang mga pagkaantala
    • Ang forEach ay hindi sumusuporta sa break o continue. Gamitin ang for...of o mga for loop kung kinakailangan:.

Kaligtasan sa Uri at Pag-iwas sa Error

Sa pamamagitan ng paggamit sa type system ng TypeScript, maiiwasan mo ang runtime errors sa panahon ng pag-ulit:.

Tukuyin ang Mahigpit na Uri para sa Mga Loop Variable 

1const items = [1, 2, 3];
2items.forEach(item => {
3    console.log(item * 2);
4});
1const items: number[] = [1, 2, 3];
2items.forEach((item: number) => {
3    console.log(item * 2);
4});

Sa pamamagitan ng hayagang pagtukoy ng mga uri para sa mga variable ng loop, mabilis mong matutukoy ang hindi pagkatugma ng mga uri.

Iwasan ang Implicit na any 

1{
2  "compilerOptions": {
3    "noImplicitAny": true
4  }
5}

Gayundin, sa pamamagitan ng pag-enable ng noImplicitAny sa tsconfig.json, maiiwasan mong ang mga variable na walang malinaw na uri ay karaniwang itatalaga sa uri na any.

Gamitin ang ReadonlyArray Kung Kinakailangan 

1const numbers: ReadonlyArray<number> = [1, 2, 3];
2for (const value of numbers) {
3    console.log(value);
4}

Kung inuulit mo ang isang array na hindi dapat baguhin, maaari mong gamitin ang ReadonlyArray.

Mga Pagsasaalang-alang sa Pagganap

Ang kahusayan ay mahalaga para sa mga loop na nagpoproseso ng malalaking datasets o madalas na ini-execute na loops:.

Piliin ang pinakamainam na paraan ng implementasyon ng loop.

May iba't ibang paraan upang ipatupad ang mga loops, bawat isa ay may pagkakaiba sa readability at kahusayan sa pagsasagawa.

 1// Prepare input data (an array from 1 to 1000000)
 2const input: number[] = Array.from({ length: 1000000 }, (_, i) => i + 1);
 3
 4// --- for ---
 5console.time('for loop');
 6const squaresFor: number[] = [];
 7for (let i = 0; i < input.length; i++) {
 8    squaresFor.push(input[i] * input[i]);
 9}
10console.timeEnd('for loop');
11
12// --- while ---
13console.time('while loop');
14const squaresWhile: number[] = [];
15let i: number = 0;
16while (i < input.length) {
17    squaresWhile.push(input[i] * input[i]);
18    i++;
19}
20console.timeEnd('while loop');
21
22// --- for-of ---
23console.time('for-of loop');
24const squaresForOf: number[] = [];
25for (const num of input) {
26    squaresForOf.push(num * num);
27}
28console.timeEnd('for-of loop');
29
30// --- forEach ---
31console.time('forEach loop');
32const squaresForEach: number[] = [];
33input.forEach((num: number): void => {
34    squaresForEach.push(num * num);
35});
36console.timeEnd('forEach loop');
37
38// --- map ---
39console.time('map');
40const squaresMap: number[] = input.map((value: number): number => value * value);
41console.timeEnd('map');

Nagkakaiba ang kahusayan depende sa execution environment, ngunit halimbawa, kapag pinatakbo ang isang loop ng isang milyong beses, ang pagkakaiba ay maaaring maging kapansin-pansin. Piliin ang pinakamainam na paraan ng loop na isinasaalang-alang ang kakayahang panatilihin at pagganap.

Gamitin ang Native Iteration Methods 

 1const squares = [1, 2, 3].map(value => value * value);
 2console.log(squares);
 3
 4const numbers = [1, 2, 3, 4, 5, 6];
 5const evenNumbers = numbers.filter(value => value % 2 === 0);
 6console.log(evenNumbers); // [2, 4, 6]
 7
 8const squaredEvens = numbers
 9    .filter(value => value % 2 === 0) // Keep only even numbers
10    .map(value => value * value);     // Square the remaining values
11
12console.log(squaredEvens); // [4, 16, 36]

Ang mga paraan tulad ng map at filter ay maaaring mas mababasa sa ilang mga kaso.

Mas Paboran ang for...of para sa Pagiging Nababasa

Dapat bigyang-priyoridad ang pagganap sa mga limitadong kaso lamang; mas mahalaga sa pangkalahatan ang pagsusulat ng mababasang code. Halimbawa, ang pagbibigay-priyoridad sa for...of ay maaaring mapabuti ang pagiging mababasa.

1const fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(`${i}: ${fruits[i]}`);
5}
Pinakamahusay na Kasanayan 
1const fruits = ["apple", "banana", "cherry"];
2
3for (const [index, fruit] of fruits.entries()) {
4    console.log(`${index}: ${fruit}`);
5}

Sa pamamagitan ng pagbibigay-priyoridad sa mga for...of na loop, maaari kang magsulat ng mas mababasang at hindi madaling magkamaling code. Tulad ng ipinakita sa halimbawang ito, kung kailangan mo rin ang mga index ng array, ang pagsasama ng entries() sa for...of ay epektibo.

Pag-iwas sa Karaniwang Mga Pagkakamali

Pagbabago ng Mga Koleksyon Habang Inuulit 

1const array = [1, 2, 3];
2for (const value of [...array]) {
3    if (value === 2) {
4        array.push(4); // Avoid this!
5    }
6}
7console.log(array);

Ang pagbabago ng array habang umuulit ay maaaring magdulot ng hindi inaasahang pagkilos:. Gumamit ng kopya kung kinakailangan.

Isaalang-alang ang mga hindi pangkaraniwang kaso 

1const array: number[] = [];
2for (const value of array) {
3    console.log(value); // No output, but no errors
4}

Gumagana nang maayos ang code na ito, ngunit kung kailangan mong hawakan ang mga walang laman na array, maaari mo itong pagbutihin tulad ng sumusunod.

1const array: number[] = [];
2if (array.length === 0) {
3    console.log("The array is empty.");
4} else {
5    for (const value of array) {
6        console.log(value);
7    }
8}

Ang pag-iisip ng mga hindi pangkaraniwang kaso ay maaaring makatulong upang maiwasan ang mga error sa mga kasunod na code.

Konklusyon

Upang maging dalubhasa sa paggamit ng for na pahayag sa TypeScript, mahalagang maunawaan ang iba't ibang pagbuo ng loop, sumunod sa mga ligtas sa type na pamamaraan, at i-optimize ang performance. Ang mga pinakamahusay na kasanayang ito ay tumutulong sa iyo na sumulat ng mas malinis, mas maaasahan, at mas madaling mapanatiling 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

Mga Pahayag sa Pag-uulit ng TypeScript