關於iterable類型的遍歷

02-01

在項目開發中我們經常會遇到要對一些數據進行遍歷的情況，例如數組Array類型，傳統的方法是通過for循環來實現，但是循環的對象必須是有下標的。但是像Map和Set就沒有下標，那我們怎樣對它們進行遍歷呢？

iterable類型的遍歷

在ES6標準中引入了新的iterable類型，Array、Map和Set都屬於iterable類型。

for … of是ES6引入的新的語法，iterable類型的集合可以通過新的for … of循環來遍歷。

使用for … of循環遍歷集合的方法如下：

const Arr = [1, 2, 3];nnconst set = new Set([A, B, C]);nnvar map = new Map([[1, x], [2, y], [3, z]]);nnfor (let i of Arr) { // 遍歷Arraynn alert(i);nn}nnfor (let i of set) { // 遍歷Setnn alert(i);nn}nnfor (let i of map) { // 遍歷Mapnn alert(i[0] + = + i[1]);nn}n

我們知道，在for … of出現之前，還有一種for … in循環，那麼for … of和for … in循環有什麼區別？

for ... in循環它遍歷的實際上是對象的屬性名稱。一個Array數組實際上也是一個對象，它的每個元素的索引被視為一個屬性。

當我們手動給Array對象添加了額外的屬性後，for ... in循環將帶來意想不到的意外效果：

var Arr = [a, b, b];nnArr.name = Hello;nnfor (let i in Arr) {nn alert(i); // 0, 1, 2, namenn}nnconsole.log(Arr.length); // 3n

從上面的結果可以看出來，for ... in循環把name包括在內，但Array的length屬性卻不包括在內。

for ... of循環則完全修復了這些問題，它只循環集合本身的元素:

var Arr = [a, b, c];nnArr.name = Hello;nnfor (let i of Arr) {nn alert(i); // a, b, cnn}n

然而，更好的方式是直接使用iterable內置的forEach方法，它接收一個函數，每次迭代就自動回調該函數。以Array為例：

var Arr = [1, 2, 3];nnArr.forEach(function (element, index, array) {nn alert(element);// 1,2,3nn});n

Set與Array類似，但Set沒有索引，也就是下標，所以回調函數的前兩個參數都是元素本身：

var s = new Set([A, B, C]);nns.forEach(function (element, sameElement, set) {nn alert(element);nn});n

Map的回調函數參數依次為value、key和map本身：

var map = new Map([[1, x], [2, y], [3, z]]);nnm.forEach(function (value, key, map) {nn alert(value);nn});n

上面這些回調函數中的一些參數有事後並不會用到，所以我們寫的時候可以省略它們，如果你只需要獲得Array的element，那麼你可以這樣做：

var Arr = [1, 2, 3];nnArr.forEach(function (element) {nn alert(element);nn});n

本文學習整理自：http://www.liaoxuefeng.com/ 的 JavaScript 教程。

本文同步發佈於同名微信公眾號：WeCode365，有興趣的同學可以關注一下。