遍历是程序中必不可少的一环,在所有语言中都存在,因为它可以简化人们的规律性操作,本文将一一道来。

for++

这是最基础的for循环语句,格式如下:

    var arr = [1, 2, 3, 4, 5]
    for (var i = 0; i < arr.length; i++) {
        console.log(i)
        if (i > 2) break
    }

也有人这样写,据说效率更高

    for (var i = 0, len = arr.length; i < len; i++) {
        console.log(i)
        if (i > 2) break
    }

while

for循环可以同时拿到每个循环的索引和数组对应的项,如果只是满足一定条件内的循环,可以使用while

    var i = 0
    while (i < 5) {
        console.log(i)
        if(i>2)break
        i++
    }

forEach, map, filter

上述方法写起来略微麻烦,所以es5新增了几个对数组的遍历方法,此外还有every,some,reduce,不过不是很常用。这几个方法会完整地遍历数组,即使在满足条件return后,循环依旧进行。
用法如下:

// forEach 直接遍历
arr.forEach((item, index) => {
        console.log(item, index)
    })
    
// map 依次遍历,对每一项进行转换,映射成另一个数组
const arr1 = arr.map((item, index) => {
        return item * 2
    })
console.log(arr1) // [2,4,6,8,10]

// filter 依次遍历,过滤得到满足条件的项,组成数组
const arr2 = arr.filter((item, index) => {
        return item % 2 == 0
    })
console.log(arr2) // [2,4]

for...of

这个是es6推荐的数组遍历方法,相比forEach,优点有2点:
1.可以使用break和continue跳出循环
2.找到满足条件的项,跳出循环后,后面的循环不会进行,从而减少内存消耗。

for (const item of arr) {
        console.log(item)
        if (item > 2) break
    }
    
// 如果要同时遍历索引和项
for (const [index, item] of arr.entries()) {
        if (index === 2) {
            console.log(item)
            break
        }
    }   

for...in

上述都是遍历数组的方法,这个是遍历对象的方法,并且最好不要混用

const obj = {
        a: 1,
        b: 2,
        c: 3
    }
for (const key in obj) {
    console.log(key, obj[key])
}

大白菜
36 声望3 粉丝