Javascript中的8种遍历方法，以及他们的具体用途

ゞ浴缸里的玫瑰 2022-12-29 09:25 49阅读 0赞

> 首先讲一下用途，一般需求也就是遍历遍历数组，对象，下面正题开始。

## 1. 普通for循环以及其升级版 ##

这种没啥好说的，比较常用，但是没法直接遍历对象

var arr = [1, 2, 3]
    for(var i = 0; i < arr.length; i++) { 	//普通for循环
        console.log(arr[i]); // 1, 2, 3
    };

这种for循环升级版基本就是所有循环当中性能最高的了，因为保存了数组的长度，所以不需要每次循环都去获取数组长度

var arr = [1, 2, 3]
    for(var i = 0,len = arr.length; i < len; i++) {  //升级版
        console.log(arr[i]); // 1, 2, 3
    };

--------------------

## 2.for of 循环（支持远古IE浏览器） ##

比for循环方便了点

var arr = [1, 2, 3]
    for(var item of arr) {  // item代表数组里面的元素
        console.log(item); // 1, 2, 3
    };

--------------------

## 3.forEach ##

forEach循环遍历数组和for of一样省去了自己定义下标，直接填参数就行了，也属于躺着吃饭。比较人性化XD，但是也不能直接遍历对象，和上述两个一样都是需要Object.keys(obj)获取属性名后遍历，值得注意的是forEach不能中断(break，return) 或 跳过本次循环(continue)，使用时需注意场景。

//遍历数组
    var arr = [1, 2, 3];
    arr.forEach((item, index, arr) => {  // item=值，index=下标，arr=数组
        console.log(item); // 1, 2, 3
        console.log(index); // 0, 1, 2
        console.log(arr); // [1, 2, 3] x 3
    });

## 4.some循环 ##

和forEach不同的是some循环是专门用来做数组条件匹配的，如果其中一个item等于2的话就会返回一个true，如果其中一个item等于2那直接返回true。

var arr = [1,2,3]
    var bool = arr.some((item,index,arr)=>{ 
        return item == 2
    })
    console.log(bool) //true

--------------------

## 5.every循环 ##

这个和some就类似，some是判断一个，every是判断所有的参数是否满足条件，满足才会返回true，检测到一个不满足就会直接返回false。

> some和every有点像 逻辑与 和 逻辑非的意思

var arr = [1,2,3]
    var bool = arr.every((item,index,arr)=>{ 
        return item != 4
    })
    console.log(bool) //true

--------------------

## 6.for in 循环 ##

for in一般是用来遍历对象的，建议不要用来遍历数组得不偿失，for循环，for of，forEach这些不香吗XD。

var obj = { a:1,b:2,c:3}
    for(var item in obj) { 
        console.log(item); // a,b,c
        console.log(arr[item]) //1,2,3
    };