var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]); for (var e of engines) { console.log(e); } // Gecko // Trident // Webkit var es6 = new Map(); es6.set("edition", 6); es6.set("committee", "TC39"); es6.set("standard", "ECMA-262"); for (var [name, value] of es6) { console.log(name + ": " + value); } // edition: 6 // committee: TC39 // standard: ECMA-262
由上述的代码可以看出，for...of 循环遍历Map 和 Set 结构时，遍历的顺序是按照各个成员被添加进数据结构的顺序，Set 结构遍历时返回的是一个值，而 Map 结构遍历时返回的是一个数组，该数组的两个成员分别为当前 Map 成员的键名和键值。
（3）类数组对象
字符串
// 普通的字符串遍历 let str = "yuan"; for (let s of str) { console.log(s); // y u a n } // 遍历含有 32位 utf-16字符的字符串 for (let x of 'a\uD83D\uDC0A') { console.log(x); } // 'a' // '\uD83D\uDC0A'
DOM NodeList 对象
let paras = document.querySelectorAll("p"); for (let p of paras) { p.classList.add("test"); }
arguments 对象
function printArgs() { for (let x of arguments) { console.log(x); } } printArgs("a", "n"); // "a" // "n"
没有 Iterator 接口类数组对象的遍历处理
借用 Array.from 方法处理
let arrayLike = { length: 2, 0 : 'a', 1 : 'b' }; // 报错 for (let x of arrayLike) { console.log(x); } // 正确 for (let x of Array.from(arrayLike)) { console.log(x); }
（4）对象
对于普通对象，不能直接使用 for...of 遍历，否则会报错，必须部署了 Iterator 接口才能使用。如下两种方法部署：
// 方法一：使用 Object.keys 方法讲对象的键名生成一个数组 for (var key of Object.keys(someObject)) { console.log(key + ": " + someObject[key]); } // 方法二：使用Generator 函数将对象重新包装一下 function * entries(obj) { for (let key of Object.keys(obj)) { yield[key, obj[key]]; } } for (let[key, value] of entries(obj)) { console.log(key, "->", value); } // a -> 1 // b -> 2 // c -> 3
三、迭代器应用实例
1、斐波那契数列
下面我们就使用迭代器来自定义自己的一个斐波那契数列组，我们直到斐波那契数列有两个运行前提，第一个前提是初始化的前两个数字为0，1,第二个前提是将来的每一个值都是前两个值的和。这样我们的目标就是每次都迭代输出一个新的值。
var it = { [Symbol.iterator]() { return this }, n1: 0, n2: 1, next() { let temp1 = this.n1, temp2 = this.n2; [this.n1, this.n2] = [temp2, temp1 + temp2] return { value: temp1, done: false } } } for (var i = 0; i < 20; i++) { console.log(it.next()) } // "value": 0, "done": false } { "value": 1, "done": false } { "value": 1, "done": false } { "value": 2, "done": false } { "value": 3, "done": false } { "value": 5, "done": false }... { "value": 2584, "done": false } { "value": 4181, "done": false }
2、任务队列迭代器
我们可以定义一个任务队列，该队列初始化时为空，我们将待处理的任务传递后，传入数据进行处理。这样第一次传递的数据只会被任务１处理，第二次传递的只会被任务２处理… 代码如下：
var Task = { actions: [], [Symbol.iterator]() { var steps = this.actions.slice(); return { [Symbol.iterator]() { return this; }, next(...args) { if (steps.length > 0) { let res = steps.shift()(...args); return { value: res, done: false } } else { return { done: true } } } } } } Task.actions.push(function task1(...args) { console.log("任务一：相乘") return args.reduce(function(x, y) { return x * y }) }, function task2(...args) { console.log("任务二：相加") return args.reduce(function(x, y) { return x + y }) * 2 }, function task3(...args) { console.log("任务三：相减") return args.reduce(function(x, y) { return x - y }) }); var it = Task[Symbol.iterator](); console.log(it.next(10, 100, 2)); console.log(it.next(20, 50, 100)) console.log(it.next(10, 2, 1)) // 任务一：相乘 { "value": 2000, "done": false }任务二：相加 { "value": 340, "done": false }任务三：相减 { "value": 7, "done": false }
3、延迟执行