Iterator 接口及for...of循环

1.如何判断数据结构是否部署可Iterator 接口（即可遍历的）

一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器对象。该对象的根本特征就是具有next方法。每次调用next方法，都会返回一个代表当前成员的信息对象，具有value和done两个属性。至于属性名Symbol.iterator，它是一个表达式，返回Symbol对象的iterator属性，这是一个预定义好的、类型为 Symbol 的特殊值

2.原生具备  Iterator 接口的数据结构：

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

 3.如何在原型链上部署Symbol.iterator方法

     //对象添加 Iterator 接口

1. Obj.prototype[Symbol.iterator] = function() {}

 //对于类似数组的对象（存在数值键名和length属性），部署 Iterator 接口，有一个简便方法，就是Symbol.iterator方法直接引用数组的 Iterator 接口。

1. NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
2. // 或者
3. NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];
5. [...document.querySelectorAll('div')] // 可以执行了

 

4.默认调用 Iterator 接口 的场景

1）for...of

2）解构赋值

3）扩展运算符

4）yield*

5）Array.from()

6）Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])

7）Promise.all()

8）Promise.race()

5.for ... of 与for in的区别

1）for...in循环，只能获得对象的键名，不能直接获取键值；for...of循环，允许遍历获得键值。

1. var arr = ['a', 'b', 'c', 'd'];
3. for (let a in arr) {
4. console.log(a); // 0 1 2 3
5. }
7. for (let a of arr) {
8. console.log(a); // a b c d
9. }

2）for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会遍历原型链；

    //for...of循环不会返回数组arr的foo属性

1. let arr = [3, 5, 7];
2. arr.foo = 'hello';
4. for (let i in arr) {
5. console.log(i); // "0", "1", "2", "foo"
6. }
8. for (let i of arr) {
9. console.log(i); // "3", "5", "7"
10. }

3）for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以 及 Generator 对象。

4）for… of它可以与break、continue和return配合使用(forEach不可以)