比较for、for...in、for...of、forEach的区别

目录

前言

一、四种循环

1、for循环

2、for...in循环

3、for...of循环

4、forEach方法

二、比较

1、优缺点

2、总结

#前言

在比较之前我们先了解两个概念：

• 迭代（iterate），指的是按照某种顺序反复多次执行一段程序，通常会有明确的终止条件。
• 遍历（traversal），指的是按照一定的规则访问树形结构中的每个节点，而且每个节点都只访问一次。

#一、四种循环

#1、for循环

for语句是一种先测试循环语句，（即先检测退出条件，再执行循环体内的代码.)

• 语法：

for(初始化变量;条件表达式;操作表达式){

循环体语句;
       }

(1)三个表达式都可以省略,但是表达式之间的分号不能省略。都省略的话就创建了一个无穷循环。

for(;;){  //无穷循环

循环体语句

}

(2)初始化变量：给循环变量、其他变量进行初始化。

(3)条件表达式：控制循环体语句是否执行。如果只包含条件表达式for循环就变成while循环。

(4)操作表达式：使循环趋向结束的语句 。

• 用法：

(A) for循环用于遍历数组，不可直接遍历对象。(需要用Object.key()属性转化)

复制//for循环遍历数组
var arr = [1,2,3,4,5]
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);    
}

复制//for循环遍历对象
var obj = {a:1,b:2,c:3}  //对象
 
var obj2 = Object.keys(obj) //用Object.key()属性转化为数组类型
console.log(obj2);
 
for (let i = 0; i < obj2.length; i++) {
    console.log(obj2[i]+':'+obj[obj2[i]]);    
}

(B) 能使用break，continue语句跳出循环。

复制var arr = ['a','b','c','d','e']
for (let i = 0; i < arr.length; i++) {
    if(i===1){
        console.log('跳过索引为1的元素');
        continue;
    }
    console.log(arr[i]);
}

复制var arr = ['a','b','c','d','e']
for (let i = 0; i < arr.length; i++) {
    if(i===3){
        console.log('跳出循环');
        break;
    }
    console.log(arr[i]);
}

#2、for...in循环

for..in语句是一种严格的迭代语句，用于枚举对象中的非符号键属性(包括它的原型链上的可枚举属性)，我们可以简单理解为它适合遍历对象。

在这里解释一下非符号键： 不是 Symbol 的键。

在任何迭代中，键为 Symbol 都会被忽略。只能使用 Object.getOwnPropertySymbols 获取所有的 Symbol 键。

• 语法：

for(var 变量  in  数组名或集合名)  //变量中存放的数组或集合的索引
         {
            数组名[变量]
         }

• 用法：

复制var person = {name:'张三',age:22,gender:'男'}
 
for(var index in person){
    console.log(index+person[index]);
}

#3、for...of循环

for...of语句是一种严格的迭代语句，用于遍历可迭代对象的元素。

语法：

for(var 变量 of 数组名或集合名) //变量中存放的是数组或集合中的元素
         {
             console.log(变量);
         }

• 用法：

遍历数组：

复制var person = ['金','木','水','火','土']
 
for(var value of person){
    console.log(value);
    
}

遍历对象(无法直接遍历对象)：

复制var person = {name:'张三',age:22,gender:'男'}
var obj = Object.keys(person);  //for...of也不能直接遍历对象，跟for一样需要转换
for(var value of obj){
    console.log(value+person[value]);
}

#4、forEach方法

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

• 语法：

arr.forEach(function(k){  //依次从数组中取出元素放在k中,然后将k作为参数传递给函数
         console.log(k);
       })

注意: forEach() 对于空数组是不会执行回调函数的。

forEach() 本身是不支持的 continue 与 break 语句的，我们可以通过 some 和 every 来实现。

• 用法：

遍历数组：

复制var arr = ['金','木','水','火','土']
arr.forEach(function (value) {  //参数1：value---正在遍历的元素
    console.log(value);
})
 
arr.forEach(function (value,index) { //参数2：index---元素的索引
    console.log(index);
})
 
arr.forEach(function (value, index,Array) { //参数3：Array---正在遍历的数组
    console.log("Array="+arr);
})

#二、比较

#1、优缺点

for:

• 优点：程序简洁，结构清晰，循环初始化，循环变量化和循环条件位置突出。
• 缺点：结构比while循环复杂，容易出编码错误。

for...in:

• 优点：可以遍历数组的键名，遍历对象简洁方便。
• 缺点：返回可枚举的属性的顺序因浏览器而异。

for...of:

• 优点：避免了for...in的所有缺点，支持break,continue,return。支持遍历map，object,array,set string等。
• 缺点：不适用于处理原有的原生对象。

forEach:

• 优点:便利的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的效率。
• 缺点：不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据。

#2、总结

(1) for循环、for...in循环和for..of循环能中断循环(使用break,continue)；forEach不可以。

(2) for循环、for..of循环和forEach不能直接遍历对象，for...in可以。

(3) for...in遍历的是数组的索引，for...of遍历数组元素值。

(4) for...of不能循环普通的对象，需要通过和Object.keys()搭配使用。

(5) 如果for...in要迭代的变量是null或undefined,则不执行循环体。

(6) **forEach（value，index，Array）**不能同时遍历多个集合,在遍历的时候无法修改和删除集合数据。被调用时，不会改变原数组，也就是调用它的数组。

(7**)** forEach与for当循环遍历为空的数组时，forEach会跳过为空的值，for不会跳过为空的数据，会直接显示undefined。两者都能识别出NULL。