总结遍历Array的方法

前言

遍历数组的方法，你能想出来几种，今天小落落就跟你一起缕一缕，我们大前端对于遍历数组的方法。我数了一下，大概有十四种，你能想到几种？

我根据名字做个分类

遍历系列	遍历方法
`for系列`	for、for in、forEach、for of
`while系列`	while、do while
`reduce系列`	reduce、reduceRight
`find系列`	find、findIndex
`其它系列`	map、filter、some、every

for系列

1. for

这可能是我们最常用的，因为我们初学时，可能接触的就是普通的for循环,以下的书写方式
语法

for(初值;条件;步长){
  语句块
}

在for循环中，有三个语句，分别代表的含义：
语句1：定义变量最初的值，在循环开始之前执行。
语句2：定义运行循环的条件。
语句3：循环一次，变量增加或减少的量。每次循环结束后执行。

知识

for循环的三个语句条件都可可省的，如果三个条件都缺少，但是分隔符不能少。如果三个语句条件都没有，表示是一个死循环，只有在循环体内才能结束循环。
我们也称此类循环为空循环，可以用来做延迟功能。
```
    var i = 0;
    for(;;){
        if(i==4) break;
        i++;
    }
```
for循环性能优化
在使用for进行数组遍历时，可以先将数组长度进行缓存，从而减少计算长度次数。如下
```
for(var i=0,len = arr.length;i<len;i++){
    语句块
}
```

2. for in

for in 比for有了一个更强大的功能，它可以循环遍历对象，不单单遍历一个数组。

    var obj = {
      name:'test',
      age:18,
      sex:'girl'
    }
    for(var x in obj){
        console.log(`${x}:${obj[x]}`)//输出name:test,age:18,sex:girl 
    }

知识

由于for in遍历的是对象的属性（也就是key值），所以，他遍历出来的值是字符串型的，并不能直接进行数值计算。
for in 可以循环到原型链上的属性,所以尽量不使用for in遍历数组，如下

我们在数组的原型是添加了一个函数，导致，我们在遍历一个普通数组时，都会在结果处输出。
for in 只遍历可枚举类型。像Array和Object使用内置构造函数所创建的对象都会继承Object.prototype和String.prototype的不可枚举属性。例如String的indexOf()方法，或者Object的toString方法。它会遍历对象本身以及对象原型上所有的可枚举属性。

3. forEach

forEach是数组自带的一个方法，它可以不需要数组长度，开始对数组进行循环。~~~~
支持箭头函数
语法

var arr = [1,2,3,4,5];
arr.forEach((item,index)=>{
    console.log(item,index)
})

item 就是遍历的数组元素，index元素的下标

forEach与其它的for系列的使用方法不同，因为它是属于数组自带的一个方法，所以用. 点的形式调用

知识

forEach你可以认为它是一个比较执拗的方法，因为他一旦要执行，就不能被中断，break或者return语句都不能退出，它必须要执行完，才可以。且，在forEach方法中使用break会触发一个错误。

如果非要在forEach方法中使用break跳出的话，可以使用try catch捕获异常的方式。如下
不会改变原数组

4. for of

for of是ES6新增的一种遍历方式，它提供了统一的遍历机制.
语法

for(var item of arr){
    console.log(item)
}

它的语法与for in还是蛮像的，有些小伙伴这两个有时候会傻傻分不清楚，小落落也是这样的。

那这两个有什么不同呢

知识

for of 可以遍历的对象：Array、Map、Set、String、Argumentst等
for in 可遍历的对象：除Symbol以外的可枚举属性。
for of 不能遍历到原型链

while系列

1. while

语法

while(n<3){
    语句体
}

while我们可以看到，它是先判断条件的，如果条件不满足，语句体是不会被执行的。
可以使用break、continue、return终止循环。

2. do while

语法

do{
    语句体
}while(n<3)

do while与while最大的不同，就是先执行一次语句体，再去做判断。

reduce系列

