JS遍历

前言

在js开发中，我们常常会遍历对象和数组来达到求和、过滤的过程。虽然开发中for可以解决所有场景，但是如果你只会for，你就太low，因为js的循环多达11种，而且每种遍历的使用场景、遍历效率都不尽相同，

js循环遍历

通用遍历场景

一、for循环

for是循环使用场景是最多的，也是最全面，几乎所有的需要遍历的功能，都可以通过for去实现。

let arr = [1, 2, 3]
for (let index = 0; index < arr.length; index++) {
    const element = arr[index];
    /**
     * 代码
    */
}

使用场景：数组遍历

优点：

可以使用break、 continue 控制循环
在和let配合使用时，可以不使用闭包就形成块作用域

缺点：

语法太麻烦，要时刻关注index索引的改变

二、for in循环

for in 用来循环遍历当前对象（数组）可枚举的属性，更适合遍历数组，因为for in不是根据索引遍历，而是根据键名遍历的。

let obj = {
    name: '李白',
    ago: 18
}
for (const key in obj) {
    if (obj.hasOwnProperty(key)) { //判断当前对象是否来自于原型链
        const element = obj[key];
    }
}

使用场景：对象遍历

优点：

在和let配合使用时，可以不使用闭包就形成块作用域
可以使用break、 continue 控制循环

缺点：

来自原型继承的属性也会遍历出来，出现很多不需要的属性
按照随机顺序遍历数组元素

三、for of遍历

ES6新出语法，如果根据遍历方式来描述，那么for of可以叫迭代器遍历，因为for of只能对迭代器遍历。在ES6中数组、Map、Set都存在迭代器（暂时先不讲），知道for of可以遍历数组、Map、Set就可以了。

let map = new Map([['name', '李白'], ['age', 18]])
for (var [key, val] of map) {
    console.log(key, val)
}

使用场景：数组、Map、Set

优点：

在和let配合使用时，可以不使用闭包就形成块作用域
可以使用break、 continue 控制循环
不存在了for in的缺点

缺点：

对于对象的遍历不支持（可以通过其他手段）

四、forEach循环

forEach 作为Array自带的遍历方法，要元素给元素，要下标给下标，但是你想在遍历的时候中断遍历那么抱歉不行。

let arr = [1, 2, 3]
arr.forEach(function(item){
})

使用场景：数组遍历

优点：

写法简便，不需要考虑index索引的变化

缺点：

不能在运行时中断循环

特殊遍历场景（数组自带的方法）

五、map映射

通过遍历老数组，对每个元素进行处理，然后根据函数的返回值生成一个新的数组。就和一次函数x->y的过程一样。但是不会改变老数组。

let arr = [1, 2, 3]
let arr2 = arr.map(function (item) {
    return item + 1
})
console.log(arr2)  //[ 2, 3, 4 ]

使用场景：数组遍历,老数组通过某个算法生成新的数组

缺点：

不能在运行时中断循环，老数组多少数据新数组就多少

六、 filter过滤器

有时候我们会排除数组中某些不要的元素，比如去除元素中非1的元素。遍历一个数组，如果函数返回值为true就保存该元素到新数组，否则就不保存。

let arr = [1, 2, 3, 1]
let arr2 = arr.filter(function (item) {
    return item == 1
})
console.log(arr2) //[ 1, 1 ]

使用场景：老数组通过某个逻辑判断，保存需要的值，去除不要的值，生成新的数组

缺点：

不能在运行时中断循环

七、 find寻找元素

寻找一个数组中我们需要的元素，返回true就中止循环，并且就得到该元素，如果没有找到就返回undefined

let arr = ['杜甫', '白居易', '李白']
let name = arr.find(function (item) {
    return item == '李1白'
})
console.log(name)

使用场景：根据自己的需求，从一个数组中挑选自己想要的元素

缺点：

不能拿到元素索引

八、findIndex寻找索引

find虽然能够找到元素，但是无法提供索引，在我们进行数组的splice删除方法时无法操作。那么findIndex就解决了问题，对数组遍历，返回true就中止循环，得到当前元素的数组索引，如果没有一直没有返回true，就返回-1

let arr = ['杜甫', '白居易', '李白']
let nameId = arr.findIndex(function (item) {
    return item == '李白'
})
if (nameId != -1) {
    arr.splice(nameId, 1)
    console.log(arr)  //[ '杜甫', '白居易' ]
}

使用场景：根据自己的需求，从一个数组中挑选自己想要元素的索引

九、reduce（看个人能力，因为不容易理解，并且变化多样，很多大佬很看重他）

reduce像一个可扩展的map函数，但是map只可以返回一个数组，但是reduce可以是数组，也可以是值，通过数组的每个元素获取一个期望。就比如求和，根据所有值计算一个和的期望

let arr = [1, 2, 3, 4, 5]
/**
 * 第一个参数：迭代的方法
 * 第二个参数：迭代期望的初始值
 */
let sum = arr.reduce(function (prev, cur, index, arr) {
    /**
     * prev:迭代元素的期望
     * cur:当前迭代的值
     * index:当前一项的下标
     * arr:迭代的原数组
     */
    return prev + cur
}, 0)
console.log(sum)

使用场景：数组求和、数组降维

十、some（了解）

some遍历数组，找到true，即返回true。查看数组中是否有真的存在。

let arr = ['杜甫', '白居易', '李白']
let hasName = arr.some(function (item) {
    return item == '李白'
})
console.log(hasName)  //true

使用场景：查看数组中是否有一个元素符合要求，有真即真

十一、every（了解）

every遍历数组，找到false，即返回false。查看数组中是否全部为真。和some刚好相反，必须数组元素中全部为真才会返回真，

let arr = ['李白', '李白', '李白']
let hasName = arr.every(function (item) {
    return item == '李白'
})
console.log(hasName)

使用场景：查看数组是否全部全部为真。有假即假

总结

虽然js的遍历方式很多，但是使用起来又方便又舒适，在合适的场景选择合适的遍历方式，你会感觉事半功倍。

前言