總結遍歷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(語句1;語句2;語句3){
  語句塊
}

在for循環中，有三個語句，分別代表的含義：
語句1：定義變量最初的值，在循環開始之前執行。
語句2：變量結束時的值，也就是運行循環的條件。
語句3：循環一次，變量增加或減少的量。每次循環結束後執行。

知識

1. for循環的三個語句條件都可可省的，如果三個條件都缺少，但是分隔符不能少。如果三個語句條件都沒有，表示是一個死循環，只有在循環體內才能結束循環。
   我們也稱此類循環爲空循環，可以用來做延遲功能。

       var i = 0;
       for(;;){
           if(i==4) break;
           i++;
       }

2. 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 
    }

知識

1. 由於for in遍歷的是對象的屬性，所以，他遍歷出來的值是字符串型的，並不能直接進行數值計算。
2. for in 可以循環到原型鏈上的屬性,所以儘量不使用for in遍歷數組，如下
   
   我們在數組的原型是添加了一個函數，導致，我們在遍歷一個普通數組時，都會在結果處輸出。
3. 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系列的使用方法不同，因爲它是屬於數組自帶的一個方法，所以用. 點的形式調用

知識

1. forEach你可以認爲它是一個比較執拗的方法，因爲他一旦要執行，就不能被中斷，break或者return語句都不能退出，它必須要執行完，纔可以。且，在forEach方法中使用break會報錯。
2. 不會改變原數組

4. for of

for of是ES6新增的一種遍歷方式，它提供了統一的遍歷機制.
語法

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

它的語法與for in還是蠻像的，有些小夥伴這兩個有時候會傻傻分不清楚，小落落也是這樣的。

那這兩個有什麼不同呢

知識

1. for of 可以遍歷的對象：Array、Map、Set、String、Argumentst等

   for in 可遍歷的對象：除Symbol以外的可枚舉屬性。

2. for of 不能遍歷到原型鏈
3. for of 可以使用break、continue、return終止循環遍歷。

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的初始值。默認值爲1

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,index,arr)item>4)
result//輸出54

2. findIndex

find與findIndex語法和用法都是一樣的，find是查找的元素，findIndex是查找的元素位置

var arr = [1,2,3,4,54,5]
var result = arr.findIndex((item,index,arr)item>4)
result//輸出4

其它系列

1. map

語法
map與forEach一樣，也是數組自帶的方法，所以使用.點的形式調用。

arr.map(callback(element, index, array){
    語句體
}, this)

callback 表示回調函數
element：數組元素
index:元素下標
array:當前正在遍歷的數組本身
this:回調的this指向
知識

1. 不會改變原數組，但是會返回一個經過處理後的新數組。
2. map中可以使用return終止循環

用法

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

2. filter

語法
filter的用法與map是一樣的

arr.filter(callback(element, index, array){
    語句體
}, this)

知識*

1. filter不會改變原來的數組
2. 它主要起過濾的作用。它會將滿足條件的數組元素組合成一個新的數組，然後作用返回值。

用法

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.
知識

1. 同樣every也不會改變原數組。
2. 如果回調函數傳入的是空數組，返回值一定是false

4. some

語法
好巧哇，又雙是一樣的寫法

arr.some(callback(element, index, array){
    語句體
}, this)

some和every在這裏相當於一對反義詞。some的直譯過來是一些。套在這裏，只要有一個爲true,返回值就爲true.
知識

1. some找到一個爲true的，就會立即返回true.
2. some也不會改變原數組。

總結

我們總結了這麼多關於遍歷數組的方法，其實從用法和語法上，我們也能看能將這些方法統一歸類

數組中的方法

數組中的方法		是否有返回值	返回值類型
find	查找第一個符合條件的元素	有返回值	數組元素
findIndex	查找第一個符合條件的元素位置	有返回值	數值
forEach	遍歷數組	有返回值	數組
some	判斷數組中是否有滿足條件的元素	有返回值	布爾型
every	判斷數組是的元素是否都滿足條件	有返回值	布爾型
filter	過濾出來符合條件的元素	有返回值	數組
map	遍歷數組元素	有返回值	數組

其它方法

其它方法	遍歷類型
for	遍歷數組
for in	遍歷對象
for of	對象
reduce	從左到右計算數組的值
reduceRight	從右至左計算數組的值
while	先判斷條件，再執行循環體
do while	先執行循環體，再判斷條件

參考鏈接

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