可迭代對象與類數組對象

by @zhangbao(zhangbao) #0107

注意，這裏所指的「對象」並不是是嚴格意義上的對象。像字符串這樣的基本類型值也叫對象。

概覽

• 可迭代對象是指實現了 [Symbol.iterator] 方法屬性的對象。
• 類數組對象則具備一個 .length 屬性。
• 可使用 Array.from 將可迭代對象和類數組對象轉爲真實數組。

辨別

可迭代對象與類數組對象是兩個徹底不一樣的概念，不要弄混了。

• 可迭代對象 是指實現了 [Symbol.iterator] 方法屬性的對象。
• 類數組對象 則具備一個 .length 屬性，所以說它是相似數組的。

好比，下面的類數組對象就能不用 for...of 循環遍歷。

// 由於具備 length 屬性，所以屬於類數組對象
let arrayLike = {
  0: "Hello",
  1: "World",
  length: 2
};

// 報錯！for...of 是沒法遍歷沒有部署 [Symbol.iterator] 屬性的對象的
for (let item of arrayLike) {}
複製代碼

可是，可迭代對象和類數組對象並不是是相互排斥的。好比，字符串既是可迭代對象（可以被 for...of 循環遍歷），又是類數組對象。

但無論是可迭代對象仍是類數組對象，說其餘它們都不是真實意義上的數組，所以不具有諸如 forEach、map、filter、reduce 等這些數組方法。這有時會給咱們操做對象帶來很大的不便，那麼咱們該如何作，才能在這些對象上使用數組方法呢？

答案是可使用 Array.from 方法。

Array.from

Array.from 這個方法神奇的地方在於，它能夠將傳入的可迭代對象或類數組對象，都能轉換成真實的數組。

兩個例子

舉個例子：

看到沒，arrayLike 傳入 Array.from 以後，返回的是真實的數組。這樣咱們就能很方便的使用數組方法操做數據了。

再以《可迭代對象》一文裏的 range 變量爲例（以下）。

let range = {
  from: 1,
  to: 5
}

range[Symbol.iterator] = function() {
  return {
    current: this.from,
    last: this.to,
    next() {
      if (this.current <= this.last) {
        return { done: false, value: this.current++ }
      } else {
        return { done: true }
      }
    }
  }
}
複製代碼

咱們用 Array.from 處理一下。

發現也被正常處理了。

完整語法

其實上面都是基本用戶，Array.from 方法的完整語法是這樣的：

Array.from(obj[, mapFn, thisArg])
複製代碼

除了以前使用過的第一個參數，即被處理的對象，另外兩個可選參數含義是：

• mapFn：在將每一個成員添加進最終返回的數組以前，執行的映射函數。
• thisArg：指定映射函數執行上下文 this 的值。

舉個例子：

從上圖能夠看見，經過將 mapFn 內的 this 指向 thisArg，咱們將 "apple" 轉爲了 "🍎"，將 "banana" 轉爲了 "🍌"，最後獲得了最終返回的數組 ["🍎", "🍌"]。

參考連接

• javascript.info/iterable#ar…

（完）