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. 自学Python,新手上路,好资源免费分享

    Python 可以用来做什么? 在我看来,基本上可以不负责任地认为,Python 可以做任何事情.无论是从入门级选手到专业级选手都在做的爬虫,还是Web 程序开发.桌面程序开发还是科学计算.图像处理, ...

  2. 从壹开始前后端分离 40 || 完美基于AOP的接口性能分析

    旁白音:本文是不定时更新的.net core,当前主线任务的Nuxt+VueAdmin教程的 nuxt.js 之 tibug项目已上线,大家可以玩一玩:http://123.206.33.109:70 ...

  3. nodejs操作redis总结

    本文总结常见的使用node操作redis服务,redis的key是唯一的,如果一个key所对应的存储类型是string,则不能再次覆盖式设置key为hash; 1. 启动redis 这里我们使用doc ...

  4. 《前端之路》 之 前端 安全 XSS 原理以及防御手段

    什么是 XSS 一.XSS 什么是 XSS XSS,即 Cross Site Script , 翻译过来就是 跨站脚本攻击:为了和 css 有所区分,因而在安全领域被称为 XSS. 什么是 XSS 攻 ...

  5. 理解 Node.js 的 Event loop

    问题 考察如下代码,脑回路中运行并输出结果: console.log("1"); setTimeout(function setTimeout1() { console.log(& ...

  6. 二分法与二叉树的 Java 实现

    算法与数据结构始终是计算机基础的重要一环,今天我们来讨论下 Java 中二叉树的实现以及一些简单的小算法,如二分查找,归并排序等. 二分查找 二分查找是一种在有序数组中查找某一特定元素的搜索算法,它在 ...

  7. 原生js查询、添加、删除类

    1.添加类 为标签添加一个class的类 如:<div id="box" class="box">内容</div> document.g ...

  8. asp.net core系列 28 EF模型配置(字段,构造函数,拥有实体类型)

    一. 支持字段 EF允许读取或写入字段而不是一个属性.在使用实体类时,用面向对象的封装来限制或增强应用程序代码对数据访问的语义时,这可能很有用.无法使用数据注释配置.除了约定,还可以使用Fluent ...

  9. Quartz.Net学习笔记

    一.概述 Quartz.NET是一个强大.开源.轻量的作业调度框架,是 OpenSymphony 的 Quartz API 的.NET移植,用C#改写,可用于winform和asp.net应用中.它灵 ...

  10. 对 MES 感兴趣?赶紧看过来!

    在知乎许久都没有智能制造话题,索性自己在 2018-06-08 创建了智能制造话题,在创建话题过程中也遇到些麻烦,最终联系了知乎小管家,成功创建了该话题.目前过去7个月了,该话题的关注人数有820人了 ...