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 循环的更多相关文章

  1. ES6 for...of循环

    1.for of const arr = ['red', 'green', 'blue']; for(let v of arr) { console.log(v); // red green blue ...

  2. ES6 for of循环, 可迭代接口,实现可迭代接口

    在for of循环出现之前,for循环适合遍历普通的数组,for in循环比较适合遍历键值对,遍历数组对象的foreach方法,但是这些遍历 都有一定的局限性,所以在ES6之后引入了统一的遍历方式 f ...

  3. ES6 三层for循环的链式写法

    假设有一个很复杂的数据,并且数据嵌套层数很多.如何避免用三层for循环呢? 有以下梨子,我们需要找到val值为12的,这个对象? 'use strict' let groups = [{ conten ...

  4. es6的foreach循环遍历

    forEach forEach是Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: 结果: 这段代码相当于: for (var k = 0, length = array.length ...

  5. 六个漂亮的 ES6 技巧

    六个漂亮的 ES6 技巧 转载 原文:2ality 译文:众成翻译 链接:http://www.zcfy.cc/article/346 在这篇文章里,我将演示 6 种 ES6 新特性的使用技巧.在每个 ...

  6. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  7. 深入浅出ES6(五):不定参数和默认参数

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 不定参数 我们通常使用可变参函数来构造API,可变参函数可接受任意数量的参数.例 ...

  8. es6使用技巧

    ##1.通过参数默认值实现强制参数 ES6 的参数默认值只有在真正使用时才会求值.这可以让你强制确保提供参数: /** * Called if a parameter is missing and * ...

  9. 深入浅出ES6:不定参数和默认参数

    不定参数 我们通常使用可变参函数来构造API,可变参函数可接受任意数量的参数.例如,String.prototype.concat方法就可以接受任意数量的字符串参数.ES6提供了一种编写可变参函数的新 ...

随机推荐

  1. JS 图片放大镜

    今天练习一个小demo, 从本地读取图片, 然后实现类似淘宝放大镜的效果, 再加两个需求 1 .可以调节缩放比例,默认放大两倍 2 . 图片宽高自适应, 不固定宽高 话不多说先看效果: 原理:1, 右 ...

  2. js-刮刮卡效果,由jquery-eraser源码改的vue组件

    vue-eraser 一款用于vue刮刮卡的组件 github地址: vue-eraser npm地址: vue-eraser 在网上有看到过几个版本的组件,都有点问题 1.拉快了,就会断,连不起来( ...

  3. 第13章 Base64 URL编码 - IdentityModel 中文文档(v1.0.0)

    JWT令牌使用Base64 URL编码进行序列化. IdentityModel包括Base64Url帮助编码/解码的类: var text = "hello"; var b64ur ...

  4. C#动态调用泛型类、泛型方法

    在制作一个批量序列化工具时遇到了如下问题,在此记录一下,仅供参考. 主程序加载另一个程序集,将其中的所有类取出,然后对这些类分别调用泛型类或泛型方法.控制台程序解决方案如下: Main工程:提供Wor ...

  5. 5.JAVA-内部类实例

    在JAVA中,类内部可以添加其它类,当然也可以实现类继承(后续章节学习). 本章示例-实现部门类和雇员类 可以通过部门对象,查找该部门的雇员信息. 可以通过雇员对象,查找该雇员所在的部门信息 代码如下 ...

  6. HTML/CSS初步了解

    一.CSS是什么? 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示 ...

  7. SAP MM Storage Location Missing in MD04 Result?

    SAP MM Storage Location Missing in MD04 Result? Today I received a ticket from business team, a user ...

  8. Ubuntu安装apache+Yii2

    1.下载Yii2 https://www.yiichina.com/download 2.将解压后的文件放在指定的位置,这里是/home/www/yii/ 3.安装apache2 sudo apt-g ...

  9. Exp4恶意代码分析 20164312 马孝涛

    1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行.  1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,sy ...

  10. 解决ASP.NET Core MVC调试慢的问题

    最近在做的一个项目中,发现网页端同时发起了4个AJAX请求需要数秒才获取到响应,太慢了,当我把请求数降低为1个的时候,速度看起来就比较正常,增加到2个同时的请求后,速度就有些慢了,3个的话就明显慢了, ...