哈哈哈哈哈，我觉得这个系列，属于小落落的装逼系列。因为像我这等小菜鸡，之前reduce是什么，是万万不知道的。别说还有一个reduceRight。

但其实，所有你没见过的知识，只要你去一点点的了解它，都不会那么可怕。

1. reduce

语法
array.reduce(function(total,currentvalue,currentIndex,arr),initialValue)
total:他代表了初始值，或者是计算结束后的返回值。
currentValue:表示当前的数组元素。
currentIndex:表示当前的数组元素下标。
arr:表示当前的数组。
initialValue:设置total的初始值。默认值为第一个元素的值

var arr = [1,2,3,4,5,6];
arr.reduce((total,current)=>return ,3)

2. reduceRight

reduceRight与reduce一样，唯一不同的是，reduceRight是从右往左开始计算。reduce是从左往右计算。

find系列

1. find

语法
find()方法返回数组中满足条件的第一个元素。

arr.find(callback(element, index, array){
    语句体
}, this)

用法

var arr = [1,2,3,4,54,5]
var result = arr.find((item)=>{return item>4})
result//输出54

2. findIndex

find与findIndex语法和用法都是一样的，find是查找的元素，findIndex是查找的元素位置

var arr = [1,2,3,4,54,5]
var result = arr.findIndex((item)=>{return item>4})
result//输出4

其它系列

1. map

语法
map与forEach一样，也是数组自带的方法，所以使用.点的形式调用。

arr.map(callback(element, index, array){
    语句体
}, this)

callback:表示回调函数
element：数组元素
index:元素下标
array:当前正在遍历的数组本身
this:回调的this指向
知识

不会改变原数组，但是会返回一个经过处理后的新数组。
map与forEach比较像，当使用break，continue中断循环时，会触发一个错误。

用法

var result = arr.map(function(item,index,arr){
    console.log(item)
})

2. filter

语法
filter的用法与map是一样的

arr.filter(callback(element, index, array){
    语句体
}, this)

知识*

filter不会改变原来的数组
它主要起过滤的作用。它会将满足条件的数组元素组合成一个新的数组，然后作用返回值。

用法

var result = arr.filter(function(item){
    if(item<=4){
        return item;
    }
})
//箭头函数的写法，恩~简洁
var result = arr.filter((item)=>item<=4)

3. every

语法
好巧哇，又是一样的写法

arr.every(callback(element, index, array){
    语句体
}, this)

every根据字面意思，我们可以理解为每一个。意思是说，只有数组元素中的每一个为true,结果才会为true.只要发现有一个为false,结果就是false.
知识

同样every也不会改变原数组。
如果回调函数传入的是空数组，返回值一定是false

4. some

语法
好巧哇，又双是一样的写法

arr.some(callback(element, index, array){
    语句体
}, this)

some和every在这里相当于一对反义词。some的直译过来是一些。套在这里，只要有一个为true,返回值就为true.
知识

some找到一个为true的，就会立即返回true.
some也不会改变原数组。

总结

我们总结了这么多关于遍历数组的方法，其实从用法和语法上，我们也能看能将这些方法统一归类

数组中的方法

数组中的方法		是否有返回值	返回值类型
find	查找第一个符合条件的元素	有返回值	数组元素
findIndex	查找第一个符合条件的元素位置	有返回值	数组元素下标
forEach	遍历数组	无	无
some	判断数组中是否`有`满足条件的元素	有返回值	布尔型
every	判断数组是的元素是否`都`满足条件	有返回值	布尔型
filter	过滤出来符合条件的元素	有返回值	数组
map	遍历数组元素	有返回值	数组

其它方法

其它方法	遍历类型
for	遍历数组
for in	遍历对象
for of	对象
reduce	从左到右计算数组的值
reduceRight	从右至左计算数组的值
while	先判断条件，再执行循环体
do while	先执行循环体，再判断条件

参考链接

[https://www.cnblogs.com/wangx...]
MDN