ES6中Iterator的使用

9人阅读 评论(0) 收藏 举报
分类:

Iterator概念

Iterator是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(即一次处理该数据结构的所以成员)。

手写Iterator接口:

//手写iterator接口
        function iterator(arr) {
            let index=0;
            return{
                next:function () {
                    return index<arr.length?{value:arr[index++],done:false}:{value:undefined,done:true}
                }
            }
        }
       const arr=[1,'ok',2];
        const it=iterator(arr);
        console.log(it.next());//{value: 1, done: false}
        console.log(it.next());//{value: "ok", done: false}
        console.log(it.next());//{value: 2, done: false}
        console.log(it.next());//{value: undefined, done: true}
        console.log(it.next());//{value: undefined, done: true}

Iterator接口

默认Iterator接口部署在数据结构的Symbol.iterator属性,Symbol.iterator属性本身也是函数,就是当前数据结构默认的遍历生成器函数。执行这个函数,就会返回一个遍历器。

原生具备Iterator接口的数据结构如下:

1) Array

2) Map

3) Set

4) String

5) TypedArray

6) 函数的argument对象

对于部署了Iterator接口的数据结构都可以使用for of循环。

//for of 循环
        const ofArr=[1,2,3];//数组
        for(let i of ofArr){
            console.log(i)
        }

        //Set数据结构
        const set=new Set(['a','b','c']);
        for(let item of set){
            console.log(item);
        }

        //Map数据结构
        const map=new Map([['a',1],['b',2],['c',3]]);
        for(let data of map){
            console.log(data)
        }
        for(let [key,value] of map){//结构赋值
            console.log(key,value);
        }


 //凡是具有Symbol.iterator属性的结构都具有iterator接口
        const arr=[1,2,3];
        const set=new Set(['a','b','c']);
        const map=new Map([['a',1]]);
        const itArr=arr[Symbol.iterator]();
        const itSet=set[Symbol.iterator]();
        const itMap=map[Symbol.iterator]();

        console.log(arr)
        console.log(itArr)

        console.log(set)
        console.log(itSet)

        console.log(map)
        console.log(itMap)

        console.log(itSet.next());
        console.log(itSet.next());
        console.log(itSet.next());
        console.log(itSet.next());
        console.log(itSet.next());


查看评论

PHP中Yii2框架的使用及项目实战

-
  • 1970年01月01日 08:00

ES6学习——迭代器(Iterators):接口规范概述

这篇文章我们仔细看一下ES6规范中是如何定义Iterator的接口,在25.1章节中: @@iterator属性可以用Symbol.iterator表示,上面的意思是说一个对象要想是iterabl...
  • kittyjie
  • kittyjie
  • 2016-01-20 08:55:43
  • 2477

ES6学习笔记之Iterator和for...of循环

原文地址:http://es6.ruanyifeng.com/#docs/iteratorIterator(遍历器)的概念JavaScript原有的表示“集合”的数据结构,主要是数组(Array)和对...
  • Real_Bird
  • Real_Bird
  • 2017-02-22 11:09:23
  • 575

ES6详解七:循环的秘密 - iterator 和 yield

如果学过设计模式或者java之类的肯定知道 iterator 是什么,在 Symbol.iterator 出现后,JS中也可以自己定义一个迭代器。 只要一个对象实现了正确的 Symbol.itera...
  • lihongxun945
  • lihongxun945
  • 2015-10-07 19:46:45
  • 9126

es6 javascript的Iterator 和 for...of 循环

1 Iterator( 遍历器) 的概念JavaScript 原有的表示“ 集合” 的数据结构, 主要是数组( Array) 和对象( Object), ES6 又添加了 Map 和 Set。 这样就...
  • qq_30100043
  • qq_30100043
  • 2016-12-05 12:27:45
  • 5601

ES6 -- 遍历器Iterator和for...of

基本概念对于数组的访问我们可以使用for(var i=0;i
  • u014328357
  • u014328357
  • 2017-05-10 16:49:15
  • 401

深入理解ES6 ---对象(object)

前言 在JavaScript中几乎每一个值都是某种特定的对象 ,例如数字是属于Number 类型的对象,字符串是String 类型的对象.可见对象在JavaScript中的重要性,而在ES6中着重通...
  • qq_29594393
  • qq_29594393
  • 2017-09-13 00:16:18
  • 293

ES6入门——Iterator和for...of循环

Iterator(遍历器)遍历器(Iterator)是一种协议,任何对象只要部署了这个协议,就可以完成遍历操作。在ES6中遍历操作特质for….of循环。它的作用主要有两个: 为遍历对象的属性提供统一...
  • u014695532
  • u014695532
  • 2016-07-03 13:58:53
  • 4155

ES6学习——迭代器(Iterators):return和throw概述

Iterator接口还有两个可选方法,一直都没讲,主要是由于浏览器没有完全支持这两个方法。最后我们看一下: 然后规范上有一段描述: NOTE 2 Typically callers of ...
  • kittyjie
  • kittyjie
  • 2016-01-22 09:26:07
  • 1581

ES6: Iterator

简介 遍历器Iterator它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。 遍历过程 (1...
  • zhxh1636
  • zhxh1636
  • 2018-02-19 22:27:00
  • 92
    个人资料
    持之以恒
    等级:
    访问量: 6万+
    积分: 1340
    排名: 3万+
    博客专栏
    Vue.JS

    文章:1篇

    阅读:129
    最新评论