前言

許多初級前端開發(fā)者在往中級邁進的過程中，面試經常問到的一個就是迭代器和生成器，其實在開發(fā)中都用過，但是并不知道這是什么，或者有些許了解但并不夠深入。那這篇文章就對這一部分開發(fā)者會有一定的幫助，講清楚迭代器這玩意。

較早的迭代

迭代肯定知道，簡單理解起來就是循環(huán)，在JavaScript 中，計數循環(huán)便是最簡單的一種。示例：

for(let i = 0; i < 9; ++i){
	console.log("[ i ]", i);
}

迭代的基礎就是循環(huán)，它包含幾個必要條件：

• 可以指定迭代的次數
• 可以指定每次迭代執(zhí)行的操作
• 每次迭代都在下一次迭代開始前完成
• 順序都是事先定義好的

當需要循環(huán)遍歷一個數組的時候，迭代是在一個有序的集合上進行的，「有序」即為數組中的所有元素都可以按照順序從第一項到最后一項被遍歷到。因為數組有確定的長度，以及每一項都可以通過索引下標去獲取，也就是說可以通過索引去遍歷整個數組。示例：

const arr = ["a", "b", "c"];

for(let i = 0; i < arr.length; ++i){
	console.log(arr[i]);
}

但是這種模式必須要事先知道使用的是什么數據結構，例如數組，如果換成其它數據類型，或者具有隱式順序的數據結構，那么遍歷的順序就不可確定。

于是在 ES5 中新增了forEach()方法。示例：

const arr = ["a", "b", "c"];

arr.forEach(item=>{
	console.log(item);
});

這個方法就不用同數組索引去遍歷和獲取單項的取值，但無法標識迭代什么時候結束，因此僅適用于數組的遍歷。為了解決這些問題，ES6 之后，JavaScript 支持了迭代器模式。

迭代器模式

迭代器模式是一種非常抽象的說法，可以把它理解成數組或者集合這一類的對象，它們的元素是有限的，且互相獨立無歧義。引用紅寶書的解釋，即為：

迭代器模式（特別是在ECMAScript這個語境下）描述了一個方案，即可以把有些結構稱為“可迭代對象”（iterable），因為它們實現了正式的Iterable接口，而且可以通過迭代器Iterator消費。

迭代器工廠函數

迭代器工廠函數，也就是 Symbol.iterator()，它是大部分內置類型都含有的默認屬性，通過它暴露 Iterable 接口（可迭代協(xié)議），也就是說要想數據類型支持迭代，那么該類型必須支持可迭代協(xié)議。

ECMAScript 中規(guī)定暴露的默認迭代器，必須以“Symbol.iterator”作為鍵，返回一個新的迭代器。檢查是否存在默認迭代器屬性的方法也很簡單。示例：

const obj = {};
const arr = ["a", "b", "c"];

console.log(obj[Symbol.iterator]); // underfined
console.log(arr[Symbol.iterator]); // f values() { [native code] }

console.log(arr[Symbol.iterator]()); // ArrayIterator {}

當然，我們實際開發(fā)中是不用顯示調用迭代器工廠函數的，支持可迭代協(xié)議的數據類型會自動兼容接受可迭代對象的任何語言特性，例如當我們使用循環(huán)、for-of、解構、擴展操作符的時候，會自動在后臺調用提供的可迭代對象的迭代器工廠函數，從而創(chuàng)建一個迭代器。

迭代器協(xié)議

迭代器協(xié)議約定迭代器是一種一次性使用的對象，當調用迭代器工廠函數后，返回一個next()方法，每一次迭代成功都會調用該方法，得知下一個迭代的值，如果不調用，則不確定迭代的當前位置。

next()方法返回一個對象，包含量屬性：done和value，done 表示是否可以繼續(xù)調用next()方法獲取下一個值，意為是否「耗盡」，返回一個 Boolean 值； value 表示可迭代對象的下一個值。done 為 true 時，value 則為 underfined。done 為 false 時，則會繼續(xù)調用下一個迭代。示例：

// 可迭代對象
let arr = ['foo', 'bar'];// 迭代器工廠函數
console.log(arr[Symbol.iterator]);// f values() { [native code] }

// 迭代器
let iter = arr[Symbol.iterator]();
console.log(iter); // ArrayIterator{}

// 執(zhí)行迭代
console.log(iter.next()); // { done: false, value: 'foo' }
console.log(iter.next()); // { done: false, value: 'bar' }
console.log(iter.next()); // { done: true, value: undefined }

寫在最后

通過迭代器協(xié)議，你可以實現一個自定義的迭代器，比如規(guī)定迭代器可以被迭代的次數，或者提前終止迭代。

到此這篇關于ECMAScript中迭代器的文章就介紹到這了,更多相關ECMAScript迭代器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論