一文彻底搞明白HarmonyOS NEXT基础之TypeScript中的所有循环语句

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长嵌入式、鸿蒙、人工智能、Java等,专注于程序员成长那点儿事,希望在成长的路上有我相伴！君志所向,一往无前！

---

循环语句是通过 for、while、do...while 等结构，根据条件重复执行代码块，支持遍历数组（如 for...of）、对象属性（如 for...in），并通过 break/continue 控制循环终止或跳过迭代。

就像用不同工具（循环语句）反复做同一件事（执行代码），比如数数用 for、不确定次数用 while、先做一次再用 do...while，还能用 for...of 遍历数组里的每个元素，或者用 for...in 查对象里的每个属性，中途还能随时喊停（break）或跳过某次（continue）。

一、基础循环结构

1. for 循环

语法：

for (初始化表达式; 条件表达式; 增量表达式) {
  // 循环体
}

初始化 ：在循环前执行一次（如 let i = 0）；

条件 ：每次循环前检查，若为 true 则继续（如 i < 10）； • 增量 ：每次循环后执行（如 i++）。

• 示例：计算 1 到 10 的和

let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;
}
console.log(sum); // 输出 55

适用场景：已知循环次数的场景（如遍历数组）。

2. while 循环

• 语法：

while (条件表达式) {
  // 循环体
}

• 特点：先判断条件再执行循环体，可能一次都不执行。

• 示例：输出 1 到 5

let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}

• 适用场景：不确定循环次数但需持续执行（如等待用户输入）。

3. do...while 循环

• 语法：

do {
  // 循环体
} while (条件表达式);

• 特点：至少执行一次循环体，再判断条件。

• 示例：计算 1 到 5 的和

let sum = 0, i = 1;
do {
  sum += i;
  i++;
} while (i <= 5);
console.log(sum); // 输出 15

• 适用场景：必须至少执行一次的场景（如初始化校验）。

---

二、遍历型循环

1. for...in 循环

• 语法：

for (const key in 对象) {
  // 处理 key
}

• 用途：遍历对象的可枚举属性（包括原型链上的属性）。

• 示例：遍历对象属性

const obj = { a: 1, b: 2 };
for (const key in obj) {
  if (obj.hasOwnProperty(key)) { // 过滤原型链属性
    console.log(`${key}: ${obj[key]}`);
  }
}

• 注意事项 ：

◦ 需用 hasOwnProperty 过滤非自有属性； ◦ 不推荐遍历数组（会包含索引外的其他属性）。

2. for...of 循环

• 语法：

for (const item of 可迭代对象) {
  // 处理 item
}

• 用途：遍历可迭代对象（数组、字符串、Map、Set 等）。

• 示例：遍历数组

const arr = [1, "text", false];
for (const item of arr) {
  console.log(item); // 输出 1, "text", false
}

• 优势 ：

◦ 代码简洁，无需手动控制索引； ◦ 支持异步迭代（结合 for await...of）。

---

三、高阶循环控制

1. 循环控制语句

• break：立即终止循环

for (let i = 0; i < 10; i++) {
  if (i === 5) break; // 循环终止于 i=5
}

• continue：跳过当前迭代

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // 仅处理奇数
  console.log(i);
}

2. 数组高阶方法

• forEach：遍历数组元素

[1, 2, 3].forEach((value, index) => {
  console.log(`元素 ${value} 的索引是 ${index}`);
});

• every 与 some：条件判断

const allEven = [2, 4, 6].every(num => num % 2 === 0); // true
const hasEven = [1, 3, 4].some(num => num % 2 === 0);  // true

---

四、性能与优化

1. 性能对比

• 普通 for 循环：直接操作索引，性能略优（适合大数据量）；
• for...of 循环：简洁但引入迭代器，轻微（可忽略）。

2. 优化技巧

• 减少计算：在循环外缓存数组长度；
• 避免 DOM 操作：批量处理后再更新 DOM；
• 类型安全 ：使用 keyof 限定 for...in 的键类型。

---

五、注意事项

1. 无限循环 ：确保条件最终为 false，如 while (true) 需有退出机制；
2. 索引越界 ：避免 for 循环中的越界访问（如 i <= arr.length 应为 <）；
3. 异步处理 ：在循环中使用 async/await 时需注意执行顺序。

---

六、总结

TypeScript 提供了丰富的循环结构，涵盖从基础的 for/while 到高级的 for 和数组方法。选择循环类型时需考虑：

• 数据遍历 ：优先 for...of 或 forEach；
• 性能敏感场景 ：使用普通 for 循环；
• 对象属性遍历 ：for...in 配合 hasOwnProperty。

通过合理选择循环结构及控制语句，可显著提升代码可读性与执行效率。

好啦，就到这里啦，大家好好休息，明天周一，继续努力哈！