ES6 迭代器与可迭代对象的实现


Posted in Javascript onFebruary 11, 2019

ES6 新的数组方法、集合、for-of 循环、展开运算符(...)甚至异步编程都依赖于迭代器(Iterator )实现。本文会详解 ES6 的迭代器与生成器,并进一步挖掘可迭代对象的内部原理与使用方法

、迭代器的原理

在编程语言中处理数组或集合时,使用循环语句必须要初始化一个变量记录迭代位置,而程序化地使用迭代器可以简化这种数据操作

如何设计一个迭代器呢?

迭代器的本身是一个对象,这个对象有 next( ) 方法返回结果对象,这个结果对象有下一个返回值 value、迭代完成布尔值 done,模拟创建一个简单迭代器如下:

function createIterator(iterms) {
 let i = 0
 return {
  next() {
   let done = (i >= iterms.length)
   let value = !done ? iterms[i++] : undefined
   return {
    done,
    value
   }
  }
 }
}

let arrayIterator = createIterator([1, 2, 3])

console.log(arrayIterator.next()) // { done: false, value: 1 }
console.log(arrayIterator.next()) // { done: false, value: 2 }
console.log(arrayIterator.next()) // { done: false, value: 3 }
console.log(arrayIterator.next()) // { done: true, value: undefined }

对以上语法感到困惑的,可参考: 【ES6】对象的新功能与解构赋值

每次调用迭代器的 next( ) 都会返回下一个对象,直到数据集被用尽。

ES6 中迭代器的编写规则类似,但引入了生成器对象,更简单的创建迭代器对象

二、创建迭代器

ES6 封装了一个生成器用来创建迭代器。显然生成器是返回迭代器的函数,这个函数通过 function 后的星号(*)表示,并使用新的内部专用关键字yield指定迭代器 next( ) 方法的返回值。

如何使用 ES6 生成器创建一个迭代器呢?一个简单的例子如下:

function *createIterator() {
 yield 123;
 yield 'someValue'
}

let someIterator = createIterator()

console.log(someIterator.next()) // { value: 123, done: false }
console.log(someIterator.next()) // { value: 'someValue', done: false }
console.log(someIterator.next()) // { value: undefined, done: true }

使用yield关键字可以返回任意值或表达式,可以给迭代器批量添加元素:

// let createIterator = function *(items) { // 生成器函数表达式
function *createIterator(items) {
 for (let i = 0; i < items.length; i++) {
  yield items[i]
 }
}

let someIterator = createIterator([123, 'someValue'])

console.log(someIterator.next()) // { value: 123, done: false }
console.log(someIterator.next()) // { value: 'someValue', done: false }
console.log(someIterator.next()) // { value: undefined, done: true }

由于生成器本身是函数,所以可添加到对象中,使用方式如下:

let obj = {
 // createIterator: function *(items) { // ES5
 *createIterator(items) { // ES6
  for (let i = 0; i < items.length; i++) {
   yield items[i]
  }
 }
}
let someIterator = obj.createIterator([123, 'someValue'])

生成器函数的一个特点是,当执行完一句 yield 语句后函数会自动停止执行,再次调用迭代器的 next( ) 方法才会继续执行下一个 yield 语句。

这种自动中止函数执行的能力衍生出很多高级用法。

三、可迭代对象

在 ES6 中常用的集合对象(数组、Set/Map集合)和字符串都是可迭代对象,这些对象都有默认的迭代器和Symbol.iterator属性。

通过生成器创建的迭代器也是可迭代对象,因为生成器默认会为Symbol.iterator属性赋值。

3.1 Symbol.iterator

可迭代对象具有Symbol.iterator属性,即具有Symbol.iterator属性的对象都有默认迭代器。

我们可以用Symbol.iterator来访问对象的默认迭代器,例如对于一个数组:

let list = [11, 22, 33]
let iterator = list[Symbol.iterator]()
console.log(iterator.next()) // { value: 11, done: false }

Symbol.iterator获得了数组这个可迭代对象的默认迭代器,并操作它遍历了数组中的元素。

反之,我们可以用Symbol.iterator来检测对象是否为可迭代对象:

function isIterator(obj) {
 return typeof obj[Symbol.iterator] === 'function'
}

console.log(isIterator([11, 22, 33])) // true
console.log(isIterator('sometring')) // true
console.log(isIterator(new Map())) // true
console.log(isIterator(new Set())) // true
console.log(isIterator(new WeakMap())) // false
console.log(isIterator(new WeakSet())) // false

显然数组、Set/Map 集合、字符串都是可迭代对象,而 WeakSet/WeakMap 集合(弱引用集合)是不可迭代的。

3.2 创建可迭代对象

默认情况下,自定义的对象都是不可迭代的。

