for-of-与-for-in

jiezi

6 年前

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 的遍历过程

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

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

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

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

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

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

for…in 的要点 ：