JavaScript 迭代器与生成器、对象实现可迭代(分享)

1. 迭代器原理

• 在js中可以使用for of 操作可迭代对象，字符串、数组、Set、Map这些都是可迭代的
• 可迭代对象指的是任何具有专用迭代器方法，且该方法返回可迭代对象的value，迭代器对象具有next()方法和value、done属性
• 当迭代器时首先调用这个迭代器对象[Symbol.iterator]，然后重复调用它里面的next()方法，每次会返回对应的value，直到done为true时结束(这个是它内部自己会实现)
• 在这些可迭代对象内部是怎么实现的我们并不清楚，但是知道了这些原理之后可以尝试自己去实现一个

2. 迭代器的实现

// 基本使用，数组本来就是可以迭代的
let arr = [1, 2, 2, 3, 4, 524, 12, 5, 124, 231, 412]
// 也可以这样去使用
for (let i of arr[Symbol.iterator]()) {
  console.log(i);
}

// 简单实现一个对象可迭代
// 在对象的原型上添加一个迭代器接口，使该对象可迭代
Object.prototype[Symbol.iterator] = function () {
    return Object.values(this)[Symbol.iterator]();
};

let obj = {
    name: "小红",
    age: 18,
    gender: "male",
    bool: true,
    num: 123,
};

for (let v of obj) {
  console.log(v); // "小红" 18 "male" true 123
}

3. 生成器的基本概念

• 生成器是使用ES6语法定义的迭代器，使用的关键字是 function*，调用生成器并不会执行，而是返回一个可迭代的生成器对象
• 调用next()方法会从生成器函数的头部开始执行，只到遇见一个yield语句( 和函数的return有点像，但是它不会终止函数 )，语句的值就为next()的返回值
• yield* 和 yield一样，但它不只是返回一个值，而是迭代可迭代对象并返回

/*
  yield* [1, 2, 3] 等价于 yield 1 yield 2 yield 3
*/

function* fn() {
  yield "str"
  yield 123
  yield true
  yield {}
}

let text = fn()
console.log(text.next().value); // "str"
console.log(text.next().value); // 123
console.log(text.next().value); // true
console.log(text.next().value); // {}

console.log(text.next().done); // true，表示没有yield语句了，迭代完成

// 执行for of循环时，要把上面的next()给注释掉，不然就没有内容可以迭代了
for (let i of text) {
  console.log(i); // str 123 true {}
}

4. 生成器的return()和throw()方法

• return()：停止迭代，可以在生成器返回的时候，做一些清理工作，生成器也不会再被使用
• throw()：抛出异常