細說JS數(shù)組遍歷的一些細節(jié)及實現(xiàn)
1. 數(shù)組空位問題 ?
數(shù)組空位是什么，它是數(shù)組內(nèi)某個元素沒有任何值，這種現(xiàn)象稱為空位現(xiàn)象，我們在使用Array()去構(gòu)造一個數(shù)組時，如果只傳入一個參數(shù)，數(shù)組里面的元素項就會出現(xiàn)空位現(xiàn)象，它其實是沒有任何元素的，下面是幾個會創(chuàng)建空位的典型例子：
let arr = Array(5) // <5 empty items> let res = arr.map(e => e + 1) // <5 empty items> let a = [,,]; // <2 empty items>
ES5 中的數(shù)組方法包括：map、filter、forEach、reduce，還有 for ... in 等語法，這些方法執(zhí)行的時候遇到空位，會直接跳過。
// ES5 及以前，不會處理空位
const a = Array(5);
console.log(a) // [ <5 empty items> ]
console.log(a.map(_ => 1)) // 無效，[ <5 empty items> ]
// console.log(a.reduce((p, c)=> p+c)) // 報錯
console.log(a.filter(x => true)) // []
a.forEach(e => {
console.log(e);
}) // 無任何輸出
console.log(a+'') // ,,,,
console.log(a.indexOf(undefined)) // -1
console.log(a.lastIndexOf(undefined)) // -1
for (let k in a) {
console.log(k) // 無任何輸出
}ES5中將空位視為undefined的有：join()，toString()
[,'a','b',undefined,null].join("@") // '@a@b@@'
[,'a','b',undefined,null].toString() // ',a,b,,'ES6，一些操作會將數(shù)組空位視為undefined來處理。比如下面的一些操作
console.log([...a]) // [ undefined x 5 ]
console.log(Array.from(a)) // [ undefined x 5 ]
console.log(a.includes(undefined)) // true
console.log(a.find(x => x === undefined)) // undefined
console.log(a.findIndex(x => x === undefined)) // 0
// for of 循環(huán)取值
for (let k of a) {
console.log(k) // 輸出5個undefined
}1.1 空位判斷 ?
我們可以使用in運算符來判斷數(shù)組某個位置是否存在空位
let arr = Array(3) console.log(0 in arr) // false
如上述所示，使用in運算符，判斷索引為0的位置是否為空位，遇到數(shù)組空位會返回false
這里需要注意的是所謂的空位是沒有任何值的，undefined、null它們都不屬于空位，下面來判斷一下。
let arr = [undefined, null]; console.log(0 in arr) // true console.log(1 in arr) // true
驗證了undefined、null所在的位置它不是空位
1.2 剛列舉了數(shù)組的一些操作會對空位進行跳過，但其實，它們在處理上也還是存在一些差異的
比如：forEach、filter、some與every等在遇到空位時，會直接跳過它，不會保留它的值， 而map則會保留空位
我們來看下例子：
[,1,2].forEach((x,i) => { console.log(i); }) // 這里只會輸出1 2
[,1,2].filter((x,i) => { return x > 0; }) // 這里也只會輸出[1, 2]
[,1,2].map((x) => { return x > 0; }) // 這里會輸出[空, true, true]，它保留了空位其余的可以自行測試看看結(jié)果
2. 是否修改原數(shù)組 ?
請看以下代碼，遍歷過程中，試圖修改遍歷的每一項。
const arr = [1, 2, 3]
let res = arr.filter(item => {
item++
return item >= 3
})
console.log(arr) // [ 1, 2, 3 ]
console.log(res) // [ 2, 3 ]filter 里的 item 自增了，所以最后有兩項符合過濾規(guī)則，但是原數(shù)組并沒有變。這說明這里的 item 只是原數(shù)組項的一個值拷貝，數(shù)組遍歷是按值傳遞的。
再看一段代碼，這次我們遍歷引用數(shù)據(jù)類型的數(shù)組。
const brr = [
{count: 1},
{count: 1},
{count: 1}
]
const res2 = brr.map(item => {
item.count++
return item.count
})
console.log(brr) // [ { count: 2 }, { count: 2 }, { count: 2 } ]
console.log(res2) // [ 2, 2, 2 ]這里的修改改變了原數(shù)組，那之前說的按值傳遞有問題？其實還沒問題的，數(shù)組函數(shù)方法說到底也是一個函數(shù)，JS 的函數(shù)總是按值傳遞的：
基本數(shù)據(jù)類型（包含變量、函數(shù)參數(shù)等）存儲在棧（stack）中，傳遞參數(shù)會復(fù)制一份值
引用數(shù)據(jù)類型的引用（指針）存儲在棧中，指向的值存儲在堆（heap）中，傳遞參數(shù)會復(fù)制一份對象的引用地址，復(fù)制的引用地址和原引用地址指向堆中同一個對象（因此修改參數(shù)，也修改了原對象）
3. 附一下數(shù)組遍歷的幾種方法 ?
3.1 索引訪問 ?
const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}3.2 for ... of ?
const arr = [1, 2, 3]
for (let e of arr) {
console.log(e)
}3.3 forEach ?
注意：return 和 break 無法中斷遍歷。
- return 可以跳過本次遍歷，但剩余元素仍然會繼續(xù)遍歷下去。
- break 只能中斷 for 和 while 循環(huán)，forEach 函數(shù)中使用會報錯
const arr = [1, 2, 3]
arr.forEach((e, i, a) => {
console.log(e)
})3.4 for ... in ?
`for ... in` 是用來遍歷對象（plain object）的，也可以用來遍歷數(shù)組，但不建議。
const arr = [1, 2, 3]
for (let i in arr) {
console.log(arr[i])
}3.5 map、filter、reduce ?
這三類都是為了對數(shù)組進行一個操作，然后得到目標(biāo)結(jié)果的數(shù)組方法，從功能和語義上來講，和 forEach 有區(qū)別的，不建議混用，尤其是 map 和 forEach。但是也能對數(shù)組進行遍歷，詳細可參考MDN。
到此這篇關(guān)于細說JS數(shù)組遍歷的一些細節(jié)及實現(xiàn)的文章就介紹到這了,更多相關(guān)JS數(shù)組遍歷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript字符和ASCII實現(xiàn)互相轉(zhuǎn)換
這篇文章主要介紹了JavaScript字符和ASCII實現(xiàn)互相轉(zhuǎn)換,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
JavaScript 語句之常用 for 循環(huán)詳解
這篇文章主要介紹了JavaScript 語句之常用 for 循環(huán)，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03
這篇文章主要為大家介紹了前端音頻可視化Web?Audio實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
本篇文章主要介紹了詳解webpack介紹&安裝&常用命令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要是對js中的Array操作進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
js eval函數(shù)使用,js對象和字符串互轉(zhuǎn)實例
下面小編就為大家?guī)硪黄猨s eval函數(shù)使用,js對象和字符串互轉(zhuǎn)實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了基于JS實現(xiàn)快速讀取TXT文件,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了常見JS驗證腳本,結(jié)合實例形式匯總分析了JavaScript用于驗證的系統(tǒng)自帶函數(shù)與自定義函數(shù),具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
JavaScript判斷是否為數(shù)字的多種方法小結(jié)
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的多種方法小結(jié),本文給大家分享三種方法,結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
js中如何把字符串轉(zhuǎn)化為對象、數(shù)組示例代碼
在本文為大家介紹下把字符串轉(zhuǎn)化為對象：把文本轉(zhuǎn)化為對象、把文本轉(zhuǎn)化為數(shù)組，具體實現(xiàn)如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07