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)

相关推荐
web守墓人42 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
追逐时光者9 小时前
面试第一步,先准备一份简洁、优雅的简历模板!
后端·面试
DoraBigHead9 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界10 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser10 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app