JavaScript前端迭代器Iterator与生成器Generator讲解
已收录本篇文章给大家带来了关于JavaScript的相关知识，其中主要为大家介绍了JavaScript前端迭代器Iterator与生成器Generator讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助。 【相关推荐：javascript视频教程、web前端】 Iterator 提供了一种统一的接口机制，为各种不同数据结构提供统一的访问机制。 定义 Iterator 就是提供一个具有 next() 方法的对象，每次调用 next() 都会返回一个结果对象，该结果对象有两个属性，value 表示当前的值，done 表示遍历是否结束。 Iterator 的作用： ES6 提供了 for of 语句遍历迭代器对象，我们将上述创建的迭代器使用 for of 语句遍历一下： 结果报错说 iterator is not iterable，这是为什么呢？ ES6 规定默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性中，如果一个数据结构存在 Symbol.iterator 属性，则该数据结构可遍历。 我们将自定义的 makeIterator 改造如下： 我们为 MakeIterator 添加 return 方法，如果 for...of 循环提前退出（通常是因为出错，或者有 break 语句），就会调用 return() 方法，终止遍历。 基于这一特性，如果一个对象在完成遍历前，需要清理或释放资源，我们可以部署 return() 方法，列入文件读取失败时关闭文件。 Q: 为什么 Object 不具有原生 Iterator ？ A: 对象（Object）之所以没有默认部署 Iterator 接口，是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的。 本质上，遍历器是一种线性处理，对于任何非线性的数据结构，部署遍历器接口，就等于部署一种线性转换。 不过，严格地说，对象部署遍历器接口并不是很必要，因为这时对象实际上被当作 Map 结构使用，ES5 没有 Map 结构，而 ES6 原生提供了。 扩展运算符是调用 Iterator 接口，那么 Object 没有部署 Iterator 接口，为什么也能使用 ... 运算符呢？ 原因：扩展运算符分为两种 Generator 函数是 ES6 提供的一种异步编程解决方案。Generator 函数是一个状态机，封装了多个内部状态； Generator 函数还是一个遍历器对象生成函数，执行后返回一个遍历器对象。 1.function 关键字与函数名之间有一个星号； 2.函数体内部使用 yield 表达式，定义不同的内部状态。 如上我们创建了一个简单的 Generator，我们带着两个问题进行探究： Generator 生成器函数运行后返回一个生成器对象，而普通函数会直接执行函数内部的代码；每次调用生成器对象的 next 方法会执行函数到下一次 yield 关键字停止执行，并且返回一个 {value: Value, done: Boolean} 的对象。 yield 表达式本身没有返回值，或者说总是返回 undefined。next 方法可以带一个参数，该参数就会被当作上一个 yield 表达式的返回值。通过 next 方法的参数，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。 由于 next 方法的参数表示上一个 yield 表达式的返回值，所以在第一次使用 next 方法时，传递参数是无效的。 yield 表达式的作用：定义内部状态和暂停执行 yield 表达式 与 return 语句的区别 基于 Generator 生成器函数中可以支持多个 yield，我们可以实现一个函数有多个返回值的场景： 由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的 Symbol.iterator 属性，从而使得该对象具有 Iterator 接口。Generator 实现方式代码更加简洁。 Generator: 如果 Generator 函数内部有 如果想在 Generator 函数内部，调用另一个 Generator 函数。我们需要在前者的函数体内部，自己手动完成遍历，如果函数调用多层嵌套会导致写法繁琐不易阅读，ES6 提供了 yield* 表达式作为解决方法。 委托给其他生成器 委托给其他可迭代对象 Generator 函数返回一个遍历器，ES6 规定这个遍历器是 Generator 函数的实例，继承了 Generator.prototype 对象上的方法，但无法获取 this 上的属性，因为这时 this 是全局对象，而不是实例对象。 如果想像构造函数一样访问实例属性，可以修改 this 绑定到 Generator.prototype 上。 【相关推荐：javascript视频教程、web前端】 以上就是JavaScript前端迭代器Iterator与生成器Generator讲解的详细内容，更多请关注php中文网其它相关文章！
Iterator 概念
function makeIterator(Array){
let index = 0;
return {
next: function(){
return (
Array.length > index ?
{value: Array[index++]}:
{done: true}
)
}
}
}
let iterator = makeIterator(['1','2'])
console.log(iterator.next()); // {value: '1'}
console.log(iterator.next()); // {value: '2'}
console.log(iterator.next()); // {done: true}
默认 Iterator 接口
let iterator = makeIterator(['1','2'])
for (let value of iterator) {
console.log(value);
} // iterator is not iterable
const MakeIterator = (Array) => ({
[Symbol.iterator](){
let index = 0;
return {
next(){
let length = Array.length;
if(index < length){
return {value: Array[index++]}
}else{
return {done: true}
}
}
}
}
})
for(let value of MakeIterator([1,2])){
console.log(value)
}
// 1
// 2
Iterator 的 return()
const MakeIterator = (Array) => ({
[Symbol.iterator](){
let index = 0;
return {
next(){
let length = Array.length;
if(index < length){
return {value: Array[index++]}
}else{
return {done: true}
}
},
return(){
return {done: true}
}
}
}
})
for(let value of MakeIterator([1, 2, 3])){
console.log(value) // 1
// 方式1
break;
// 方式2
// throw new Error('error');
}
原生具备 Iterator 接口的数据结构
// arguments 对象
function sum(){
for(let value of arguments){
console.log(value)
}
}
sum(1,2)
// 1
// 2
// typedArray 对象
let typeArry = new Int8Array(2);
typeArry[0] = 1;
typeArry[1] = 2;
for(let value of typeArry){
console.log(value)
}
// 1
// 2
function* gen(){
yield 1;
yield 2;
}
for(let value of gen()){
console.log(value)
}
调用 Iterator 接口的场合
let set = new Set().add('a').add('b').add('c');
let [x,y] = set; // x='a'; y='b'
var str = 'hello';
[...str] // ['h','e','l','l','o']
let obj1 = {
name: 'qianxun'
}
let obj2 = {
age: 3
}
// 数组对象是可枚举的
let obj = {...obj1, ...obj2}
console.log(obj) //{name: 'qianxun', age: 3}
// 普通对象默认是不可迭代的
let obj = [...obj1, ...obj2]
console.log(obj) // object is not iterable
模拟实现 for of
function forOf(obj, cb){
let iteratorValue = obj[Symbol.iterator]();
let result = iteratorValue.next()
while(!result.done){
cb(result.value)
result = iteratorValue.next()
}
}
forOf([1,2,3], (value)=>{
console.log(value)
})
// 1
// 2
// 3
Generator
认识 Generator
function* simpleGenerator(){
yield 1;
yield 2;
}
simpleGenerator()
function* simpleGenerator(){
console.log('hello world');
yield 1;
yield 2;
}
let generator = simpleGenerator(); // simpleGenerator {<suspended}}
console.log(generator.next())
// hello world
// {value: 1, done: false}
console.log(generator.next())
// {value: 2, done: false}
next 方法的参数
function sum(x){
return function(y){
return x + y;
}
}
console.log(sum(1)(2))
// 利用next传参改写
function* sum(x){
let y = yield x;
while(true){
y = yield x + y;
}
}
let gen = sum(2)
console.log(gen.next()) // 2
console.log(gen.next(1)) // 3
console.log(gen.next(2)) // 4
yield 表达式
function *gen () {
console.log('hello' + yield) ×
console.log('hello' + (yield)) √
console.log('hello' + yield 1) ×
console.log('hello' + (yield 1)) √
foo(yield 1) √
const param = yield 2 √
}
function* gen(num1, num2){
yield num1 + num2;
yield num1 - num2;
}
let res = gen(2, 1);
console.log(res.next()) // {value: 3, done: false}
console.log(res.next()) // {value: 1, done: false}
Generator 与 Iterator 之间的关系
let obj = {
name: 'qianxun',
age: 3,
[Symbol.iterator]: function(){
let that = this;
let keys = Object.keys(that)
let index = 0;
return {
next: function(){
return index < keys.length ?
{value: that[keys[index++]], done: false}:
{value: undefined, done: true}
}
}
}
}
for(let value of obj){
console.log(value)
}
let obj = {
name: 'qianxun',
age: 3,
[Symbol.iterator]: function* (){
let keys = Object.keys(this)
for(let i=0; i< keys.length; i++){
yield this[keys[i]];
}
}
}
for(let value of obj){
console.log(value)
}
Generator.prototype.return()
return()方法，可以返回给定的值，并且终结遍历 Generator 函数。function* gen() {
yield 1;
yield 2;
yield 3;
}
var g = gen();
g.next() // { value: 1, done: false }
// 如果 return() 方法调用时，不提供参数，则返回值的 value 属性为 undefined
g.return('foo') // { value: "foo", done: true }
g.next() // { value: undefined, done: true }
try...finally 代码块，且正在执行 try 代码块，那么 return() 方法会导致立刻进入 finally 代码块，执行完以后，整个函数才会结束。function* numbers () {
yield 1;
try {
yield 2;
yield 3;
} finally {
yield 4;
yield 5;
}
yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.next() // { value: 5, done: false }
g.next() // { value: 7, done: true }
yield* 表达式
function* g1() {
yield 2;
yield 3;
}
function* g2() {
yield 1;
yield* g1();
yield 4;
}
const iterator = g2();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
function* gen(){
yield* [1,2,3]
}
console.log(gen().next()) // {value: 1, done: false}
Generator 函数的 this
function* gen(){
this.a = 1
}
gen.prototype.say = function(){
console.log('hi')
}
let obj = gen()
console.log(obj instanceof gen) // true
obj.say() // hi
obj.next()
console.log(obj.a) //undefined
function* gen(){
this.a = 1
}
gen.prototype.say = function(){
console.log('hi')
}
let obj = gen.call(gen.prototype)
console.log(obj instanceof gen) // true
obj.say() // hi
obj.next()
console.log(obj.a) //1
Generator 实现一个状态机
function* StateMachine(state){
let transition;
while(true){
if(transition === "INCREMENT"){
state++;
}else if(transition === "DECREMENT"){
state--;
}
transition = yield state;
}
}
const iterator = StateMachine(0);
console.log(iterator.next()); // 0
console.log(iterator.next('INCREMENT')); // 1
console.log(iterator.next('DECREMENT')); // 0
声明：本文转载于：脚本之家，如有侵犯，请联系admin@php.cn删除
程序员必备接口测试调试工具：点击使用
声明：本文转载于网络，如有侵犯，请联系545125923@qq.com删除
