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

目录

一、for

二、for…in

三、for…of

四、forEach

五、小结

---

一、for

最原始的方法，用来遍历数组。

优点：最原始，最容易理解，用continue和break等语句可以进行中断。

缺点：结构比while循环复杂，容易出编码错误。

例：

//遍历数组

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

for(var i=0;i<arr.length;i++){

    console.log(arr[i]);

}

//遍历结果是1 2 3 4

二、for…in

用来遍历数组索引、对象的属性。代码每执行一次，就会对数组的元素或对象的属性进行一次操作。

优点：可以遍历数组的索引（键名），遍历对象简洁方便；

缺点：某些情况下，会出现随机顺序的遍历，导致开销较大。

例：

// 遍历数组

var arr1 = [1,2,3,4];

for(var i in arr1){

    console.log(arr1[i]);

}

//输出结果是1 2 3 4

// 遍历对象

var obj = {name:"小明",age:18,sex:"男"};

for(var i in obj){

    console.log(obj[i]);

}

//输出结果是：小明 18 男

三、for…of

用来遍历数组的数据，例如数组中的元素值。

优点：避免了for in的所有缺点；

  可以使用break、continue和return语句中断；

  不仅支持数组的遍历，还可以遍历类似的数组对象，但不可以直接遍历对象，支持字符串的遍历；

缺点：不适合处理原有的原生对象（原生对象是一个子集，包含一些在运动过程中动态创建的对象）。

例：

//遍历数组

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

for(var i of arr){

    console.log(i);

}

//输出结果是1 2 3 4

四、forEach

用来调用数组的每个元素，并将元素传递给回调函数。

优点：写法简洁，效率和for循环相同；

缺点：每次循环实际上是一个回调函数，因此在函数内部不能使用break、continue语句跳出循环；

  不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据。

例：

//遍历数组

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

arr.forEach(function(value,index,arr){

    console.log(value);

})

//输出结果是1 2 3 4

//尝试遍历对象

var obj = {a:1,b:2,c:3,d:4};

obj.forEach(function(value,index,obj){

    console.log(value);

})

//输出结果是obj.forEach is not a function

//因此forEach不能遍历对象。

五、小结

1、for、for…of、forEach这三种遍历方法不能遍历对象，可以使用for…in循环或者通过把对象转化成数组类型（用Object.keys()）来遍历对象。

2、for…in遍历的是数组的索引（键名），for…of遍历的是数组的元素值。

3、for…in大部分时候用于遍历对象。

4、forEach(value,index,array)不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据。

5、for循环可以使用return、break等来中断；for…of能使用break、continue和return语句中断，而forEach不能使用break、continue语句跳出循环。