for ...of 与 for... in

lijinke666 发布于2019-08-26 13:46 / 1920人阅读

摘要：也就是说，遍历器对象本质上，就是一个指针对象。规定，默认的接口部署在数据结构的属性，或者说，一个数据结构只要具有属性，就可以认为是可遍历的属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。

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...of for-in js js for-in while循环与for循环

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109474.html

JavaScript 的 4 种数组遍历方法： for VS forEach() VS for/in

摘要：对于，除非使用箭头函数，它的回调函数的将会变化。使用测试下面的代码，结果如下打印打印要点使用的规则要求所有回调函数必须使用箭头函数。译者按： JS 骚操作。原文：For vs forEach() vs for/in vs for/of in JavaScript 译者: Fundebug 本文采用意译，版权归原作者所有我们有多种方法来遍历 JavaScript 的数组或者...

joyqi 2019-08-26 13:35 评论0 收藏0
我们不一样：for...of与for...in

摘要：定义两者都是遍历的方法，最先能想到的区别是，前者是遍历键名，后者是遍历键值。一种数据结构只要部署了接口，就称之为可遍历的。中提供了一些具备原生接口的数据结构包括函数的对象对象。定义两者都是遍历的方法，最先能想到的区别是，前者是遍历键名，后者是遍历键值。看一下两者的定义： for...in 遍历当前对象的所有可枚举属性(包括自有属性，从原型继承的属性)，遍历顺序是无序的 for.....

Imfan 2019-08-26 11:51 评论0 收藏0
【快速入门系列】简述 for...in 和 for...of 区别

摘要：像和使用内置构造函数所创建的对象都会继承自和的不可枚举属性，例如的方法或的方法。循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性更接近原型链中对象的属性覆盖原型属性。遍历数组时推荐使用，其中为数组每一项的值。引言在对数组或对象进行遍历时，我们经常会使用到两种方法：for...in 和 for...of，那么这两种方法之间的区别是什么呢？让我们来研究研究。一...

ashe 2019-08-22 17:09 评论0 收藏0
2018 AI、机器学习、深度学习与 Tensorflow 相关优秀书籍、课程、示例链接集锦

摘要：机器学习深度学习与自然语言处理领域推荐的书籍列表人工智能深度学习与相关书籍课程示例列表是笔者系列的一部分对于其他的资料集锦模型开源工具与框架请参考。 showImg(https://segmentfault.com/img/remote/1460000014946199); DataScienceAI Book Links | 机器学习、深度学习与自然语言处理领域推荐的书籍列表 sho...

wenshi11019 2019-06-26 18:25 评论0 收藏0
2018 AI、机器学习、深度学习与 Tensorflow 相关优秀书籍、课程、示例链接集锦

摘要：机器学习深度学习与自然语言处理领域推荐的书籍列表人工智能深度学习与相关书籍课程示例列表是笔者系列的一部分对于其他的资料集锦模型开源工具与框架请参考。 showImg(https://segmentfault.com/img/remote/1460000014946199); DataScienceAI Book Links | 机器学习、深度学习与自然语言处理领域推荐的书籍列表 sho...

paulquei 2019-06-26 19:41 评论0 收藏0