for-of-与-for-in

• for…in 遍历对象的属性或数组索引（ES5）

eg1: 遍历数组

var arr=['a','b','c','d'];
        for(let index in arr){console.log(index);// 0 1 2 3
            console.log(arr[index]);// a b c d
        }

eg2: 遍历对象

      var obj={
            name:"Jin",
            age:11,
            [Symbol()]:123,
        }
        for(let index in obj){console.log(index);//name age 
            console.log(obj[index]);//Jin  11
        } 

eg3: 遍历对象的顺序

var obj={
            "49":"A",
            "a":"tt",
            "5":false,
            "1":"ss",
        }
        for(let index in obj){console.log(index);//1 5 49 a
            console.log(obj[index])//ss false A tt
        } 

for…in 的要点 ：

- 不支持 IE 浏览器（IE9 以下的）

- 遍历的顺序可能不是实际的内部顺序 (先遍历出整数属性，按照升序)，然后其他属性按照创建时的顺序遍历出来

-for in 会遍历数组所有的可枚举属性，包括原型中存在的属性（object.prototype 添加的属性）

-for in 一般用于遍历对象属性

-for in 无返回值

-Symbol 作为属性名，该属性不会出现在 for…in、循环中

• for…of 可遍历数组，Set,Map, 类数组对象 (eg:arguments,DOM NodeList 对象，字符串)（ES6）不能遍历对象

eg1: 遍历数组

 var arr=['a','b','c','d'];
         for(let key of arr){console.log(key);// a b c d
            console.log(arr[key]); //undefined undefined undefined undefined
        }

eg2: 遍历对象

 var obj={
            "49":"A",
            "a":"tt",
            "5":false,
            "1":"ss",
        }
        for(let key of obj){// 报错
            console.log(index);
        } 

eg3:for of 与 Object.keys() 遍历对象

 var obj={
            name:"Jin",
            age:11,
        }
        for(let value of Object.keys(obj)){console.log(value);//name age
            console.log(obj[value]);//Jin 11
        } 

eg4:for of 与 Object.keys() 遍历数组索引

var arr=['a','b','c'];
       for(let value of Object.keys(arr)){console.log(value);//0 1 2
           console.log(arr[value]);// a b c
       } 

eg4:for of 与 Object.entries() 遍历索引和值

 var arr=['a','b','c'];
        for(let [index,value] of Object.entries(arr)){console.log(index);//0 1 2
            console.log(value);//a b c
            console.log(arr[index]);//a b c
        } 

eg5:for of 与 Object.values() 遍历属性值

 var arr=['a','b','c'];
        for(let [index,value] of Object.values(arr)){console.log(index);//a b c
            console.log(value);//undefined undefined undefined
            console.log(arr[index]);//undefined undefined undefined
        } 

for…of 的要点：

-for of 其实遍历的是对象的 Symbol.iterator 属性，而对象没有该属性

- 不会遍历到对象属性和原型属性

- 如果要遍历对象，可与 Object.keys() 配合使用

- 配合 Object.entries() 输出数组索引和元素值 / 对象的属性和属性值，但 Symbol() 属性会忽略

- 配合 Object.values() 输出数组元素值 / 对象属性值，

- 一般用于遍历数组或者伪数组

- 无返回值

-Symbol 作为属性名，该属性不会出现在 for…in、for…of 循环中，也不会被 Object.keys()、Object.getOwnPropertyNames()、JSON.stringify() 返回

• Iterator(遍历器) 与 for…of

• 遍历器（Iterator） 它是一种接口，为各种不同的数据结构（Array,Object,Set,Map）提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
• Iterator 的作用

一是为各种数据结构，提供访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令 for…of 循环，当使用 for…of 循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。

• Iterator 的遍历过程

1. 创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
2. 第一次调用指针对象的 next 方法，可以将指针指向数据结构的第一个成员。
3. 第二次调用指针对象的 next 方法，指针就指向数据结构的第二个成员。
4. 不断调用指针对象的 next 方法，直到它指向数据结构的结束位置。每一次调用 next 方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含 value 和 done 两个属性的对象。其中，value 属性是当前成员的值，done 属性是一个布尔值，表示遍历是否结束。

• ES6 规定 ，默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性，或者说，一个数据结构只要具有 Symbol.iterator 属性，就可以认为是“可遍历的”Symbol.iterator 属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。
• 原生具备 Iterator 接口的数据结构

1. Array
2. Map
3. Set
4. String
5. TypedArray
6. 函数的 arguments 对象
7. NodeList 对象

• 对象（Object）之所以没有默认部署 Iterator 接口，是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定。
• 会默认调用 Iterator 接口场合

1. 解构赋值
2. 扩展运算符
3. yield*
4. for…of
5. Array.from()
6. Map()
7. Set()
8. WeakMap()
9. WeakSet()（比如 new Map([[‘a’,1],[‘b’,2]])）
10. Promise.all()
11. Promise.race()