-数组的遍历)
点此查看所有教程、项目、源码导航文章目录1. 背景2. 基础方案for 循环遍历数组3. 简洁方案for...of 遍历数组4. 实战案例遍历数组做累加求和5. 两种遍历方式对比6. 小结1. 背景上一篇我们认识了数组知道可以通过下标读取数组里的单个元素。如果数组里面只有 2、3 个数据我们直接写arr[0]、arr[1]这种方式读取完全没问题。但如果数组存放的是全班几十个学生成绩、上百条商品数据我们不可能一行行手动去写。数组最核心的用法就是批量处理数据想要批量读取、计算、过滤数组元素就需要遍历。遍历简单说就是把数组里面每一个元素从头到尾挨个访问一遍。结合上一篇讲的内存模型遍历本质就是从下标 0 开始不断增加偏移量依次取出内存中每一个位置的数据。2. 基础方案for 循环遍历数组我们已经知道数组下标从 0 开始最后一个元素下标是数组.length - 1正好可以利用 for 循环让循环变量充当数组下标。// 成绩数组letscoreArr[88,92,76,95,81];// i 就是下标从0开始for(leti0;iscoreArr.length;i){console.log(下标,i,成绩,scoreArr[i]);}执行逻辑拆解初始化i 0对应第一个元素下标判断i scoreArr.length满足条件就执行循环体在循环内部通过scoreArr[i]获取当前下标对应的元素执行i下标偏移量 1访问下一块内存位置的数据当 i 等于数组 length 时条件不成立循环结束遍历完成。for 循环遍历的优势灵活性很高。我们可以在遍历过程中做判断、跳过某些元素、提前终止遍历正好用上之前学的break和continue。需求示例遍历成绩打印所有分数遇到不及格小于 60 分就跳过找到 100 分直接停止遍历letscoreArr[88,55,92,100,76];for(leti0;iscoreArr.length;i){letscorescoreArr[i];if(score60){continue;// 不及格跳过本次输出}if(score100){console.log(找到满分停止遍历);break;// 找到满分直接结束遍历}console.log(score);}3. 简洁方案for…of 遍历数组ES6 提供了for...of语法专门用来遍历数组写法更简洁。注意for…of 拿到的直接是数组元素本身不是下标。letscoreArr[88,92,76,95,81];for(letitemofscoreArr){console.log(item);}什么时候适合用 for…of只需要读取元素内容不需要使用下标的时候优先用它代码清爽。它同样支持 break、continueletscoreArr[88,55,92,76];for(letitemofscoreArr){if(item60){continue;}console.log(item);}⚠️ 一个明显短板for...of不能直接拿到下标。如果业务里需要用到下标优先选择普通 for 循环。4. 实战案例遍历数组做累加求和需求计算数组里面所有成绩的总分letscoreArr[88,92,76,95,81];letsum0;for(leti0;iscoreArr.length;i){sumsumscoreArr[i];}console.log(总分,sum);原理循环每一次取出一个成绩不断叠加到 sum 变量中遍历结束求和完成。5. 两种遍历方式对比普通 for 循环可以拿到下标自由度最高可以灵活控制起始位置、步长、配合 break/continue适合大部分业务计算for…of写法简单只能直接拿到元素拿不到下标适合单纯从头到尾读取所有元素。补充JS 还有 forEach 方法我们放到后面数组方法章节再学习现阶段先掌握循环遍历巩固前面循环的知识点。6. 小结数组遍历就是依次访问数组中每一个元素本质是下标偏移量不断自增for 循环遍历循环变量充当下标功能灵活支持下标操作for…of 遍历简洁直接获取元素无法直接拿到下标遍历过程可以结合 break 提前结束遍历、continue 跳过本次元素实现数据过滤遍历是数组所有高级操作的基础求和、找最大值、过滤数据都离不开遍历。
