JavaScript：遍歷

ThinkSNS 發(fā)布于2019-08-23 17:51 / 438人閱讀

摘要：中可以實(shí)現(xiàn)遍歷的數(shù)據(jù)類型主要是對象，其中包括普通對象與數(shù)組。遍歷器是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制。實(shí)例五遍歷器對象實(shí)例五是的遍歷過程，通過手動調(diào)用其對象的方法實(shí)現(xiàn)信息獲取。為每個數(shù)組元素執(zhí)行函數(shù)。

前言

??將依據(jù)自身痛點(diǎn)學(xué)習(xí)，計劃對原生JavaScript寫一個系統(tǒng)，本文為第一篇，感興趣的同學(xué)可以關(guān)注個人公眾號：ZeroToOneMe，或者github博客，將持續(xù)輸出。

??JavaScript中可以實(shí)現(xiàn)遍歷的數(shù)據(jù)類型主要是對象，其中包括普通對象與數(shù)組。實(shí)現(xiàn)遍歷的方式有很多，本文梳理下JavaScript中能實(shí)現(xiàn)遍歷的方式。

對象&&數(shù)組 for...in

??語句以任意順序遍歷一個對象自有的、繼承的、可枚舉的、非Symbol的屬性。對于每個不同的屬性，語句都會被執(zhí)行。

語法：

for (variable in object) {
  xxx
}

參數(shù)：

variable：在每次迭代時，將不同的屬性名分配給變量。

object：被迭代枚舉其屬性的對象。

??從定義上來看，for...in語句遍歷對象和組數(shù)都是可以的，但是此方式使用在數(shù)組可能會帶來一些我們并不想看到的東西，看下面的實(shí)例一：

// 實(shí)例一
Array.prototype.name = "fe"
let arr = [10, 20, 30, 40, 50]
arr.str = "hello"
for(let index in arr) {
  console.log(index) // 0, 1, 2, 3, 4, str, name
}

??上面的實(shí)例一輸出結(jié)果可以看出，直接得到不是數(shù)組元素值，而是數(shù)組的索引值（鍵名），同時還有其自定義屬性以及其原型鏈上的屬性和方法‘str’，‘name’兩項(xiàng)，數(shù)組本身也是對象。

??即使使用getOwnPropertyNames()或執(zhí)行hasOwnProperty() 來確定某屬性是否是對象本身的屬性可以避免原型鏈上的屬性和方法不輸出，但還是不能避免自定義的屬性輸出。實(shí)例二：

// 實(shí)例二
Array.prototype.name = "fe"
let arr = [10, 20, 30, 40, 50]
arr.str = "hello"
for(let index in arr) {
  if (arr.hasOwnProperty(index)) {
    console.log(index) //  0, 1, 2, 3, 4, str
  }
}

數(shù)組使用for...in遍歷，可能會存在以下幾個問題：

得到的index索引值為字符串，不能直接做幾何運(yùn)算，需要先做數(shù)據(jù)類型轉(zhuǎn)換處理；

可能以任意順序做遍歷的，即遍歷順序可能不是按照數(shù)組內(nèi)部順序；

會遍歷數(shù)組所有可枚舉的屬性，包括原型。

??在一定程度上來看，使用for...in 遍歷數(shù)組是一個很糟糕的選擇，不推薦使用for...in 語句遍歷數(shù)組，對開發(fā)經(jīng)驗(yàn)欠缺的新人不友好，比較容易踩到坑，會遇到很多意想不到的問題。遍歷數(shù)組更多的推薦是for...of與foreach 這兩種方式，下面也會詳細(xì)的梳理這兩種方式。

注意點(diǎn)：

for...in比較適合遍歷普通對象，遍歷得到的結(jié)果是對象的鍵名，其順序也是無序的，無關(guān)順序。也可以通過break或者return false中斷遍歷。
在迭代過程中最好不要在對象上進(jìn)行添加、修改或者刪除屬性的操作，除非是對當(dāng)前正在被訪問的屬性。

// 實(shí)例三
let obj = {
  name: "fe",
  age: 18
}
for(let key in obj) {
  console.log(key) // name age
}

for...of

??語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象，NodeList 對象等）上創(chuàng)建一個迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個不同屬性的值執(zhí)行語句。該語句是ES6新增遍歷方式，功能還是比較強(qiáng)大的。

