Iterator、for..of，for...in和自定义遍历器

pcChao 发布于2019-08-20 18:07 / 2061人阅读

摘要：，和自定义遍历器依次打印注释就是一个指针指针默认在的位置没有遍历完的时候的值是遍历完了就是意义提高具有遍历接口数据的效率特点它用来访问具有遍历接口数据有一个方法指针，普通数组遍历输出。

Iterator、for..of，for...in和自定义遍历器

Iterator：

var arr = [1,2,3,4,5];
    var ite = arr[Symbol.iterator]();
    console.log(ite.next());
    console.log(ite.next());
    console.log(ite.next());
    console.log(ite.next());
    console.log(ite.next());
    console.log(ite.next());
    //依次打印：Object {value: 1, done: false}；
               Object {value: 2, done: false};
           Object {value: 3, done: false};
           Object {value: 4, done: false};
           Object {value: 5, done: false};
           Object {value: undefined, done: true}.
注释:1.Iterator就是一个指针;
     2.指针默认在-1的位置;
     3.没有遍历完的时候done的值是false,遍历完了就是true;
     4.意义:提高具有遍历接口数据的效率;
     5.特点:它用来访问具有遍历接口数据,有一个next方法(指针).

for..of，for...in：

普通数组遍历：

let arr = [1,2,3,4,5];
    for(let item of arr){
        console.log(item);
    }
    //输出：1 2 3 4 5。

迭代器遍历：

let iterator = arr[Symbol.iterator]();
    let result = iterator.next();
    while(!result.done){
        console.log(result.value);
        result=iterator.next();
    }
    //输出 1 2 3 4 5。

数组 Set Map

var s = new Set([1,2,3]);
    console.log(s);//打印：Set(3) {1, 2, 3}；
    var itera = s[Symbol.iterator]();
    console.log(itera.next());//打印：Object {value: 1, done: false}；
        
    var m = new Map([["age",21],["sex","男"]]);
    m.set("name","宋泽");
    console.log(m);//打印：Map(3) {"age" => 21, "sex" => "男", "name" => "宋泽"}；
    var i = m[Symbol.iterator]();
    console.log(i.next());//打印：Object {value: Array(2), done: false}；
                
    let obj = {x:1,y:2,z:3};
    let arr = ["a","b","c"];
    for(let key in obj){
        console.log(key);//打印：x y z；
        console.log(obj[key]);//打印：x 1 y 1 z 1；
    }
    for(let key in arr){
        console.log(key);//打印：x y z；
        console.log(arr[key]);//打印：x 1 y 1 z 1；
    }
注释:1.遍历对象用forin,遍历数组,Map,Set,类数组用for of。
     2.for in可以遍历对象,也可以遍历数组.

自定义遍历器：

var arr = [1,2,3,4,5];
    function Iterator(arr){
        let i = -1;  //遍历器默认指在-1的位置；
        function next(){  //返回一个方法；
            i++;  //当next的时候，i向后移；
            let value;  //声明一个空的变量；
            let done = flase; //done的默认值是没有遍历完成；
            if(i == arr.length){  //如果i等于数组的长度的时候，i就溢出了，所以value的值是undefined，done的值是true；
                value = undefined;
                done = true;
            }else{  //否则value的值就等于数组中的值；
                value=arr[i];
            }
            return {value:value,done:done}; //返回两个值，一个值是value，另一个值是done；
        }
        return {next:next};  //返回next方法；
    }
            
    var ite = arr[Symbol.iterator]();
    console.log(ite.next());
    console.log(ite.next());
    console.log(ite.next());
    console.log(ite.next());
    console.log(ite.next());
    console.log(ite.next());
    依次打印：Object {value: 1, done: false}；
         Object {value: 2, done: false};
         Object {value: 3, done: false};
         Object {value: 4, done: false};
         Object {value: 5, done: false};
         Object {value: undefined, done: true}.

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

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

ECMAScript6(14)：iterator 迭代器

摘要：由于中引入了许多数据结构算上原有的包括等等数组需要一个东西来管理他们这就是遍历器。数组默认遍历器遍历值相当于依次输出依次输出依次输出依次输出不难看出默认得到值而只能得到索引。即遍历器的本质就是一个指针。由于 ES6 中引入了许多数据结构, 算上原有的包括Object, Array, TypedArray, DataView, buffer, Map, WeakMap, Set, We...

toddmark 2019-08-23 11:46 评论0 收藏0
ES6语法之可迭代协议和迭代器协议

摘要：有两个协议可迭代协议和迭代器协议。为了变成可迭代对象，一个对象必须实现或者它原型链的某个对象必须有一个名字是的属性迭代器协议该迭代器协议定义了一种标准的方式来产生一个有限或无限序列的值。 ECMAScript 2015的几个补充，并不是新的内置或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。有两个协议：可迭代协议和迭代器协议。可迭代协议可迭代协议允许 JavaScri...

sarva 2019-08-22 11:23 评论0 收藏0
JavaScript 设计模式（五）：迭代器模式

摘要：文章内容分两部分前半部分为迭代器模式概念后半部分为中迭代器上半部分开始迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。下半部分开始的迭代器迭代器等同于遍历器。执行该函数，会返回一个遍历器对象。 showImg(https://segmentfault.com/img/bVbuyaZ?w=800&h=600); 文章内容分两部分：前半部分为迭...

zhou_you 2019-08-23 18:26 评论0 收藏0
从forEach到迭代器

摘要：本文从使用对数组进行遍历开始说起，粗略对比使用进行遍历的差异，并由此引入中可迭代对象迭代器的概念，并对其进行粗略介绍。说到这里，就继续说一下迭代器关闭的情况了。确实，符合可迭代协议和迭代器协议的。本文从使用 forEach 对数组进行遍历开始说起，粗略对比使用 forEach , for...in , for...of 进行遍历的差异，并由此引入 ES6 中可迭代对象/迭代器的概...

rockswang 2019-08-23 12:36 评论0 收藏0
[前端漫谈_1] 从 for of 聊到 Generator

摘要：数据的层级意味着迭代数据结构并提取它的数据。对于技术人而言技是单兵作战能力，术则是运用能力的方法。在前端娱乐圈，我想成为一名出色的人民艺术家。聊聊 for of 说起 for of 相信每个写过 JavaScript 的人都用过 for of ，平时我们用它做什么呢？大多数情况应该就是遍历数组了，当然，更多时候，我们也会用 map() 或者 filer() 来遍历一个数组。但是就...

miqt 2019-08-23 17:54 评论0 收藏0