es6 for of 循环
es6 新增了 for of 循环,只要继承了Iterator 接口的数据集合都可以使用 for of 去循环
for of 循环,统一数据集合的循环方法,解决了forEach循环的不能使用break contain ,遍历时,循环能够按某种方式排序
js 集合中能默认使用for of 有,数组,类数组,字符串,map,set
// for of 数组
for (let item of [,,,,]) {
console.log(item); //1,2,3,4,5
}
//for of set
for (let item of new Set().add('').add('').add('')) {
console.log(item); //2,3,4
}
//for of map
for (let item of new Map().set({a:''},'').set({a:''},'').set({a:''},'')) {
console.log(item); //[{0:{a:'1'},1:undefined},2],[{0:{a:'2'},1:undefined},3][{0:{a:'2'},1:undefined},4]
}
// for of 字符串
//使用generator 函数 类数组实现iterator接口
let lszarray3 = {
0: '1234',
1: '321',
2: '12311',
length: 3,
}
lszarray3[Symbol.iterator] = function* () {
let index = 0;
let leng = this.length
let _self = this
for(;parseInt(index) < leng;index++) {
yield [index,_self[index]]
}
}
for(let item of lszarray3) {
console.log(item) //{0:1234} {1:321} {2 12311}
}
//使用generator 函数 对象实现iterator接口
//第一种方法
let lszarray4 = {
a: '12345',
b: '321',
c: '12311',
}
lszarray4[Symbol.iterator] = function* () {
let keys = Object.keys(this)
for(key of keys) {
yield [key,this[key]]
}
}
for(let item of lszarray4) {
console.log(item) //{a:1234} {b:321} {c 12311}
}
for(let item of 'aaabbb') {
console.log(item) //a a a b b b
}
//类数组 没找到列子,不是所有的类数组都能使用for of
let lszarray = {
: '',
: '',
: '',
length:
}
/* for(let item of lszarray) {
lszarray is not iterable
} */
// 要使类数组能使用 for of 则必须给类添加 Iterator 接口
// iterator 接口部署在 Symbol.iterator 属性上
lszarray[Symbol.iterator] = function () {
let index = ;
let self = this
return {
next: function () {
if(index < self.length) {
return {
value: self[index++], done: false
}
} else {
return {
value: , done: true
}
}
}
}
}
for(let item of lszarray) {
console.log(item) // 123 321 12311
}
对象默认使不能够使用for of 的,如果想要对象能使用 for of 则必须为对象添加Iterator接口,添加接口的方式和类数组差不多
/ 对象使用 for of 循环
// 新建一个对象objs
let objs = {
a: 'cz',
b: 'czzzz',
c: '',
vc: ''
}
//为objs 添加 Iterator
//在对象的Symbol.iterator 上添加方法
objs[Symbol.iterator] = function () {
let keys = Object.keys(this);
let _self = this;
let index =
return {
next () {
if(index < keys.length) {
return {
value: _self[keys[index++]], done: false
}
} else {
return {
value: , done: true
}
}
}
}
}
for(let item of objs) {
console.log(item) //cz czzzz 1233 2222
}
对于类数组来说,还有更简单的实现Iteration 的方式,直接引用数组上的[Symbol.iterator]方法
//类数组 直接引用数组上的Symbol.iterator
let lszarray2 = {
0: '123',
1: '321',
2: '12311',
length: 3,
[Symbol.iterator]: [][Symbol.iterator]
}
for(let item of lszarray2) {
console.log(item) //123 321 12311
}
对于Iteraot 接口,还可以使用generator 函数去实现
es6 for of 循环的更多相关文章
- ES6 for...of循环
1.for of const arr = ['red', 'green', 'blue']; for(let v of arr) { console.log(v); // red green blue ...
- ES6 for of循环, 可迭代接口,实现可迭代接口
在for of循环出现之前,for循环适合遍历普通的数组,for in循环比较适合遍历键值对,遍历数组对象的foreach方法,但是这些遍历 都有一定的局限性,所以在ES6之后引入了统一的遍历方式 f ...
- ES6 三层for循环的链式写法
假设有一个很复杂的数据,并且数据嵌套层数很多.如何避免用三层for循环呢? 有以下梨子,我们需要找到val值为12的,这个对象? 'use strict' let groups = [{ conten ...
- es6的foreach循环遍历
forEach forEach是Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: 结果: 这段代码相当于: for (var k = 0, length = array.length ...
- 六个漂亮的 ES6 技巧
六个漂亮的 ES6 技巧 转载 原文:2ality 译文:众成翻译 链接:http://www.zcfy.cc/article/346 在这篇文章里,我将演示 6 种 ES6 新特性的使用技巧.在每个 ...
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- 深入浅出ES6(五):不定参数和默认参数
作者 Jason Orendorff github主页 https://github.com/jorendorff 不定参数 我们通常使用可变参函数来构造API,可变参函数可接受任意数量的参数.例 ...
- es6使用技巧
##1.通过参数默认值实现强制参数 ES6 的参数默认值只有在真正使用时才会求值.这可以让你强制确保提供参数: /** * Called if a parameter is missing and * ...
- 深入浅出ES6:不定参数和默认参数
不定参数 我们通常使用可变参函数来构造API,可变参函数可接受任意数量的参数.例如,String.prototype.concat方法就可以接受任意数量的字符串参数.ES6提供了一种编写可变参函数的新 ...
随机推荐
- Python爬虫入门教程 61-100 写个爬虫碰到反爬了,动手破坏它!
python3爬虫遇到了反爬 当你兴冲冲的打开一个网页,发现里面的资源好棒,能批量下载就好了,然后感谢写个爬虫down一下,结果,一顿操作之后,发现网站竟然有反爬措施,尴尬了. 接下来的几篇文章,我们 ...
- HTML 练习显示隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ArcGIS API for JavaScript 入门教程[4] 代码的骨架
[回顾与本篇预览] 上篇简单介绍了JsAPI中的数据与视图,并告诉大家这两部分有什么用.如何有机连接在一起. 这一篇快速介绍一下前端代码的骨架.当然,假定你已经熟悉HTML5.CSS3和JavaScr ...
- redis-dump实现redis库迁移
最近公司有切换redis库的需求,找了个简单的redis迁移方法,不过也有缺点.就是对于实时性要求很高的redis库迁移无法做到数据的实时同步.不过对于简单的redis库备份和迁移还是可以的,各位看官 ...
- 3. [mmc subsystem] mmc core(第三章)——bus模块说明
零.说明 对应代码drivers/mmc/core/bus.c. 抽象出虚拟mmc bus,实现mmc bus的操作. 一.API总览 1.mmc bus相关 mmc_register_bus &am ...
- markdown 基本操作
无序列表:输入-之后输入空格有序列表:输入数字+“.”之后输入空格任务列表:-[空格]空格 文字标题:ctrl+数字表格:ctrl+t生成目录:[TOC]按回车选中一整行:ctrl+l选中单词:ctr ...
- 使用exceljs时报错:no such file or directory
最近使用exceljs生成excel并保存时,总是失败 await workbook.xlsx.writeFile(tep) .then(function () { context.result = ...
- 使用 docker-compose 快速安装Jenkins
本文分享在 docker 环境中,使用 docker-compose.yml 快速安装 Jenkins,以及使用主机中的 docker 打包推送镜像到阿里云 博客园的第100篇文章达成,2019的第一 ...
- BTrace 问题辅助排查工具使用手册
BTrace是调试神器,可以通过自己编写的脚本,获取应用的一切调用信息.而不需要重启应用! Btrace 项目源码信息(你行你上~) 项目地址:http://github.com/btraceio/b ...
- MacBook IDEA激活码(附视频)
Windows激活请看这里:IDEA激活码 此教程实时更新,请放心使用:如果有新版本出现猪哥都会第一时间尝试激活: idea官网下载地址:https://www.jetbrains.com/idea/ ...