Amalan Terbaik untuk Gelung 'for' dalam TypeScript

Artikel ini menerangkan amalan terbaik untuk menggunakan gelung 'for' dalam TypeScript.

YouTube Video

Amalan Terbaik untuk Gelung 'for' dalam TypeScript

Kenyataan for adalah sintaks asas dan berkuasa untuk melaksanakan operasi berulang. Dalam TypeScript, memanfaatkan keselamatan jenis dan menulis kod dengan mengambil kira kebolehbacaan dan kebolehpeliharaan membolehkan anda menulis kod yang cekap dengan lebih sedikit kesilapan.

Memilih Jenis Gelung yang Betul

TypeScript menawarkan beberapa struktur gelung, masing-masing sesuai untuk kes penggunaan yang berbeza. Memilih gelung yang sesuai adalah penting untuk kejelasan kod dan prestasi.

Gelung for Standard

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

Gelung standard for adalah ideal apabila anda memerlukan kawalan tepat terhadap indeks iterasi.

Amalan Terbaik

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

Apabila menulis kenyataan for, mengingati perkara berikut dapat membantu anda menulis kod yang lebih selamat dan lebih mudah dibaca.

• Gunakan let untuk pembolehubah indeks
  • Menggunakan let sebagai ganti var mengehadkan skop kepada blok, mengelakkan tingkah laku yang tidak disengajakan.
• Gunakan pembolehubah tetap dan nama pembolehubah bersifat deskriptif untuk menjadikan sempadan gelung lebih jelas
  • Mengelakkan nombor 'ajaib' dan menggunakan nama pembolehubah yang bermakna meningkatkan kebolehbacaan.

Gelung for...of

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

Gelung for...of sesuai untuk mengulangi objek boleh iterasi seperti susunan dan rentetan.

Amalan Terbaik

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

Apabila menulis gelung for...of, memberi perhatian kepada perkara berikut dapat membantu anda menulis kod yang lebih selamat.

• Gunakan const untuk pembolehubah gelung
  • Jika nilai-nilai tidak diubah dalam gelung, penggunaan const membantu mencegah penugasan semula secara tidak sengaja.

Gelung for...in

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

Gelung for...in mengulangi sifat-sifat boleh enumerasi dalam suatu objek.

Amalan Terbaik

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}

Apabila menulis gelung for...in, anda boleh mempertimbangkan perkara berikut.

• Tapis sifat
  • Jika anda perlu mengelakkan sifat-sifat yang diwarisi, anda boleh menggunakan hasOwnProperty.
• Jangan gunakan for...in dengan tatasusunan Elakkan menggunakan for...in dengan tatasusunan. Ia mungkin melalui semua sifat enumerasi, termasuk yang bukan indeks tatasusunan.

Kaedah forEach

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

Apabila mengulangi susunan, forEach lebih ringkas dan menghapuskan keperluan untuk menguruskan indeks.

Amalan Terbaik

Apabila menggunakan kaedah forEach, anda boleh mempertimbangkan perkara berikut.

• Gunakan fungsi anak panah
  • Gunakan fungsi anak panah ringkas untuk meningkatkan kebolehbacaan.
• Elakkan gangguan
  • forEach tidak menyokong break atau continue. Gunakan gelung for...of atau for apabila perlu:.

Keselamatan Jenis dan Pencegahan Ralat

Dengan memanfaatkan sistem jenis TypeScript, anda dapat mencegah ralat jangka masa semasa iterasi:.

Tentukan Jenis Ketat untuk Pemboleh Ubah Gelung

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});

Dengan secara eksplisit menetapkan jenis-jenis bagi pembolehubah gelung, anda dapat mengesan ketidakpadanan jenis lebih awal.

Elakkan any Secara Implisit

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

Selain itu, dengan mengaktifkan noImplicitAny dalam tsconfig.json, anda boleh mengelakkan pembolehubah tanpa jenis eksplisit daripada secara automatik diberikan jenis any.

Gunakan ReadonlyArray Apabila Diperlukan

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

Jika anda sedang iterasi melalui array yang tidak sepatutnya diubah, anda boleh menggunakan ReadonlyArray.

Pertimbangan Prestasi

Kecekapan adalah penting untuk gelung yang memproses set data besar atau gelung yang sering dilaksanakan:.

Pilih kaedah pelaksanaan gelung yang optimum.

Terdapat pelbagai cara untuk melaksanakan gelung, setiap satunya dengan perbezaan dalam keterbacaan dan kecekapan pelaksanaan.

 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');

Kecekapan berbeza bergantung pada persekitaran pelaksanaan, tetapi sebagai contoh, apabila menjalankan gelung sejuta kali, perbezaannya boleh menjadi agak ketara. Pilih kaedah gelung yang optima dengan mempertimbangkan kemudahan penyelenggaraan dan prestasi.

Gunakan Kaedah Iterasi Natif

 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]

Kaedah seperti map dan filter boleh menjadi lebih mudah dibaca dalam beberapa kes.

Utamakan for...of untuk Keterbacaan

Prestasi hanya perlu diutamakan dalam kes-kes terhad; menulis kod yang boleh dibaca secara umumnya lebih penting. Sebagai contoh, mengutamakan for...of boleh meningkatkan kebolehbacaan.

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

Amalan Terbaik

1const fruits = ["apple", "banana", "cherry"];
2
3for (const [index, fruit] of fruits.entries()) {
4    console.log(`${index}: ${fruit}`);
5}

Dengan mengutamakan gelung for...of, anda dapat menulis kod yang lebih mudah dibaca dan tahan ralat. Seperti yang ditunjukkan dalam contoh ini, jika anda juga memerlukan indeks tatasusunan, menggabungkan entries() dengan for...of adalah berkesan.

Mengelakkan Perangkap Biasa

Mengubah Koleksi Semasa Iterasi

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);

Mengubah array semasa iterasi boleh menyebabkan tingkah laku yang tidak dijangka:. Gunakan salinan jika perlu.

Pertimbangkan kes luar jangka

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

Kod ini berfungsi dengan baik, tetapi jika anda perlu menangani array kosong, anda boleh memperbaikinya seperti berikut.

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}

Mempertimbangkan kes luar jangka boleh membantu mencegah ralat dalam kod berikutnya.

Kesimpulan

Untuk menguasai pernyataan for dalam TypeScript, adalah penting untuk memahami pelbagai struktur gelung, mematuhi praktik selamat jenis, dan mengoptimumkan prestasi. Amalan terbaik ini membantu anda menulis kod yang lebih bersih, boleh dipercayai, dan mudah diselenggara.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video