Articles
TypeScript简介
TypeScript中for循环的最佳实践

TypeScript中for循环的最佳实践

本文解释了在TypeScript中使用for循环的最佳实践。

YouTube Video

TypeScript中for循环的最佳实践

for语句是一种执行重复操作的重要且强大的语法。在TypeScript中，利用类型安全，并以可读性和可维护性为重点编写代码，可以帮助您撰写高效且错误较少的代码。

选择正确的循环类型

TypeScript提供了几种循环结构，每种都适用于不同的使用场景。选择合适的循环对于代码的清晰性和性能至关重要。

标准for循环 

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

当你需要精确控制迭代索引时，标准的 for 循环是理想的选择。

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

在编写for语句时，牢记以下几点可以帮助您编写更安全且更易读的代码。

  • 使用 let 作为索引变量
    • 使用let代替var可以将作用域限制在代码块内，从而避免意外行为。
  • 使用常量和描述性变量名称，使循环边界更加明确
    • 避免使用魔法数字并采用有意义的变量名称可以提高代码的可读性。

for...of循环 

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

for...of 循环适用于遍历数组和字符串等可迭代对象。

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

在编写for...of循环时，注意以下几点可以帮助您编写更安全的代码。

  • 对循环变量使用 const
    • 如果循环中未修改值，使用const可以防止意外的重新赋值。

for...in循环 

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

for...in 循环会遍历对象的可枚举属性。

最佳实践 
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}

在编写 for...in 循环时，您可以考虑以下几点。

  • 过滤属性
    • 如果需要避免继承的属性，可以使用hasOwnProperty。
  • 不要在数组中使用for...in 避免在数组中使用 for...in。它可能会遍历所有可枚举属性，包括那些不是数组索引的属性。

forEach方法 

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

在遍历数组时，forEach 简洁直观，无需管理索引。

最佳实践

在使用 forEach 方法时，您可以考虑以下几点。

  • 使用箭头函数
    • 使用简洁的箭头函数以提高可读性。
  • 避免中断
    • forEach 不支持 break 或 continue。在需要时使用 for...of 或 for 循环：。

类型安全与错误预防

通过利用 TypeScript 的类型系统，可以在迭代中防止运行时错误：。

为循环变量定义严格类型 

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

通过为循环变量显式指定类型，可以及早发现类型不匹配的问题。

避免隐式的 any 

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

此外，通过在tsconfig.json中启用noImplicitAny，可以防止没有显式类型的变量被隐式分配为any类型。

在必要时使用 ReadonlyArray 

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

如果您正在迭代一个不应该被修改的数组，可以使用 ReadonlyArray。

性能考量

对于处理大型数据集或频繁执行的循环，效率至关重要：。

选择最优的循环实现方法

实现循环的方法有很多，每种方法在可读性和执行效率上都有所不同。

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

效率因执行环境而异，例如，在运行一百万次循环时，差异可能会非常明显。综合考虑可维护性和性能，选择最佳循环方法。

使用原生迭代方法 

 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]

在某些情况下，像map和filter这样的方法会更具有可读性。

为了可读性优先使用 for...of

性能优化应仅在有限的情况下被优先考虑；通常编写可读性强的代码更为重要。例如，优先使用for...of可以提高可读性。

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

通过优先使用for...of循环，您可以编写更易读且更抗错误的代码。如本例所示，如果您还需要数组索引，可以将entries()与for...of结合使用，这种方法非常有效。

避免常见陷阱

在迭代过程中修改集合 

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

在迭代过程中修改数组可能会导致意外行为：。如有必要，请使用副本。

考虑边界情况 

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

这段代码可以正常工作，但如果您需要处理空数组，可以按以下方式改进。

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}

考虑边界情况可以帮助防止后续代码中的错误。

结论

要掌握 TypeScript 中的 for 语句，理解各种循环结构、遵循类型安全实践并优化性能是至关重要的。这些最佳实践可以帮助您编写更清晰、更可靠且更易维护的代码。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

TypeScript 循环语句`truthy` 和 `falsy` 在 TypeScript 中