JavaScript中for、for...in、for...of与forEach循环的区别详解

普通for循环

其基本语法结构如下：

for(初始化变量; 条件表达式; 操作表达式) { 循环体语句; }

该循环结构既可用于遍历数组，也可用于遍历对象。在循环执行过程中，可以使用return、break等语句来提前终止循环。

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

//遍历对象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k=0;k<3;k++){
            console.log(obj['x'+k]);
        }

然而，在遍历对象时，该方法存在明显局限，对属性名称的获取以及索引值k的使用均有一定限制。

forEach循环

其基本语法格式为：

arr.forEach(function(k) { console.log(k); })

该机制依次从数组中提取元素赋值给变量k，并将k作为参数传递给回调函数进行处理。

.forEach()是Array原型链上的一个内置方法，专门用于遍历数组元素，它无法用于遍历对象。此外，在forEach内部无法使用break语句跳出循环，也不能通过return从外部函数返回结果。

//遍历数组
        var arr = [3,2,3,9,5];
         arr.forEach(function(value,arr){
            console.log(value);
         })

for...in循环

其基本语法格式如下：

for(var 变量 in 数组名或集合名) { 数组名[变量] }

循环变量中存储的是数组或集合的索引值。

 //遍历数组
        var arr = [1,2,3,4,5];
        for(var i in arr){
            console.log(arr[i]);
        }

//遍历对象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k in obj){
            console.log(obj[k]);
        }

需要注意的是，索引值的数据类型可能是字符串（String）。

该循环不仅会遍历数组中的元素，还会遍历任意自定义添加的属性。例如，若对象obj包含自定义属性obj.name，则此次循环也会遍历到该name属性。

在某些特定情况下，上述代码可能会以随机顺序遍历数组元素。

for-in循环的设计初衷是用于遍历以字符串为键值的普通对象，而非专门用于数组遍历。

for...of循环

其基本语法格式为：

for(var 变量 of 数组名或集合名) { console.log(变量); }

循环变量中存储的是数组或集合中的具体元素值。

 //遍历数组
         var arr = [3,2,3,9,5];
         for(var value of arr){
            console.log(value);
         }

//遍历对象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k of Object.entries(obj)){
            console.log(k);
        }

entries()方法返回一个数组的迭代器对象，该对象包含数组的键值对（key/value）。

在返回的迭代器对象中，数组的索引值作为key，数组元素作为value。

使用for...of可以完全避免for...in循环中出现的各种陷阱。

与forEach不同，for...of循环支持使用break、continue和return语句。

for...of循环不仅支持数组遍历，同样适用于许多类数组对象。

该循环也支持对字符串进行遍历操作。

需要注意的是，for...of并不直接适用于处理原有的原生普通对象。

总结

1. 'for...in'用于迭代对象的所有'可枚举'属性，包括继承的可枚举属性。该语句可用于数组、字符串或普通对象，但不能直接用于Map或Set对象。

2. 'for...of'用于'可迭代'对象，迭代的是其值而非属性。该语句可以与数组、字符串、Map或Set对象配合使用，但不能与普通对象直接一起使用。

到此这篇关于JS中for,for...in,for...of和forEach的区别和用法的文章就介绍到这了，更多相关JS中for,for...in,for...of,forEach区别内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！