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提供了一种编写可变参函数的新 ...
随机推荐
- SQL中关于Join、Inner Join、Left Join、Right Join、Full Join、On、 Where区别
前言: 今天主要的内容是要讲解SQL中关于Join.Inner Join.Left Join.Right Join.Full Join.On. Where区别和用法,不用我说其实前面的这些基本SQL语 ...
- sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象,同时需要携带其他参数
今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表. 我的思路是: 首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数. 然后,再做上传 ...
- asp.net core系列 59 Ocelot 构建基础项目示例
一.入门概述 从这篇开始探讨Ocelot,Ocelot是一个.NET API网关,仅适用于.NET Core,用于.NET面向微服务/服务的架构中.当客户端(web站点.ios. app 等)访问we ...
- 【转】委托的N种写法,你喜欢哪种?
一.委托调用方式 1. 最原始版本: delegate string PlusStringHandle(string x, string y); class Program { static void ...
- 关于uni-app框架的学习-1
根据官方文档进行学习Uni-APP, 再次过程中,记录一些需要熟悉的内容,有不合适的地方,见着都可知道,----我是一个小白,小白,小白 官网地址:https://uniapp.dcloud.io/ ...
- [题解] 2038: [2009国家集训队]小Z的袜子(hose)
莫队,卡常数 题目地址 思路 设\(\text{Vis[i]}\)为元素\(\text{i}\)在区间\(\text{[L,R]}\)的出现次数 考虑区间\(\text{[L,R]}\)和元素\(\t ...
- 使用正则替换script及其内容
因做微信公众号文章保存,发现他的js大多数也用不着,所以就想着用正则替换掉源代码中的js片段 正则代码: <script(?:[^<]++|<(?!/script>))*+&l ...
- 二、使用docker-compose搭建AspNetCore开发环境
1 使用docker-compose搭建开发环境 我们的目标很简单:使用docker-compose把若干个docker容器组合起来就成了. 首先使用Nginx代理所有的Web程序,这样只需要在主机上 ...
- 在Linux系统配置Nodejs环境的最简单步骤,部署多个thinkjs(nodejs)项目
发现一台服务器部署管理多个nodejs服务,可以采用二级域名weekly.mwcxs.top,也可以采用固定后缀www.mwcxs.top/weekly的方式,本文先从固定后缀的方式部署管理多个nod ...
- Fiddler原理~知多少?
首先我们学习Fidder这个工具,我们就应该去了解它的基本东西,比如这个单词的意思.Fiddler叫:小提琴.骗子的意思. 那么它是干什么的呢? Fiddler是一个http协议调试代理工具,它能够记 ...