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

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

我们全部以以下数组举例

var arr = [1,2,3,4,5];

for循环

for(语句 1; 语句 2; 语句 3){} ：for 循环是 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有多少成员，就会执行多少次

//遍历对象
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语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

• for...of 循环返回的（variable）是可迭代对象的元素值，类型即对应的值类型
• 可以正确响应 break、continue 和 return 语句

for(let i in arr){
  console.log(i); // 打印输出：1, 2，3，4，5
}

forEach循环

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

array.forEach(callback(currentValue, index, array) {
  // 执行针对当前元素的操作
},thisValue);

• array：要遍历的数组。
• callback：回调函数，定义要在数组的每个元素上执行的操作。
• currentValue：当前正在处理的元素。
• index：当前元素的索引。
• array：原始数组。

举例：

arr.forEach((number,i) => {
  console.log("currentValue",number);
  console.log("index",i);
});

结果：

• forEach() 本身是不支持的 continue 与 break 语句的，我们可以通过 some 和 every 来实现。使用 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)