這一節(jié)我們一起整理一下數(shù)組的遍歷，目前來(lái)說(shuō)遍歷數(shù)組的方式非常多融求，首先我們來(lái)列舉一下有哪些：
- for
- for-in
- for-of
- forEach
- map
- some
- every
- filter
- find
- findIndex
- reduce
- reduceRight
- keys
- entries
有些我們之前就認(rèn)識(shí)剑刑，有些也是我最近學(xué)到的
按照慣例，我們需要先定義一個(gè)被測(cè)試的數(shù)組：
let arr = Array.of(1, 'str', false, []);
// 注意這句双肤，我目的是讓索引值為4的那一項(xiàng)為空值
arr[5] = {};
// 所以我們得到的數(shù)組結(jié)構(gòu)為
[1, 'str', false, [], , {}]
我們正式開(kāi)始：
for
for (let i = 0, len = arr.length; i < len; i++) {
console.log(i, arr[i])
}
打印的結(jié)果為：
0 -> 1
1 -> 'str'
2 -> false
3 -> []
4 -> undefined
5 -> Object {}
根據(jù)結(jié)果我們分析為：
- 索引值
i為Number類型 - 遍歷過(guò)程中如果遇到空值施掏，依然會(huì)執(zhí)行，返回undefined
for-in
for (let i in arr) {
console.log(i, arr[i])
}
打印的結(jié)果為：
'0' -> 1
'1' -> 'str'
'2' -> false
'3' -> []
'5' -> Object {}
大體上和for循環(huán)比較類似茅糜，但還是有所區(qū)別的
- 索引值
i為String類型（這點(diǎn)我也不是很懂為什么...） - 遍歷過(guò)程中如果遇到空值七芭，則會(huì)跳過(guò)
for-of
for (let i of arr) {
console.log(i)
}
打印的結(jié)果為：
1
'str'
false
[]
undefined
Object {}
- 與前兩個(gè)不同的是，該循環(huán)的
i是被遍歷數(shù)組的鍵值 - 遍歷過(guò)程中如果遇到空值蔑赘，依然會(huì)執(zhí)行狸驳，返回undefined
forEach
arr.forEach((value, index, arr) => {
console.log(value)
})
打印的結(jié)果為：
1
'str'
false
[]
Object {}
- 首先，forEach無(wú)返回值缩赛，所以回調(diào)函數(shù)也不需要return
- 回調(diào)函數(shù)的參數(shù)分別為當(dāng)前的值(value), 索引值(index), 被遍歷的數(shù)組(arr)
- 遍歷過(guò)程中如果遇到空值耙箍，跳過(guò)
map
let result = arr.map((value, index, arr) => {
console.log(value)
return value
})
打印的結(jié)果為：
1
'str'
false
[]
Object {}
- map函數(shù)會(huì)根據(jù)回調(diào)函數(shù)中return的值（為新數(shù)組的值）得到一個(gè)新的數(shù)組
- 回調(diào)函數(shù)的參數(shù)分別為當(dāng)前的值(value), 索引值(index), 被遍歷的數(shù)組(arr)
- 遍歷過(guò)程中如果遇到空值，跳過(guò)
所以如果需要根據(jù)原數(shù)組的值得到一個(gè)相關(guān)聯(lián)的新數(shù)組時(shí)酥馍，比較適合使用map
例：
let newarr = [1, 2, 3].map(value => value * 2)
以上代碼可以得到這樣一個(gè)數(shù)組：
[2, 4, 6] // newarr
some
some用于檢測(cè)數(shù)組中的某一項(xiàng)是否符合條件
let result = arr.some((value, index, arr) => {
return typeof value == 'string'
})
根據(jù)被測(cè)試的這個(gè)數(shù)組辩昆，我們得到的結(jié)果是：
true // result
因?yàn)樗饕禐?code>1的那一項(xiàng)確實(shí)為String類型
- 返回Boolean類型的值
- 回調(diào)函數(shù)的參數(shù)分別為當(dāng)前的值(value), 索引值(index), 被遍歷的數(shù)組(arr)
- 回調(diào)函數(shù)需要返回
true或者false - 遍歷過(guò)程中如果某個(gè)回調(diào)函數(shù)返回
true時(shí)，停止遍歷旨袒，result得到true - 如果直到遍歷結(jié)束所有回調(diào)函數(shù)均返回
false汁针，那么result便為false - 遍歷過(guò)程中如果遇到空值，跳過(guò)
every
every與some相反砚尽，用于檢測(cè)數(shù)組中的每一項(xiàng)是均否符合條件
let result = arr.every((value, index, arr) => {
return typeof value == 'string'
})
很顯然施无，根據(jù)被測(cè)試的這個(gè)數(shù)組，我們得到的結(jié)果是：
false // result
看懂some之后every其實(shí)也就明白是做什么的了
- 返回Boolean類型的值
- 回調(diào)函數(shù)的參數(shù)分別為當(dāng)前的值(value), 索引值(index), 被遍歷的數(shù)組(arr)
- 回調(diào)函數(shù)需要返回
true或者false - 遍歷過(guò)程中如果某個(gè)回調(diào)函數(shù)返回
false時(shí)必孤，停止遍歷猾骡，result得到false - 如果直到遍歷結(jié)束所有回調(diào)函數(shù)均返回
true，那么result便為true - 遍歷過(guò)程中如果遇到空值敷搪，跳過(guò)
filter
let result = arr.filter((value, index, arr) => {
return typeof value == 'object'
})
打印的結(jié)果為：
[Array[0], Object {}] // result
- filter會(huì)根據(jù)回調(diào)函數(shù)中return的值（Boolean值）得到一個(gè)新的數(shù)組
- 回調(diào)函數(shù)需要返回一個(gè)Boolean值兴想，為
true時(shí)，filter的結(jié)果數(shù)組中將會(huì)得到該值购啄，為false時(shí)跳過(guò) - 回調(diào)函數(shù)的參數(shù)分別為當(dāng)前的值(value), 索引值(index), 被遍歷的數(shù)組(arr)
- 遍歷過(guò)程中如果遇到空值襟企，跳過(guò)
說(shuō)下filter與map的區(qū)別：
- 第一點(diǎn)當(dāng)然是回調(diào)函數(shù)返回值的不同，filter的回調(diào)函數(shù)返回布爾值狮含，map的回調(diào)函數(shù)是將新數(shù)組所需要的值返回出來(lái)顽悼，所以filter只能選擇要或者不要曼振，而map可以給值做相應(yīng)的調(diào)整，比如數(shù)組
[1, 2, 3]我要得到一個(gè)新數(shù)組[2, 4, 6]時(shí)蔚龙，使用map會(huì)很方便的做到冰评。 - 第二點(diǎn)是filter可以舍棄掉值，即比如數(shù)組
[1, 2, 3]我們可以做到得到一個(gè)內(nèi)容[2, 3]的數(shù)組木羹，只要在回調(diào)函數(shù)中return value > 1即可甲雅，而map做不到，正常情況下被操作的數(shù)組與得到的新數(shù)組的length相等坑填，不過(guò)length這里在有數(shù)組中有空值的情況下會(huì)不等抛人，因?yàn)閒ilter會(huì)跳過(guò)空值，所以本例子中被測(cè)試數(shù)組的length為6脐瑰，而filter即使回調(diào)函數(shù)全部返回true妖枚，得到的新數(shù)組的length也為5。
find
find顧名思義是要找什么東西苍在，所以不難想象find的返回值是被遍歷數(shù)組中的某一項(xiàng)绝页，我們來(lái)試試從測(cè)試數(shù)組中找String類型的值：
let result = arr.find((value, index, arr) => {
return typeof value == 'string'
})
打印的結(jié)果為：
'str' // result
有一點(diǎn)要注意的是，他只能從頭開(kāi)始找到最先找到的那個(gè)寂恬，并非全部找出來(lái)
所以以下這種情況下只會(huì)找到1：
let res = [1, 2, 3, 4, 5].find(val => val < 9) // res -> 1
- find會(huì)根據(jù)回調(diào)函數(shù)中return的值（Boolean值）得到
return true的那個(gè)鍵值 - 當(dāng)回調(diào)函數(shù)返回
true之后续誉，停止遍歷，所以只會(huì)得到一個(gè)結(jié)果 - 回調(diào)函數(shù)的參數(shù)分別為當(dāng)前的值(value), 索引值(index), 被遍歷的數(shù)組(arr)
- 遍歷過(guò)程中如果遇到空值初肉，依然會(huì)執(zhí)行酷鸦，返回undefined
findIndex
看完find之后，我相信findIndex也就明白了朴译，用法是幾乎一樣
let result = arr.findIndex((value, index, arr) => {
return typeof value == 'string'
})
因?yàn)?code>'str'的索引值為1井佑，所以打印的結(jié)果為：
1 // result
- findIndex會(huì)根據(jù)回調(diào)函數(shù)中return的值（Boolean值）得到
return true的那個(gè)鍵值的索引值 - 當(dāng)回調(diào)函數(shù)返回
true之后，停止遍歷眠寿，所以只會(huì)得到一個(gè)結(jié)果 - 回調(diào)函數(shù)的參數(shù)分別為當(dāng)前的值(value), 索引值(index), 被遍歷的數(shù)組(arr)
- 遍歷過(guò)程中如果遇到空值，依然會(huì)執(zhí)行焦蘑，返回undefined
reduce
reduce比較有意思盯拱，我們先看測(cè)試代碼再做分析：
let arr2 = [1.2, 3.3, 5.4, 3.2, 5.3, 4.1, 4.9];
let result = arr2.reduce((prev, next) => {
let p = Math.abs(prev - 5), n = Math.abs(next - 5)
return p < n ? prev : next
})
這段代碼的意思是這樣的：
從arr2中找到最接近5的那個(gè)值回調(diào)函數(shù)接收2個(gè)值
第一次遍歷時(shí)傳遞的是索引值為0和1的兩個(gè)值，本例子中實(shí)為1.2與3.3例嘱，然后回調(diào)函數(shù)中實(shí)為返回了3.3這個(gè)值
第二次遍歷狡逢，注意，傳遞的值變成了前一次遍歷return的值與下一個(gè)索引值相關(guān)的值拼卵，既3.3與索引值為2的5.4奢浑，然后我判斷下來(lái)說(shuō)5.4更接近5，所以返回了5之后的遍歷以此類推腋腮，直到結(jié)束
所以result最終結(jié)果為：
4.9 // result
還有個(gè)reduceRight方法我就不寫了雀彼，我測(cè)試下來(lái)和reduce區(qū)別僅在于reduceRight是從數(shù)組最末位倒序執(zhí)行
keys
數(shù)組的實(shí)例方法壤蚜，返回一個(gè)數(shù)組的遍歷器：
for (let i of arr.keys()) {
console.log(i)
}
打印結(jié)果為：
0
1
2
3
4
5
- 可以用for of取到數(shù)組的索引
- 遍歷過(guò)程中如果遇到空值，會(huì)執(zhí)行
- 和for循環(huán)表現(xiàn)一致
entries
同樣也是數(shù)組的實(shí)例方法徊哑，返回一個(gè)數(shù)組的遍歷器：
for (let i of arr.entries()) {
console.log(i)
}
打印結(jié)果為：
[0, 1]
[1, 'str']
[2, false]
[3, Array [0]]
[4, undefined]
[5, Object {}]
- 可以用for of取到數(shù)組的索引和鍵值
- 循環(huán)得到的結(jié)果是Array類型袜刷，[0]為索引，[1]為鍵值
- 遍歷過(guò)程中如果遇到空值莺丑，會(huì)執(zhí)行著蟹，鍵值為undefined
當(dāng)然你要是喜歡，可以用解構(gòu)賦值的方式：
for (let [index, value] of arr.entries()) {
console.log(index, value)
}
關(guān)于數(shù)組的解構(gòu)賦值這里就不多說(shuō)了...
有一點(diǎn)要提的是梢莽，關(guān)于空值的處理萧豆，實(shí)在是沒(méi)什么規(guī)律可以找，有些處理方式是跳過(guò)昏名，有些則是返回undefined涮雷，所以保險(xiǎn)起見(jiàn)，還是盡量別在數(shù)組中出現(xiàn)空值的情況
好了葡粒，以上學(xué)習(xí)資料僅供參考份殿，如果有坑請(qǐng)以各大官方資料為準(zhǔn)...
