javascript自定义一个迭代器
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自定义一个迭代器的更多相关文章
- javascript自定义一个全类型读取的函数
我爱撸码,撸码使我感到快乐!大家好,我是Counter.因为我们知道,在JavaScript中有自带的方法可以读取类型,但是不很全面,今天来分享下如何自己定义一个函数,将所有传入参数的类型给打印出来, ...
- SharePoint 自定义的列表页面中添加javascript的一个 For循环语句后，该页面就打不开了。
一个sharepoint 2013的普通的列表的自定义新建页面,我在其中新添加几行javascript代码后页面就打不开了.如图所示: 真是一言不合,友谊的页面说打不开就打不开啊.后来慢慢比对发现是因 ...
- JavaScript中的迭代器和生成器[未排版]
JavaScript中的迭代器 在软件开发领域,"迭代"的意思是按照顺序反复多次执行一段程序,通常会有明确的终止条件. ECMAScript 6规范新增了两个高级特性:迭代器和生成 ...
- 掌握JavaScript中的迭代器和生成器，顺便了解一下async、await的原理
掌握JavaScript中的迭代器和生成器,顺便了解一下async.await的原理 前言 相信很多人对迭代器和生成器都不陌生,当提到async和await的原理时,大部分人可能都知道async.aw ...
- Javascript事件模型系列（四）我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- javascript自定义滚动条插件，几行代码的事儿
在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...
- JavaScript自定义事件
很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...
- jQuery Validate 表单验证插件----自定义一个验证方法
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- javascript自定义浏览器右键菜单
javascript自定义浏览器右键菜单 在书上看到document对象还有一个contextmenu事件,但是不知为什么w3school中找不到这个耶... 利用这个特性写了个浏览器的右键菜单, ...
随机推荐
- nginx反向代理解决跨域问题，使本地调试更方便
我们可能都会遇到一个这样的问题,线上环境是https://...,本地启动了项目,域名是localhost:8000等,本地想要访问线上的接口,直接在本地调试,却提示跨域,这个时候我们可以配置ngin ...
- 通俗理解 React 高阶函数
定义:高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. A higher-order component is a function that takes a componen ...
- php高并发之opcache
今天工作的时候接触到客户的一台服务器,业务逻辑比较简单 .估算pv在120w左右吧,用的是阿里云2c4g的服务器.一大早就开始卡顿了,登陆服务器后查看负载到了八九十. 之后就想办法调整一下吧.突然想起 ...
- Django框架之MVT（2）
Django框架之MVT 1. MVT模型 - module:模型,和数据库相关的 - template:模板,存放html文件,模板语法(目的是将变量如果巧妙的嵌入到h ...
- eShopOnContainers（一）
微软微服务架构eShopOnContainers(一) 为了推广.Net Core,微软为我们提供了一个开源Demo-eShopOnContainers,这是一个使用Net Core框架开发的,跨平台 ...
- HDU 1087 E - Super Jumping! Jumping! Jumping! DP
http://acm.hdu.edu.cn/showproblem.php?pid=1087 设dp[i]表示去到这个位置时的最大和值.(就是以第i个为结尾的时候的最大值) 那么只要扫描一遍dp数组, ...
- 持续集成~Jenkins构建dotnetCore的项目
上周一个大件就是dotnet core2.0发布了,伴随着.NET Standard2.0也发布了,整个微软的生态环境大好,当然也有一个BUG出来了,比如EFCore对Mysql的支持比起1.1来说, ...
- 渣渣菜鸡的 ElasticSearch 源码解析 —— 启动流程（上）
关注我 转载请务必注明原创地址为:http://www.54tianzhisheng.cn/2018/08/11/es-code02/ 前提 上篇文章写了 ElasticSearch 源码解析 -- ...
- UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 9865: illegal multibyte sequence 解决办法
解决办法 ; a=r.text.replace('\xa0',' ') 详情参见https://stackoverflow.com/questions/10993612/python-removing ...
- DOM所有的命令(CMD)
刚接触电脑的时候是从DOS系统开始,DOS时代根本就没有Windows这样的视窗操作界面,只有一个黑漆漆的窗口,让你输入命令.所以学DOS系统操作,cmd命令提示符是不可或缺的.可以告诉大家,大多数的 ...