語法：

for (variable of iterable) {
  xxx
}

參數(shù)：

variable：在每次迭代中，將不同屬性的值分配給變量。

iterable：一個具有可枚舉屬性并且可以迭代的對象。

// 實(shí)例四
let arr = [10, 20, 30, 40, 50]
arr.str = "hello"
for(let value of arr) {
  console.log(value) // 10 20 30 40 50
}

??for...of語句常用在遍歷數(shù)組，從實(shí)例四看出，for...of可以直接得到數(shù)組索引中的值，但是不會將其實(shí)例屬性的值返回。原因在于for...of循環(huán)調(diào)用遍歷器接口，數(shù)組的遍歷器接口只返回具有數(shù)字索引的屬性，所以for...of循環(huán)不會返回數(shù)組arr的str屬性。

??話說我們平時的開發(fā)中常用for..of遍歷數(shù)組，從上面的定義來看，for...of不僅僅能遍歷數(shù)組，也可以遍歷String（字符串）、Map、Set等數(shù)據(jù)結(jié)構(gòu)，是因?yàn)檫@幾個數(shù)據(jù)結(jié)構(gòu)默認(rèn)內(nèi)置了遍歷器接口，Iterator接口，即Symbol.iterator方法。

??也就是說有了遍歷器接口，數(shù)據(jù)結(jié)構(gòu)就可以用for...of循環(huán)遍歷。遍歷器（Iterator）是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成遍歷操作。Iterator接口與for...of都是ES6提出的特性，Iterator接口也就主要供for...of消費(fèi)。

// 實(shí)例五
let arr = [10, 20, 30, 40, 50]
arr.str = "hello"
let item = arr[Symbol.iterator]() // 遍歷器對象
console.log(item.next()) // { value: 10, done: false }
console.log(item.next()) // { value: 20, done: false }
console.log(item.next()) // { value: 30, done: false }
console.log(item.next()) // { value: 40, done: false }
console.log(item.next()) // { value: 50, done: false }
console.log(item.next()) // { value: undefined, done: true }

??實(shí)例五是Iterator的遍歷過程，通過手動調(diào)用其對象的next()方法實(shí)現(xiàn)信息獲取。默認(rèn)的Iterator接口部署在數(shù)據(jù)結(jié)構(gòu)的Symbol.iterator屬性。對于原生部署Iterator接口的數(shù)據(jù)結(jié)構(gòu)，不用自己寫遍歷器生成函數(shù)，for...of循環(huán)會自動遍歷。可以參考實(shí)例四。

// 實(shí)例六
let str = "abc"
let item = str[Symbol.iterator]()

console.log(item.next()) // { value: "a", done: false }
console.log(item.next()) // { value: "b", done: false }
console.log(item.next()) // { value: "c", done: false }
console.log(item.next()) // { value: undefined, done: true }

for (let item of str) {
  console.log(item) // a b c
}

??實(shí)例六為字符串的遍歷演示，還有其他幾種數(shù)據(jù)結(jié)構(gòu)(Map，Set，TypedArray，arguments對象，NodeList對象)原生部署了Iterator接口，可以直接使用for...of完成遍歷，在此不在提供代碼實(shí)例，可以自行測試。

??for..of不能遍歷對象，因?yàn)閷ο竽J(rèn)沒有部署Iterator接口，沒有默認(rèn)部署Iterator接口原因在于對象屬性是無序的，哪個屬性先遍歷，哪個屬性后遍歷無法確定。本質(zhì)上，遍歷器是一種線性處理，對于任何非線性的數(shù)據(jù)結(jié)構(gòu)，部署遍歷器接口，就等于部署一種線性轉(zhuǎn)換。也可以手動為對象部署Iterator接口，看下面的實(shí)例七。

// 實(shí)例七
let obj = {
  data: [ "hello", "world" ],
  [Symbol.iterator]() {
    const self = this
    let index = 0
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++],
            done: false
          };
        } else {
          return { value: undefined, done: true }
        }
      }
    };
  }
}
for (let item of obj) {
  console.log(item) // hello world
}

總結(jié)下for..of的幾個特征：

不僅能遍歷數(shù)組，同時也能遍歷部署了遍歷器接口Iterator接口的數(shù)據(jù)結(jié)構(gòu)；

相對比較簡潔直接遍歷數(shù)組的方式；

