前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
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); });
结果：
总结
- for、for...in、forEach在处理数组时都可以获得数组下标，处理数组最好不用for...in
- 处理对象且需要拿到键首选for..in,可以获得键和值
- 只获得值首选for...of,支持类型多，语法简单，比如只要遍历拿数组的值
- forEach只在数组中有，在数组中要获得数组下标和内容且循环为数组长度可选用forEach，forEach 可以通过设定参数来存储索引下标、数据数值.这样在操作上更加的便利
前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
