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 ,对象不可以

posted @ 2022-06-27 11:08  Jaetyn  阅读(2504)  评论(0编辑  收藏  举报