避開了for-in循環(huán)的所有缺陷。

對象 Object.keys()

??返回一個由一個給定對象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和使用for...in循環(huán)遍歷該對象時返回的順序一致。

語法：

Object.keys(obj)

參數(shù)：
obj：要返回其枚舉自身屬性的對象

??返回一個所有元素為字符串的數(shù)組，其元素來自于從給定的object上面可直接枚舉的屬性。這些屬性的順序與手動遍歷該對象屬性時的一致。

// 實(shí)例八
let obj = {
  name: "fe",
  age: 18
}
let result = Object.keys(obj)
console.log(result) // [ "name", "age" ]

注意點(diǎn)：
在ES5里，如果此方法的參數(shù)不是對象（而是一個原始值），那么它會拋出 TypeError。在ES6中，非對象的參數(shù)將被強(qiáng)制轉(zhuǎn)換為一個對象。

consoloe.log(Object.keys("foo")) // TypeError: "foo" is not an object (ES5)
consoloe.log(Object.keys("foo")) // ["0", "1", "2"] (ES6)

??對象也可以通過和Object.keys(obj)搭配，使用for...of來遍歷普通對象的屬性。

// 實(shí)例九
let obj = {
  name: "fe",
  age: 18
}
for(let key of  Object.keys(obj)) {
  console.log(obj[key]) // fe 18
}

數(shù)組 for循環(huán)

??用于創(chuàng)建一個循環(huán)，它包含了三個可選的表達(dá)式，三個可選的表達(dá)式包圍在圓括號中并由分號分隔，后跟一個在循環(huán)中執(zhí)行的語句（通常是一個塊語句）。

語法：

for ([initialization]; [condition]; [final-expression]) {
  statement
}

參數(shù)：
initialization：一個表達(dá)式 (包含賦值語句) 或者變量聲明；

condition：一個條件表達(dá)式被用于確定每一次循環(huán)是否能被執(zhí)行；

final-expression：每次循環(huán)的最后都要執(zhí)行的表達(dá)式；

