MDN学习区JavaScript循环任务解析与实现指南-优快云博客

MDN学习区JavaScript循环任务解析与实现指南

learning-area GitHub repo for the MDN Learning Area. 项目地址: https://gitcode.com/gh_mirrors/le/learning-area

前言

循环结构是JavaScript编程中的基础构建块之一，掌握不同类型的循环及其适用场景对于开发者至关重要。本文将通过MDN学习区提供的三个典型循环任务，深入浅出地讲解JavaScript中各种循环的使用方法、适用场景以及最佳实践。

任务一：使用for...of循环遍历数组

任务要求

创建一个简单的for...of循环，遍历给定的数组myArray，并将每个元素作为列表项添加到无序列表中。

实现解析

const myArray = ["西红柿", "鹰嘴豆", "洋葱", "大米", "黑豆"];
const list = document.createElement("ul");

for (let item of myArray) {
  const listItem = document.createElement("li");
  listItem.textContent = item;
  list.appendChild(listItem);
}

技术要点

for...of循环：这是ES6引入的专门用于遍历可迭代对象(如数组、字符串等)的循环结构
DOM操作：创建元素(createElement)和添加子节点(appendChild)是前端开发的基础操作
变量声明：使用let声明块级作用域的循环变量item

扩展思考

也可以使用传统的for循环实现相同功能
如果需要索引值，可以考虑使用forEach方法或for...in循环(注意for...in会遍历所有可枚举属性)
现代JavaScript中，还可以使用map方法结合模板字符串生成HTML字符串

任务二：使用for循环搜索电话簿

任务要求

给定一个名字，在电话簿数组中搜索匹配项，找到后输出联系信息并使用break终止循环；未找到则提示用户。

实现解析

const name = "张三";
const para = document.createElement("p");

const phonebook = [
  { name: "李四", number: "1549" },
  { name: "王五", number: "9634" },
  { name: "赵六", number: "9065" },
  { name: "张三", number: "6888" }
];

for (let i = 0; i < phonebook.length; i++) {
  if (phonebook[i].name === name) {
    para.textContent = `${phonebook[i].name}的电话号码是${phonebook[i].number}`;
    break;
  }

  if (i === phonebook.length - 1) {
    para.textContent = "未在电话簿中找到该联系人";
  }
}

技术要点

break语句：用于提前终止循环，提高搜索效率
数组索引访问：通过phonebook[i]访问数组元素
边界条件处理：当遍历到最后一个元素仍未找到时给出提示

性能优化

对于大型数组，可以考虑使用find方法简化代码
如果电话簿已排序，可以使用二分查找算法提高效率
在实际应用中，可能需要考虑大小写不敏感的匹配

任务三：使用do...while循环查找素数

任务要求

从500开始倒序检查每个数字是否为素数，将素数收集到段落中显示。

实现解析

let i = 500;
const para = document.createElement("p");

function isPrime(num) {
  for(let i = 2; i < num; i++) {
    if(num % i === 0) {
      return false;
    }
  }
  return num > 1;
}

do {
  if (isPrime(i)) {
    para.textContent += `${i} `;
  }
  i--;
} while (i > 1);

技术要点

do...while循环：至少执行一次循环体的循环结构
素数判断：通过试除法实现的isPrime函数
continue的隐式使用：当isPrime返回false时，自动进入下一次迭代
倒序循环：从大数向小数遍历

算法优化

素数判断可以优化为只需检查到√n即可
可以缓存已找到的素数用于加速后续判断
对于大规模素数查找，可以考虑使用筛法(如埃拉托斯特尼筛法)

循环结构对比与选择指南

| 循环类型 | 适用场景 | 特点 | 注意事项 | |---------|---------|------|---------| | for | 已知迭代次数 | 灵活控制初始化、条件和迭代 | 避免修改循环变量导致无限循环 | | for...of | 遍历可迭代对象 | 简洁，无需处理索引 | 不能直接获取索引 | | for...in | 遍历对象属性 | 遍历所有可枚举属性 | 不保证顺序，会遍历原型链属性 | | while | 条件满足时执行 | 先判断后执行 | 确保条件最终会变为false | | do...while | 至少执行一次 | 先执行后判断 | 适合需要至少执行一次的场景 |