為什么需要“可迭代”？

在 ES6 之前，我們遍歷數(shù)據(jù)主要靠 for 循環(huán)（基于索引）或 forEach。但這種方式有兩個痛點：

1. 不通用：數(shù)組能遍歷，但字符串、DOM 節(jié)點列表、Map、Set 的遍歷方式各不相同。
2. 不靈活：無法自定義遍歷邏輯（比如我想倒序遍歷，或者只遍歷偶數(shù)項）。

為了解決這個問題，ES6 引入了 迭代器 (Iterator) 和 可迭代對象 (Iterable) 的概念，統(tǒng)一了數(shù)據(jù)訪問的接口。

通俗比喻：
想象你去一家自助餐廳吃飯。

• 普通對象：像是一堆散落在桌子上的菜，沒有順序，你只能指著說“我要那個”，不能按順序一個個拿。
• 可迭代對象：像是傳送帶上的壽司。傳送帶有一個機制（迭代器），讓你可以一個一個地按順序獲取食物，直到吃完為止。

Symbol.iterator 就是那個“啟動傳送帶的按鈕”。只要一個對象身上有這個按鈕，它就是“可迭代的”。

1. 核心概念：誰是誰？

很多初學者容易混淆這兩個術語，我們先厘清定義：

可迭代對象 (Iterable)

• 定義：實現(xiàn)了 可迭代協(xié)議 的對象。
• 特征：對象內部必須有一個鍵為 Symbol.iterator 的方法，該方法返回一個迭代器對象。
• 常見例子：Array, String, Map, Set, arguments, NodeList。

迭代器 (Iterator)

• 定義：實現(xiàn)了 迭代器協(xié)議 的對象。
• 特征：擁有一個 next() 方法，每次調用返回一個包含 value 和 done 的對象。
• 作用：它是真正的“工人”，負責逐個吐出數(shù)據(jù)。

簡單關系：
可迭代對象 是工廠，迭代器 是工廠派出的快遞員。
當你使用 for...of 時，JS 引擎會自動調用工廠的 Symbol.iterator 拿到快遞員，然后一直喊 next() 直到送完貨。

2. 底層原理：兩個協(xié)議

協(xié)議一：可迭代協(xié)議 (Iterable Protocol)

只要對象擁有 [@@iterator] 方法（即 Symbol.iterator 屬性），它就是可迭代的。

const arr = [1, 2, 3];
// 檢查是否有 Symbol.iterator 方法
console.log(typeof arr[Symbol.iterator]); // "function"

協(xié)議二：迭代器協(xié)議 (Iterator Protocol)

Symbol.iterator 方法返回的對象，必須滿足以下條件：

1. 擁有 next() 方法。
2. next() 返回一個對象 { value: any, done: boolean }。
   • value: 當前產出的值。
   • done: 是否遍歷結束（true 表示結束）。

3. 代碼實戰(zhàn)：判斷與使用

場景一：哪些是原生的可迭代對象？

// ? 數(shù)組
[1, 2, 3][Symbol.iterator]; // function

// ? 字符串
"hello"[Symbol.iterator]; // function

// ? Map
new Map()[Symbol.iterator](
  // function

  // ? 普通對象
  {},
)[Symbol.iterator]; // undefined -> 不可迭代！

場景二：for...of的本質

當你寫這段代碼時：

for (const item of [1, 2, 3]) {
  console.log(item);
}

JavaScript 引擎實際上在執(zhí)行以下操作：

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator](); // 1. 獲取迭代器

let result = iterator.next(); // 2. 第一次 next()
while (!result.done) {
  // 3. 如果沒做完
  console.log(result.value); // 4. 處理值
  result = iterator.next(); // 5. 繼續(xù)下一個
}

4. 手寫實現(xiàn)：讓普通對象可迭代

這是面試的高頻考點：如何讓一個普通對象支持 for...of？

假設我們有一個范圍對象 Range，我們希望它能遍歷出從 start 到 end 的數(shù)字。

const range = {
  start: 1,
  end: 5,
};

// ? 直接遍歷會報錯：range is not iterable
// for (let num of range) { ... }

// ? 改造：添加 Symbol.iterator 方法
range[Symbol.iterator] = function () {
  let current = this.start;
  const last = this.end;

  // 返回一個符合“迭代器協(xié)議”的對象
  return {
    next() {
      if (current <= last) {
        return { value: current++, done: false };
      } else {
        return { value: undefined, done: true };
      }
    },
  };
};

// 現(xiàn)在可以愉快地遍歷了！
for (let num of range) {
  console.log(num); // 1, 2, 3, 4, 5
}

// 也可以使用展開運算符
console.log([...range]); // [1, 2, 3, 4, 5]

關鍵點：
Symbol.iterator 函數(shù)必須返回一個新的迭代器對象。這樣即使嵌套遍歷或多次遍歷，狀態(tài)也不會沖突。

5. 常見誤區(qū)：Array-like vs Iterable

很多“類數(shù)組對象”（Array-like）不是可迭代對象，這經常導致 Bug。

誤區(qū)：arguments和NodeList

在舊版瀏覽器或某些環(huán)境下，document.querySelectorAll 返回的 NodeList 可能沒有 Symbol.iterator（雖然現(xiàn)代瀏覽器大多已支持，但需警惕兼容性）。

const divs = document.querySelectorAll("div");

// ? 在某些舊環(huán)境或特定對象上可能失效
// for (let div of divs) { ... }

// ? 安全做法：使用 Array.from 轉換
const divArray = Array.from(divs);
divArray.forEach((div) => console.log(div));

最佳實踐：如何安全地遍歷？

如果你不確定一個對象是否可迭代，可以使用以下工具函數(shù)檢測：

function isIterable(obj) {
  // 檢查 null/undefined
  if (obj == null) return false;
  // 檢查是否有 Symbol.iterator 方法且類型為函數(shù)
  return typeof obj[Symbol.iterator] === "function";
}

console.log(isIterable([])); // true
console.log(isIterable({})); // false
console.log(isIterable("")); // true

6. 總結

博主寄語：
可迭代協(xié)議是 JavaScript 統(tǒng)一數(shù)據(jù)訪問方式的偉大嘗試。
它不僅讓 for...of 成為可能，還支撐起了生成器 (Generator)、異步迭代器 (Async Iterator) 等高級特性。

記住口訣：
想要遍歷用 for...of，
對象必須有 iterator。
next 方法吐數(shù)據(jù)，
done 為真停腳步。

以上就是一文詳解JavaScrip可迭代對象(Iterable)的詳細內容，更多關于JavaScrip可迭代對象Iterable的資料請關注腳本之家其它相關文章！

最新評論