為什么需要“可迭代”？

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

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

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

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

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

Symbol.iterator 就是那個(gè)“啟動(dòng)傳送帶的按鈕”。只要一個(gè)對(duì)象身上有這個(gè)按鈕，它就是“可迭代的”。

1. 核心概念：誰是誰？

很多初學(xué)者容易混淆這兩個(gè)術(shù)語，我們先厘清定義：

可迭代對(duì)象 (Iterable)

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

迭代器 (Iterator)

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

簡單關(guān)系：
可迭代對(duì)象 是工廠，迭代器 是工廠派出的快遞員。
當(dāng)你使用 for...of 時(shí)，JS 引擎會(huì)自動(dòng)調(diào)用工廠的 Symbol.iterator 拿到快遞員，然后一直喊 next() 直到送完貨。

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

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

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

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

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

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

1. 擁有 next() 方法。
2. next() 返回一個(gè)對(duì)象 { value: any, done: boolean }。
   • value: 當(dāng)前產(chǎn)出的值。
   • done: 是否遍歷結(jié)束（true 表示結(jié)束）。

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

場(chǎng)景一：哪些是原生的可迭代對(duì)象？

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

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

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

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

場(chǎng)景二：for...of的本質(zhì)

當(dāng)你寫這段代碼時(shí)：

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

JavaScript 引擎實(shí)際上在執(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ù)下一個(gè)
}

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

這是面試的高頻考點(diǎn)：如何讓一個(gè)普通對(duì)象支持 for...of？

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

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

// ? 直接遍歷會(huì)報(bào)錯(cuò)：range is not iterable
// for (let num of range) { ... }

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

  // 返回一個(gè)符合“迭代器協(xié)議”的對(duì)象
  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
}

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

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

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

很多“類數(shù)組對(duì)象”（Array-like）不是可迭代對(duì)象，這經(jīng)常導(dǎo)致 Bug。

誤區(qū)：arguments和NodeList

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

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

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

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

最佳實(shí)踐：如何安全地遍歷？

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

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. 總結(jié)

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

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

以上就是一文詳解JavaScrip可迭代對(duì)象(Iterable)的詳細(xì)內(nèi)容，更多關(guān)于JavaScrip可迭代對(duì)象Iterable的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論