关于JS循环遍历的汇总
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/61615347
关于JS循环遍历
写下这篇文章的目的，主要是想总结一下关于JS对于集合对象遍历的方式方法，以及在实际应用场景中怎样去使用它们。本文会主要介绍：while,for,forEach,every,some,filter,reduce,map,indexOf…
while/do while
while、do while主要的功能是，当满足while后边所跟的条件时，来执行相关业务。这两个的区别是，while会先判断是否满足条件，然后再去执行花括号里面的任务，而do while则是先执行一次花括号中的任务，再去执行while条件，判断下次还是否再去执行do里面的操作。也就是说 do while至少会执行一次操作，生产中这个就可能用的比较少了，因为他与接下来要讲的for循环相比，个人觉得可读性上差了一点。
while(条件){
执行...
}
------------
do{
执行...
}
while(条件)for
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}- 语句 1 在循环（代码块）开始前执行
- 语句 2 定义运行循环（代码块）的条件
- 语句 3 在循环（代码块）已被执行之后执行
这个就不赘述了，也比较好理解，主要聊一下for…in/for…of这两个东西。
for…in
for…in的作用主要是去遍历对象的可枚举属性。即
var foo = {
name: 'bar',
sex: 'male'
}
Object.defineProperty(foo, "age", { value : 18})
for(var a in foo){
console.log(`可枚举属性：${a}`)
}
console.log(`age属性：${foo.age}`)因为Object.defineProperty，建立的属性，默认不可枚举，因此在浏览器中打印的结果为：
在JS当中，数组也算作对象，但一般不推荐把for…in用在数组遍历上面，如果for…in普通数组的话，a返回数组的索引。
for…of
for…of是ES6新增的方法，主要作用是用来遍历具有iterator接口的数据集合，除了ES5的Array，还有ES6新增的Map,Set等，但是for…of不能去遍历普通的对象（普通对象不具备iterator接口），如果想去遍历普通对象，可以使用generator函数去给普通对象先生成iterator接口。for…of的好处是可以使用break跳出循环。
every/some
返回一个布尔值。当我们需要判定数组中的元素是否满足某些条件时，可以使用every/some。这两个的区别是，every会去判断判断数组中的每一项，而some则是当某一项满足条件时返回。例如：
let foo=[5,1,3,7,4].every(function (item,index) {
console.log(`索引：${index}，数值：${item}`)
return item>2
})
console.log(foo)打印结果为：
当第二项不满足条件式跳出循环，返回false。
let foo=[5,1,3,7,4].some(function (item,index) {
console.log(`索引：${index}，数值：${item}`)
return item>2
})
console.log(foo)打印结果为：
当数组的某项满足条件时跳出循环，返回true. 在按照约定条件筛选数组时，every/some是非常方便的方法。
filter
筛选出一个满足相关条件的新数组。
let foo=[5,1,3,7,4].filter(function (item,index) {
console.log(`索引：${index}，数值：${item}`)
return item>2
})
console.log(foo)
将满足返回值条件的item组成一个新的数组。过滤器，顾名思义，比较好理解。在按照约定条件筛选数组元素时，filter比较方便。filter() 不会改变原始数组。
map
let foo=[5,1,3,7,4].map(function (item,index) {
console.log(`索引：${index}，数值：${item}`)
return item+2
})
console.log(foo)
返回一个将每个元素进行“二次加工”的新数组，map与filter都是返回一个新的数组，区别则是filter是将原数组，通过相关条件筛选出合法的item，来组成一个新的数组，而map则是将每个item通过再加工来返回一个新的数组。
reduce
将数组元素做“叠加”处理，返回一个值。
let foo=[5,1,3,7,4].reduce(function (pre,cur) {
console.log(`索引：${pre}，数值：${cur}`)
return pre+cur
})
console.log(foo)打印结果为：
pre为累加值，cur为当前值。reduce函数值得注意的是，reduce(fn,init)第二个参数，可以传一个初始值，如果代码改成这样：
let foo=[5,1,3,7,4].reduce(function (pre,cur) {
console.log(`索引：${pre}，数值：${cur}`)
return pre+cur
},'')
console.log(foo)则为：
indexOf
返回指定字符串首次出现的位置
let foo=['57','17','37','7','4'].indexOf('7')
console.log(foo)
这个函数比较常用的应用场景是，在做if判断时，可以代替||，&&等关系符。比如：
可以代替 if（value==’next’||value==’pre’）的这种写法，当判断元素较多时，这种写法比较划算。
总结
个人非常喜欢filter/map/reduce，但是看到身边的同学一言不合就foreach,替这三个函数心疼几秒。。。不过低版本浏览器也确实不支持这些函数。。。根据自己需要去选择合适的遍历方式可以大大提升效率。哦耶