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)

相关推荐
ylfhpy2 分钟前
Java面试黄金宝典22
java·开发语言·算法·面试·职场和发展
sen_shan2 分钟前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
佩奇的技术笔记1 小时前
中级:Maven面试题精讲
java·面试·maven
lvbb661 小时前
框架修改思路
前端·javascript·vue.js
qq_456001651 小时前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux
雷渊1 小时前
深入分析Spring的事务隔离级别及实现原理
java·后端·面试
try again!1 小时前
rollup.js 和 webpack
开发语言·javascript·webpack
阿镇吃橙子1 小时前
一些手写及业务场景处理问题汇总
前端·算法·面试
逆袭的小黄鸭1 小时前
JavaScript:作用域与作用域链的底层逻辑
前端·javascript·面试
FanetheDivine1 小时前
实现"选中表格项将元素加入集合"的动画效果
javascript·vue.js