JS中Symbol.iterator的理解与基本使用

定义

迭代器 （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 ,对象不可以

场景实例

问题：如何让下面的这行代码成立？

var [a,b] = {a:1,b:2}

---

直接运行会报错，报错信息如下：

---

错误原因

根据报错信息得知，是类型错误，因为{a:1,b:2}不是可迭代的。

es6里面有一个可迭代协议，大体意思是，只要一个对象有一个属性【symbol.iterator】且它是一个函数，且返回一个迭代器，那么这个对象即可迭代。

解构赋值左边会得到右边的迭代器，不要求右边一定是数组，只要是可迭代对象即可 

思路

常见的可迭代对象就是数组，是因为数组里面有一个迭代器，可以在通过 console.log 打印看到数组的 prototype 属性上面的迭代器，如下图所示：

那么，只需给上面那个 {a:1,b:2} 加一个迭代器

解题

// 给对象原型上加一个属性【symbol.iterator】，让它等于一个函数，且这个函数返回一个迭代器，其实就是按照es6的可迭代协议进行操作
 
Object.prototype[Symbol.iterator] = function(){
 
  return Object.values(this)[Symbol.iterator]() //调用数组的迭代器
 
}

扩展

但往原型上加方法，会延伸出来问题，那就是前端安全

前端安全方面一个非常重要的问题——原型注入，通过原型注入，可以轻易的破坏闭包，破坏第三方库，如 elementUI 等。