statement：只要condition的結(jié)果為true就會被執(zhí)行的語句。
`

// 實(shí)例十 
let arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]) // 1 2 3
}

??for循環(huán)為編程語言中最原始的一種遍歷方式，涵蓋了幾乎所有的編程語言，在JavaScript中其只能遍歷數(shù)組，不能遍歷對象。實(shí)例十是for循環(huán)最常規(guī)的寫法。我們不注意的話，也比較容易帶來本可以避免的幾個“問題”，我們需要注意：

在for循環(huán)中使用var或者未聲明的變量，變量作用于全局，會來不必要的麻煩，使用let聲明變量生成塊級作用域，或者形成閉包；

在循環(huán)開始以變量的形式緩存下數(shù)組長度，可以獲得更好的效率，若在循環(huán)內(nèi)部有可能改變數(shù)組長度, 請務(wù)必慎重處理, 避免數(shù)組越界。

// 實(shí)例十一
let arr = [1, 2, 3]
for (let i = 0, len = arr.length; i < len; i++) {
  console.log(arr[i]) // 1 2 3
}

forEach

??按升序?yàn)閿?shù)組中含有效值的每一項(xiàng)執(zhí)行一次callback 函數(shù)，那些已刪除或者未初始化的項(xiàng)將被跳過。

語法：

 array.forEach(function(currentValue, index, arr), thisValue)

參數(shù)：
currentValue(必選)：數(shù)組當(dāng)前項(xiàng)的值

index(可選)：數(shù)組當(dāng)前項(xiàng)的索引

arr(可選)：數(shù)組對象本身

thisValue(可選)：當(dāng)執(zhí)行回調(diào)函數(shù)時用作 this 的值(參考對象)，默認(rèn)值為undefined

注意點(diǎn)：
沒有辦法中止或者跳出forEach循環(huán)，除了拋出一個異常。
只能用return退出本次回調(diào)，進(jìn)行下一次回調(diào)，并總是返回undefined 值，即使你return了一個值。

forEach被調(diào)用時，不直接改變調(diào)用它的對象，但是對象可能會被callback 改變。

常見規(guī)則（同樣適用于filter、map方法）：

對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

遍歷的范圍在第一次調(diào)用callback前就會確定。

為每個數(shù)組元素執(zhí)行callback函數(shù)。

函數(shù)在執(zhí)行時，原數(shù)組中新增加的元素將不會被callback訪問到。

如果已經(jīng)存在的值被改變，則傳遞給callback的值是遍歷到他們那一刻的值。

被刪除的元素將不會被訪問到。

// 實(shí)例十二
let arr = [1, 2, 3, , 5] // 倒數(shù)第二個元素為空，不會遍歷
let result = arr.forEach((item, index, array) => {
  arr[0] = "修改元素值"
  console.log(item) // 1 2 3 5
})
console.log(arr) // ["修改元素值", 2, 3, , 5]

// 實(shí)例十三
let arr = [1, 2, 3, , 5] // 倒數(shù)第二個元素為空，不會遍歷
let result = arr.forEach((item, index, array) => {
  arr[1] = "修改元素值"
  console.log(item) // 1 修改元素值 3 5
})
console.log(arr) // [1, "修改元素值", 3, , 5]

??實(shí)例十二和實(shí)例十三都對數(shù)組元素值做了修改，然而實(shí)例十二中item值沒有變化，實(shí)例十三中item值變化了，為啥？？？

??實(shí)例十二在執(zhí)行forEach時，修改了arr[0]的值，數(shù)組arr的值發(fā)生了改變，然后控制臺輸出item的值沒有變，原因是僅僅是修改了arr[0]的值，item的值沒有變化，控制臺輸出的item的值依舊還是之前forEach保存的item的值。

??實(shí)例十三在執(zhí)行forEach時，修改了arr[1]的值，控制臺輸出item與數(shù)組arr的值均發(fā)生變化，在第一次遍歷的時候，數(shù)組arr的第二個元素值已經(jīng)變化了，在第二次遍歷的時候，forEach回調(diào)函數(shù)的參數(shù)值發(fā)生了變化，即控制臺輸出item值發(fā)生變化。

??如果已經(jīng)存在的值被改變，則傳遞給callback的值是forEach遍歷到他們那一刻的值。

// 實(shí)例十四
let arr = [1, 2, 3, , 5] // 倒數(shù)第二個元素為空，不會遍歷
let result = arr.forEach((item, index, array) => {
  arr.push("添加到尾端，不會被遍歷") // 調(diào)用 forEach 后添加到數(shù)組中的項(xiàng)不會被 callback 訪問到
  console.log(item) // 1 2 3 5
  return item // return只能結(jié)束本次回調(diào) 會執(zhí)行下次回調(diào)
  console.log("不會執(zhí)行，因?yàn)閞eturn 會執(zhí)行下一次循環(huán)回調(diào)")
})
console.log(result) // 即使return了一個值,也還是返回undefined

// 實(shí)例十五
let arr = [1, 2, 3, , 5] // 倒數(shù)第二個元素為空，不會遍歷
let result = arr.forEach((item, index, array) => {
  if (item === 2) {
    arr.shift()
  }
  console.log(item) // 1 2 5
})

??已刪除的項(xiàng)不會被遍歷到。如果已訪問的元素在迭代時被刪除了（例如使用 shift()），之后的元素將被跳過。

filter

??“過濾”，為數(shù)組中的每個元素調(diào)用一次callback函數(shù)，并利用所有使得callback返回true或等價于true的值的元素創(chuàng)建一個新數(shù)組。

語法：

let newArray = arr.filter(function(currentValue, index, arr), thisValue)

參數(shù)：
currentValue(必選)：數(shù)組當(dāng)前項(xiàng)的值；

index(可選)：數(shù)組當(dāng)前項(xiàng)的索引；

arr(可選)：數(shù)組對象本身；

thisValue(可選)：當(dāng)執(zhí)行回調(diào)函數(shù)時用作 this 的值(參考對象)，默認(rèn)值為undefined。

注意點(diǎn)：
不修改調(diào)用它的原數(shù)組本身，當(dāng)然在callback執(zhí)行時改變原數(shù)組另說；

callback函數(shù)返回值不一定非要是Boolean值，只要是弱等于== true/false也沒問題。

// 實(shí)例十六
let arr = [1, 2, 3, , 5] // 倒數(shù)第二個元素為空，不會遍歷
let result = arr.filter(function(item, index, array) {
  arr.push(6) // 在調(diào)用 filter 之后被添加到數(shù)組中的元素不會被 filter 遍歷到
  arr[1] = 4 // 如果已經(jīng)存在的元素被改變了，則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值
  console.log(item) // 1 4 3 5
  return item < 5 // 返回數(shù)組arr中小于5的元素
})
console.log(result) // [1, 4, 3]

// 實(shí)例十七
let arr = [0, 1, 2, 3, 4] 
let result = arr.filter(function(item, index, array) {
  return item // 做類型轉(zhuǎn)換
})
console.log(result) // [1, 2, 3, 4]

map

??創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果。其基本用法與forEach類似，不同在于map的callback需要有return值。

語法：

let newArray = arr.map(function(currentValue, index, arr), thisValue)

參數(shù)：
currentValue(必選)：數(shù)組當(dāng)前項(xiàng)的值
index(可選)：數(shù)組當(dāng)前項(xiàng)的索引
arr(可選)：數(shù)組對象本身
thisValue(可選)：當(dāng)執(zhí)行回調(diào)函數(shù)時用作this的值(參考對象)，默認(rèn)值為undefined


注意點(diǎn)：
不修改調(diào)用它的原數(shù)組本身，當(dāng)然在callback執(zhí)行時改變原數(shù)組另說。

callback函數(shù)只會在有值的索引上被調(diào)用；那些從來沒被賦過值或者使用delete刪除的索引則不會被調(diào)用。

??map方法的主要作用其實(shí)是對原數(shù)組映射產(chǎn)生新數(shù)組，看實(shí)例十八：

// 實(shí)例十八
let arr = [1, 2, 3]
let result = arr.map(function(item, index, array) {
  return item * 2
})
console.log(result) // [2, 4, 6]
console.log(arr) // [1, 2, 3] // 原數(shù)組arr沒有變

reduce

??對累加器和數(shù)組中的每個元素（從左到右）應(yīng)用一個函數(shù)，最終合并為一個值。

語法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

參數(shù)：
total(必選)：累計器累計回調(diào)的返回值; 它是上一次調(diào)用回調(diào)時返回的累積值，或initialValue
currentValue(必選)：數(shù)組中正在處理的元素
currentIndex(可選)：數(shù)組中正在處理的當(dāng)前元素的索引 如果提供了initialValue，則起始索引號為0，否則為1

arr(可選)：調(diào)用reduce()的數(shù)組
initialValue(可選)：作為第一次調(diào)用callback函數(shù)時的第一個參數(shù)的值。 如果沒有提供初始值，則將使用數(shù)組中的第一個元素。 在沒有初始值的空數(shù)組上調(diào)用reduce將報錯

注意點(diǎn)：
如果沒有提供initialValue，reduce 會從索引1的地方開始執(zhí)行 callback 方法，跳過第一個索引。如果提供initialValue，從索引0開始。

回調(diào)函數(shù)第一次執(zhí)行時：

如果調(diào)用reduce()時提供了initialValue，total取值為initialValue，currentValue取數(shù)組中的第一個值；

如果沒有提供initialValue，那么total取數(shù)組中的第一個值，currentValue取數(shù)組中的第二個值；

如果數(shù)組為空且沒有提供initialValue，會拋出TypeError；

如果數(shù)組僅有一個元素（無論位置如何）并且沒有提供initialValue，或者有提供initialValue但是數(shù)組為空，那么此唯一值將被返回并且callback不會被執(zhí)行。

// 實(shí)例十九
let sum = [1, 2, 3].reduce(function (total, currentValue, currentIndex) {
  return total + currentValue
})
console.log(sum) // 6

結(jié)語

??本文梳理了對象和數(shù)組幾種比較常用的遍歷方式。數(shù)組的方法有很多，有部分內(nèi)容本文沒有涉及到，例如some，every，reduceRight，find，findIndex等方法，感興趣的同學(xué)可以自行了解。

??筆者現(xiàn)在還是一個前端新人，對遍歷的實(shí)現(xiàn)方式不太清楚，借此梳理的機(jī)會，熟悉相關(guān)的實(shí)現(xiàn)，文章如有不正確的地方歡迎各位大佬指正，也希望有幸看到文章的同學(xué)也有收獲，一起成長！

——本文首發(fā)于個人公眾號———

最后，歡迎大家關(guān)注我的公眾號，一起學(xué)習(xí)交流。