js中对象分为可迭代和不可迭代 如果是可迭代哪它就会有一个[Symbol.iterator] 函数

这个函数就是对象的迭代器函数，如用for of 如果遍历的对象没有这个迭代方法那么就会报错

for of 传入的是可迭代对象,但是如何吧一个不可迭代的对象变为可迭代的对象呢！

很简单就是自己写一个[Symbol.iterator] 函数。

代码如下:

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script>

        let obj = {

            a: 1,

            b: 2

        }

        obj[Symbol.iterator] = function () {

            //取到对象的每个key值返回一个数组

            let keys = Object.keys(obj);

            //取到key值的长度

            let len = keys.length;

            //定义循环变量

            let n = 0;

            //返回对象 每次迭代会自动调用对象里面的next方法

            return {

                next() {

                    //返回值有value和done

                    //value能自定义

                    //done为true跳出循环

                    return n < len ? {

                        value: { k: keys[n], v: obj[keys[n++]] },

                        done: false

                    } : {

                            done: true

                        }

                }

            }

        }

        //循环

        //for of 只能遍历可迭代对象

        //所以自己写了个迭代器 详情请查阅web迭代协议

        //返回的是个对象的key和value

        for (let { k, v } of obj) {

            console.log(k, v);

        }

    </script>

</body>

</html>

使用生成器迭代也就是Generator函数代码如下:

let obj = {

            a: 1,

            b: 2

        }

        obj[Symbol.iterator] = function *(){

           let keys = Object.keys(obj);

           //取到key值的长度

           let len = keys.length;

           //定义循环变量

            let n = 0;

            //条件判断

            while(n < len) {

                yield {k:keys[n],v: obj[keys[n++]]};

            }

        }

    //返回的是个对象的key和value

        for (let {k,v} of obj) {

            console.log(k,v);

        }

注释很完整就不多讲了，

2次输出结果相同

输出如下:

　　

　　希望能够帮助到你们！！

　　

javascript自定义一个迭代器的更多相关文章

  1. javascript自定义一个全类型读取的函数

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.因为我们知道,在JavaScript中有自带的方法可以读取类型,但是不很全面,今天来分享下如何自己定义一个函数,将所有传入参数的类型给打印出来, ...

  2. SharePoint 自定义的列表页面中添加javascript的一个 For循环语句后，该页面就打不开了。

    一个sharepoint 2013的普通的列表的自定义新建页面,我在其中新添加几行javascript代码后页面就打不开了.如图所示: 真是一言不合,友谊的页面说打不开就打不开啊.后来慢慢比对发现是因 ...

  3. JavaScript中的迭代器和生成器[未排版]

    JavaScript中的迭代器 在软件开发领域,"迭代"的意思是按照顺序反复多次执行一段程序,通常会有明确的终止条件. ECMAScript 6规范新增了两个高级特性:迭代器和生成 ...

  4. 掌握JavaScript中的迭代器和生成器，顺便了解一下async、await的原理

    掌握JavaScript中的迭代器和生成器,顺便了解一下async.await的原理 前言 相信很多人对迭代器和生成器都不陌生,当提到async和await的原理时,大部分人可能都知道async.aw ...

  5. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  6. javascript自定义滚动条插件，几行代码的事儿

    在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...

  7. JavaScript自定义事件

    很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...

  8. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  9. javascript自定义浏览器右键菜单

    javascript自定义浏览器右键菜单   在书上看到document对象还有一个contextmenu事件,但是不知为什么w3school中找不到这个耶... 利用这个特性写了个浏览器的右键菜单, ...

随机推荐

  1. 洛谷 P1070 道路游戏（noip 2009 普及组 第四题）

    题目描述 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有 nn个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针顺序依次将这 nn个机器人工厂编 ...

  2. Glassfish 4 修改server.log 等配置

    如果所示:

  3. JMeter(2) 集成jmeter+ant+jenkins

    一.ant安装 $su root $vi /etc/bashrc 插入两行(i+enter插入) export ANT_HOME=/usr/local/apache-ant-1.9.3 export ...

  4. Django-Rest-Framework的权限和频率

    Django-Rest-Framework的权限和频率 restful framework DRF的权限 权限是什么 权限到底是是干什么用的 比如,我们申请博客的时候,一定要向管理员申请,也就是说管理 ...

  5. BZOJ 1899&&luogu P2577: [Zjoi2004]Lunch 午餐 贪心+DP

    贪它,再大力DP(话说觉得此题简单的真的是大佬QAQ)我想了两天...QWQ 贪心:吃饭慢的先打饭(不太会证...) DP:f[i][j]表示前i个人,在1号窗口打饭的总时间时j,的最短时间 确定i的 ...

  6. GYM 101572C（模拟）

    要点 题意是:以颜色red举例,逆时针找最近的,顺时针找最近的,相减得到val:对三种颜色都做这事然后求和,卖掉最小的,更新,继续. 360度很小所以就像365天一样可以暴力前后扫.每次更新最多6个所 ...

  7. 关系型数据库---MySQL---数据库设计三大范式

    1.第一范式: 1.1.1 数据表的每个数据列具有原子性: 1.1.2 同一个数据表中内容相似的数据列必须消除: 2.第二范式: 第一范式的基础上,每个数据表只描述一件事: 3.第三范式: 第二范式的 ...

  8. 机器学习框架ML.NET学习笔记【7】人物图片颜值判断

    一.概述 这次要解决的问题是输入一张照片,输出人物的颜值数据. 学习样本来源于华南理工大学发布的SCUT-FBP5500数据集,数据集包括 5500 人,每人按颜值魅力打分,分值在 1 到 5 分之间 ...

  9. Joda-Time简介

    Joda-Time提供了一组Java类包用于处理包括ISO8601标准在内的date和time.可以利用它把JDK Date和Calendar类完全替换掉,而且仍然能够提供很好的集成. Joda-Ti ...

  10. CentOS7.2配置本地yum源

    1.检查是否有本地yum源 1)检查是否能连网 ping www.baidu.com 2)检查是否有本地yum源 yum list 2.挂载镜像文件 以上检查,说明确实是内网,也确实没有本地yum源, ...