js中 for、forEach、for...in、for...of循环的区别和使用

js中 for、forEach、for...in、for...of循环的区别

我们全部以以下数组举例

js 复制代码
var arr = [1,2,3,4,5];

for循环

for(语句 1; 语句 2; 语句 3){}for 循环是 Js 中最常用的一个遍历方式,经常用于数组的循环遍历,可以遍历字符串、数组、类数组对象,但不可以遍历对象

js 复制代码
for (var i = 0; i < arr.length; i++){ 
    console.log(arr[i]); 
}
//控制台依次打印1 2 3 4 5
  • for循环中,可以用break终止全部循环,用continue跳出一层循环

for...in循环

for (key in object){}for...in 属于 JavaScript 中的循环结构,是 for 循环的两种变体,但是for...in循环可以遍历对象

  • for..in循环不适合遍历数组,因为for...in 循环的遍历顺序是不确定的,可能会出错
  • for...in 循环返回的(key)是每个属性的键名(属性名),类型即字符串类型。
  • object有多少成员,就会执行多少次
js 复制代码
//遍历对象
const obj = { a: 1, b: 2, c: 3 };
for (const x in obj) {
  console.log(x); // 打印输出:a, b, c
  console.log(obj[x])//打印输出:1,2,3
}
//遍历数组
for(let i in arr){
  console.log(i); // 打印输出:0, 1, 2,3,4
  console.log(arr[i])//打印输出:1,2,3,4,5
}

for...of循环

-for (variable of iterable){}for...of 循环返回的是可迭代对象的元素值,即对应的值类型for...of语句在可迭代对象(包括 ArrayMapSetStringTypedArrayarguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句

  • for...of 循环返回的(variable)是可迭代对象的元素值,类型即对应的值类型
  • 可以正确响应 break、continue 和 return 语句
js 复制代码
for(let i in arr){
  console.log(i); // 打印输出:1, 2,3,4,5
}

forEach循环

forEach循环是js数组的一个内置循环方法,它提供了一种简洁的方式来遍历数组的每个元素,并对每个元素执行指定的操作,它提供了一种简洁的方式来遍历数组的每个元素,并对每个元素执行指定的操作

js 复制代码
array.forEach(callback(currentValue, index, array) {
  // 执行针对当前元素的操作
},thisValue);
  • array:要遍历的数组。
  • callback:回调函数,定义要在数组的每个元素上执行的操作。
  • currentValue:当前正在处理的元素。
  • index:当前元素的索引。
  • array:原始数组。

举例:

js 复制代码
arr.forEach((number,i) => {
  console.log("currentValue",number);
  console.log("index",i);
});

结果:

  • forEach() 本身是不支持的 continue 与 break 语句的,我们可以通过 someevery 来实现。使用 return 语句实现 continue 关键字的效果:

总结

  • for、for...in、forEach在处理数组时都可以获得数组下标,处理数组最好不用数组
  • 处理对象且需要拿到键首选for..in,可以获得键和值
  • 只获得值首选for...of,支持类型多,语法简单,比如只要遍历拿数组的值
  • 在数组中要获得数组下标和内容且循环为数组长度可选用forEach,forEach 可以通过设定参数来存储索引下标、数据数值.这样在操作上更加的便利

参考资料

JavaScript For 循环 (w3school.com.cn)
JavaScript For In (w3school.com.cn)
JavaScript For Of (w3school.com.cn)
for...of - JavaScript | MDN (mozilla.org)
【JS】for、for-in、for-of 循环的区别_js for i--_一颗不甘坠落的流星的博客-CSDN博客
for循环和forEach的区别,看着一篇就够了! - 知乎 (zhihu.com)
JavaScript forEach() 方法 | 菜鸟教程 (runoob.com)
javascript中的for、for-in、for-of、forEach的区别 - 知乎 (zhihu.com)
for 循环 (JavaScript 中的12种循环遍历方法【总结】)_js for 遍历_林间风雨的博客-CSDN博客
for循环和forEach的区别,看着一篇就够了! - 知乎 (zhihu.com)

相关推荐
闭着眼睛学算法1 分钟前
【双机位A卷】华为OD笔试之【模拟】双机位A-新学校选址【Py/Java/C++/C/JS/Go六种语言】【欧弟算法】全网注释最详细分类最全的华子OD真题题解
java·c语言·javascript·c++·python·算法·华为od
晴殇i24 分钟前
为什么现代 JavaScript 代码规范开始建议禁止使用 else ?
前端·javascript·前端框架
源力祁老师29 分钟前
OWL与VUE3 的高级组件通信全解析
前端·javascript·vue.js
护国神蛙38 分钟前
自动翻译插件中的智能字符串切割方案
前端·javascript·babel
PaytonD1 小时前
LoopBack 2 如何设置静态资源缓存时间
前端·javascript·node.js
snow@li1 小时前
d3.js:学习积累
开发语言·前端·javascript
编程岁月1 小时前
java面试-0203-java集合并发修改异常、快速/安全失败原理、解决方法?
java·开发语言·面试
一枚前端小能手1 小时前
🚀 巨型列表渲染卡顿?这几个优化技巧让你的页面丝滑如德芙
前端·javascript
酷柚易汛智推官1 小时前
Electron技术深度解析:跨平台桌面开发的利器与挑战
前端·javascript·electron
llz_1121 小时前
第五周作业(JavaScript)
开发语言·前端·javascript