前言
在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的遍历方式很多，但是使用起来又方便又舒适，在合适的场景选择合适的遍历方式，你会感觉事半功倍。
