JS中Symbol.iterator的理解与基本使用
一、基本概念
迭代器就是为实现对不同集合进行统一遍历操作的一种机制,只要给需要遍历的数据结构部署Iterator接口,通过调用该接口,或者使用消耗该接口的API实现遍历操作。
Symbol的概念:“以操作目标为程序本身的行为特性的编程,我们称为元编程。”
二、Symbol的特殊性
1)Symbol属性值对应的值是唯一的,解决了命名冲突的问题,类似于ID
2)Symbol值不能与其他数据进行计算,包括了字符串的拼接
3)for/in,for/of不会遍历Symbol属性
三、迭代器的定义
迭代器 (iterator),是确使用户可在容器对象(container,例如链表或数组)上遍访的对象,使用该接口无需关心对象的内部实现细节。
其行为像数据库中的光标,迭代器最早出现在1974年设计的CLU编程语言中;
在各种编程语言的实现中,迭代器的实现方式各不相同,但是基本都有迭代器,比如Java、Python等;
从迭代器的定义我们可以看出来,迭代器是帮助我们对某个数据结构进行遍历的对象。
在JavaScript中,迭代器也是一个具体的对象,这个对象需要符合迭代器协议(iterator protocol):
迭代器协议定义了产生一系列值(无论是有限还是无限个)的标准方式;
那么在js中这个标准就是一个特定的next方法;
next方法有如下的要求:
一个无参数或者一个参数的函数,返回一个应当拥有以下两个属性的对象:
done(boolean):
如果迭代器可以产生序列中的下一个值,则为 false。(这等价于没有指定 done 这个属性。)
如果迭代器已将序列迭代完毕,则为 true。这种情况下,value 是可选的,如果它依然存在,即为迭代结束之后的默认返回值。
value:
迭代器返回的任何 JavaScript 值。done 为 true 时可省略。
实现迭代器函数
// 生成迭代器方法 function createArrayIterator(arr) { let index = 0 return { next: function() { if (index < arr.length) { return { done: false, value: arr[index++] } } else { return { done: true, value: undefined } } } } } const names = ["111", "222", "333"] const namesIterator = createArrayIterator(names) console.log(namesIterator.next()) console.log(namesIterator.next()) console.log(namesIterator.next()) // 打印 // { done: false, value: '111' } // { done: false, value: '222' } // { done: false, value: '333' }
创建一个没有迭代器的类:
// 案例: 创建一个教室类, 创建出来的对象都是可迭代对象 class Classroom { constructor( students) { this.students = students } entry(newStudent) { this.students.push(newStudent) } } const classroom = new Classroom( ["学生1", "学生2", "学生3", "学生4", "学生5"]) classroom.entry("lilei") for (const stu of classroom) { console.log(stu) } //报错classroom不是可迭代的 //for (const stu of classroom) { ^ //TypeError: classroom is not iterable
自定义一个迭代器:
// 案例: 创建一个教室类, 创建出来的对象都是可迭代对象 class Classroom { constructor( students) { this.students = students } entry(newStudent) { this.students.push(newStudent) } // 实现迭代器 [Symbol.iterator]() { let index = 0 return { next: () => { if (index < this.students.length) { return { done: false, value: this.students[index++] } } else { return { done: true, value: undefined } } }, return: () => { //监听迭代器停止 console.log("迭代器提前终止了~") return { done: true, value: undefined } } } } } const classroom = new Classroom( ["学生1", "学生2", "学生3", "学生4", "学生5"]) classroom.entry("lilei") for (const stu of classroom) { console.log(stu) if (stu === "学生4") break } // 打印 // 学生1 // 学生2 // 学生3 // 学生4 // 迭代器提前终止了~
可迭代对象应用场景
1)for of场景
2)数组展开语法 (对象展开 ES9(ES2018)中新增的一个特性: 用的不是迭代器)
3)解构语法 (对象结构 ES9(ES2018)中新增的一个特性: 用的不是迭代器)
数组可以迭代,对象不可以
所以数组可以使用for...of ,对象不可以