刚才讲过,通过生成器创建的迭代器也是一种可迭代对象,生成器默认会为Symbol.iterator属性赋值。

那如何将自定义对象变为可迭代对象呢?通过给Symbol.iterator属性添加一个生成器:

let collection = {
 items: [11,22,33],
 *[Symbol.iterator]() {
  for (let item of this.items){
   yield item
  }
 }
}

console.log(isIterator(collection)) // true

for (let item of collection){
 console.log(item) // 11 22 33
}

数组 items 是可迭代对象,collection 对象通过给Symbol.iterator属性赋值也成为可迭代对象。

3.3 for-of

注意到上个栗子使用了for-of代替索引循环,for-of是 ES6 为可迭代对象新加入的特性。

思考一下for-of循环的实现原理。

对于使用for-of的可迭代对象,for-of每执行一次就会调用这个可迭代对象的 next( ),并将返回结果存储在一个变量中,持续执行直到可迭代对象 done 属性值为 false。

// 迭代一个字符串
let str = 'somestring'

for (let item of str){
 console.log(item) // s o m e s t r i n g
}

本质上来说,for-of调用 str 字符串的Symbol.iterator属性方法获取迭代器(这个过程由 JS 引擎完成),然后多次调用 next( ) 方法将对象 value 值存储在 item 变量。

for-of用于不可迭代对象、null 或 undefined 会报错!

3.4 展开运算符(...)

ES6 语法糖展开运算符(...)也是服务于可迭代对象,即只可以“展开”数组、集合、字符串、自定义可迭代对象。

以下栗子输出不同可迭代对象展开运算符计算的结果:

let str = 'somestring'
console.log(...str) // s o m e s t r i n g


let set = new Set([1, 2, 2, 5, 8, 8, 8, 9])
console.log(set) // Set { 1, 2, 5, 8, 9 }
console.log(...set) // 1 2 5 8 9


let map = new Map([['name', 'jenny'], ['id', 123]])
console.log(map) // Map { 'name' => 'jenny', 'id' => 123 }
console.log(...map) // [ 'name', 'jenny' ] [ 'id', 123 ]


let num1 = [1, 2, 3], num2 = [7, 8, 9]
console.log([...num1, ...num2]) // [ 1, 2, 3, 7, 8, 9 ]


let udf
console.log(...udf) // TypeError: undefined is not iterable

由以上代码可以看出,展开运算符(...)可以便捷地将可迭代对象转换为数组。同for-of一样,展开运算符(...)用于不可迭代对象、null 或 undefined 会报错!

四. 默认迭代器

ES6 为很多内置对象提供了默认的迭代器,只有当内建的迭代器不能满足需求时才自己创建迭代器。

ES6 的 三个集合对象:Set、Map、Array 都有默认的迭代器,常用的如values()方法、entries()方法都返回一个迭代器,其值区别如下:

  • entries():多个键值对
  • values():集合的值
  • keys():集合的键

调用以上方法都可以得到集合的迭代器,并使用for-of循环,示例如下:

/******** Map ***********/
let map = new Map([['name', 'jenny'], ['id', 123]])

for(let item of map.entries()){
 console.log(item) // [ 'name', 'jenny' ] [ 'id', 123 ]
}
for(let item of map.keys()){
 console.log(item) // name id
}
for (let item of map.values()) {
 console.log(item) // jenny 123
}

/******** Set ***********/
let set = new Set([1, 4, 4, 5, 5, 5, 6, 6,])

for(let item of set.entries()){
 console.log(item) // [ 1, 1 ] [ 4, 4 ] [ 5, 5 ] [ 6, 6 ]
}

/********* Array **********/
let array = [11, 22, 33]

for(let item of array.entries()){
 console.log(item) // [ 0, 11 ] [ 1, 22 ] [ 2, 33 ]
}

此外 String 和 NodeList 类型都有默认的迭代器,虽然没有提供其它的方法,但可以用for-of循环

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 #Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 #Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 #Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 #Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 #Javascript
react配置antd按需加载的使用
Feb 11 #Javascript
react中使用css的7中方式(最全总结)
Feb 11 #Javascript
You might like
?算你??的 PHP 程式大小
2006/12/06 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
详解javascript对数组和json数组的操作
2019/04/15 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python生成器以及应用实例解析
2018/02/08 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Python 元组操作总结
2019/09/18 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
python 实现目录复制的三种小结
2019/12/04 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
国际领先的学术出版商:Springer
2017/01/11 全球购物
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
工作自我评价分享
2013/12/01 职场文书
学习经验交流会主持词
2014/04/01 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
投资入股合作协议书
2014/10/28 职场文书
大学生党课心得体会
2016/01/07 职场文书
员工给公司的建议书
2019/06/24 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python