從 forEach 開始談談遍歷

forEach

今天從 forEach 開始談談遍歷吧。

forEach 做爲一個比較出衆的遍歷操做，以前有不少庫都對其進行過各類包裝，然而我仍是發現不少人並非很是理解 forEach。

好比第二個參數 this 的使用。

往常都習慣這麼作：

const self = this
arr.forEach(function(item) {
    // do something with this
})

然而若是使用第二個參數就能夠這樣：

arr.forEach(function(item) {
    // do something with this
}, this)

省去了一箇中間的self，看起來更優美了

那麼有沒有更好的處理方式呢？

有的：

arr.forEach(item => {
    // do something
})

因爲 arrow function 的特性，自動綁定父 scope 的 this， 會更加簡潔，並且少了個function關鍵字，可讀性更好。

for

說到循環一定要說到for循環了。js裏面的for循環有好幾種使用方式：

C 系列 for 循環：

for (let index = 0; index < arr.length; index++) {
    // do something
}

index 是 arr 的索引，在循環體中經過 arr[index] 調用當前的元素，我很是不喜歡這種方式，由於要寫兩個分號！

還有另外一種比較簡單的方式：

for (let key in obj) {
    // do something
}

不過這個方式通常用來遍歷對象，下文有說。

關於 for 循環還有 ES2015 規定的一種

for (let item of arr) {
    // do something
}

這種遍歷方式和以前的最大區別在於item，它是value而非key，能夠直接迭代出內容。

不過這種方式我我的用的很少，由於不少狀況下我更喜歡用array下的方法。對於對象的遍歷更傾向於for...in

map 系列

這一塊是js的函數式領域了。

Array.prototype下掛載着幾個很是好用的遍歷函數。好比map

它會遍歷arr下的全部內容，作操做以後返回數據，造成一個新的數組：

const arr = [1, 2, 3]
arr.map(current => current * 5)

在 react 最經常使用。常常用來遍歷數據，造成dom：

someRender() {
    return this.state.data.map((current, index) => {
        return <li key={index}>{ current }</li>
    })
}

不過 map 有一點很差的地方在於不能控制循環的流程，若是不能完成，就返回undefined繼續下一次迭代。因此遇到可能會返回undefined的狀況應該用forEach或者for循環遍歷

還有filter用法和map如出一轍，只是它用來過濾數據。很是的好用。

arguments

說到遍歷不得不說起arguments, 在function()中的全部參數，奇怪的是它並非一個數組。只是一個類數組。

通常須要轉成數組：

function foo() {
    const args = Array.prototype.slice.call(arguments)
    return Array.isArray(args)
}

可是我我的並不認同這樣的方法，有了新的 ES2015 就不要用這麼醜的語法了

function foo(...args) {
    // args 是數組
}

ES2015 的 rest 語法使得剩餘參數都傳入args裏面，比以前的還要調Array的方法要輕鬆很多。

object

對象的遍歷是很是經常使用的功能。

我我的更喜歡用for...in語法，可是有一點須要注意：

for (let index in obj) {
    if(obj.hasOwnProperty(index)) {
        // do something
    }
}

由於除非強制指定，不然對象都是不純淨的。都會有__proto__屬性，也會被迭代出來。須要過濾一下。

好了，如何建立純淨的對象？

const plainObj = Object.create(null)

最輕的obj結構，內部沒有任何多餘的屬性。

從 forEach 開始談談迭代