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提供了一种编写可变参函数的新 ...
随机推荐
- 深入解读Service Mesh的数据面Envoy
在前面的一篇文章中,详细解读了Service Mesh中的技术细节,深入解读Service Mesh背后的技术细节. 但是对于数据面的关键组件Envoy没有详细解读,这篇文章补上. 一.Envoy的工 ...
- 小程序 表单 获取 formId
微信小程序使用模板消息需要使用支付prepay_id或表单提交formId, 要获得 formId 需要在 form 标签中声明属性 report-submit="true" ...
- 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...
- HTTP/2 简介
支撑现有 Web 服务的 HTTP 协议距离其发布时的 1997 年已经有些年月了,随后的 HTTP/1.1 版本发布自 1999 年.随着技术的进步和需求的进化,对于数据快速高效地传输,HTTP/1 ...
- 《HelloGitHub》第 33 期
公告 欢迎 点击分享 自荐或发现的开源项目,也可安装 分享插件 更便捷地推荐有趣的开源项目. 小伙伴们,新的一年就要来了,今年的 Bug 改完了吗?先看看<HelloGitHub>最新一期 ...
- OSPF 高级实验
一.环境准备 1. 软件:GNS3 2. 路由:c7200 二.实验操作 实验要求: 1.理解 OSPF 虚链路原理及何时需要使用虚链路. 2.掌握 OSPF 虚链路配置方法. 3.掌握 OSPF 的 ...
- .netcore2.1在控制器中和类中,获取appsettings中值的方法
一般我们在开发项目中,都会从配置文件中获取数据库连接信息.自定义参数配置信息等. 在.netcore中在控制器和自定义类中,获取配置文件中参数方式如下: appsettings.json { &quo ...
- MVC、MVP、MVVM 模式对比
MVC.MVP和MVVM这些开发模式为了分离视图(View)和模型(Model)而提出来的,直白说就是为了前后端分离. 1. MVC(Model View Controller)模式 MVC是比较直观 ...
- 如何通过免费开源ERP Odoo建立你的团队, 销售过程和目标
这种快速的一步一步的指南将引导您完成Odoo CRM, 帮助您轻松处理您的销售渠道, 时刻从线索到客户管理您的销售渠道. 配置 从 Odoo初始化后,生成你的数据库, 选择CRM 作为第一个app安装 ...
- python学习——读取染色体长度(七:读取fasta文件)
读取fasta文件genome_test.fa,并计算染色体总长,同时输出最长染色体编号.序列以及长度 fasta文件genom_test.fa的内容如下: >chr1ATATATATAT> ...