前言
遍歷數組的方法,你能想出來幾種,今天小落落就跟你一起縷一縷,我們大前端對於遍歷數組的方法。我數了一下,大概有十四種,你能想到幾種?
我根據名字做個分類
遍歷系列 | 遍歷方法 |
---|---|
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:循環一次,變量增加或減少的量。每次循環結束後執行。
知識
-
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遍歷的是對象的屬性,所以,他遍歷出來的值是字符串型的,並不能直接進行數值計算。
- 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會報錯。 - 不會改變原數組
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 不能遍歷到原型鏈
- 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指向
知識
- 不會改變原數組,但是會返回一個經過處理後的新數組。
- map中可以使用return終止循環
用法
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 | 先執行循環體,再判斷條件 |