共计 7026 个字符,预计需要花费 18 分钟才能阅读完成。
Iterator
Iterator 概念
Iterator 提供了一种对立的接口机制,为各种不同数据结构提供对立的拜访机制。定义 Iterator 就是提供一个具备 next() 办法的对象,每次调用 next() 都会返回一个后果对象,该后果对象有两个属性,value 示意以后的值,done 示意遍历是否完结。
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 的作用:
- 为各种数据结构,提供一个对立的、简便的拜访接口;
- 使得数据结构的成员可能按某种秩序排列;
- 供 for…of 生产
默认 Iterator 接口
ES6 提供了 for of 语句遍历迭代器对象,咱们将上述创立的迭代器应用 for of 语句遍历一下:
let iterator = makeIterator(['1','2'])
for (let value of iterator) {console.log(value);
} // iterator is not iterable
后果报错说 iterator is not iterable,这是为什么呢?
ES6 规定默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性中,如果一个数据结构存在 Symbol.iterator 属性,则该数据结构可遍历。咱们将自定义的 makeIterator 革新如下:
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()
咱们为 MakeIterator 增加 return 办法,如果 for…of 循环提前退出(通常是因为出错,或者有 break 语句),就会调用 return() 办法,终止遍历。基于这一个性,如果一个对象在实现遍历前,须要清理或开释资源,咱们能够部署 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 接口的数据结构
数组
Set
Map
类数组对象,如 arguments 对象、DOM NodeList 对象、typedArray 对象
// 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
-
Generator 对象
function* gen(){ yield 1; yield 2; } for(let value of gen()){console.log(value) }
- String
Q: 为什么 Object 不具备原生 Iterator?
A: 对象(Object)之所以没有默认部署 Iterator 接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的。实质上,遍历器是一种线性解决,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。不过,严格地说,对象部署遍历器接口并不是很必要,因为这时对象实际上被当作 Map 构造应用,ES5 没有 Map 构造,而 ES6 原生提供了。
调用 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']
扩大运算符是调用 Iterator 接口,那么 Object 没有部署 Iterator 接口,为什么也能应用 … 运算符呢?
起因:扩大运算符分为两种
- 一种是用在函数参数、数组开展的场合,这种状况要求对象是可迭代的(iterable)
-
另一种是用于对象开展,也就是 {…obj} 模式,这种状况须要对象是可枚举的(enumerable)
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
// 概念上 Generator 函数是 ES6 提供的一种异步编程解决方案。Generator 函数是一个状态机,封装了多个外部状 态;Generator 函数还是一个遍历器对象生成函数,执行后返回一个遍历器对象。// 模式上 1.function 关键字与函数名之间有一个星号;2. 函数体外部应用 yield 表达式,定义不同的外部状态。
function* simpleGenerator(){ yield 1; yield 2; } simpleGenerator()
如上咱们创立了一个简略的 Generator,咱们带着两个问题进行探索:
- Generator 函数运行后会产生什么?
-
函数中的 yield 表达式有什么作用?
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}
Generator 生成器函数运行后返回一个生成器对象,而一般函数会间接执行函数外部的代码;每次调用生成器对象的 next 办法会执行函数到下一次 yield 关键字进行执行,并且返回一个 {value: Value, done: Boolean} 的对象。
next 办法的参数
yield 表达式自身没有返回值,或者说总是返回 undefined。next 办法能够带一个参数,该参数就会被当作上一个 yield 表达式的返回值。通过 next 办法的参数,能够在 Generator 函数运行的不同阶段,从内部向外部注入不同的值,从而调整函数行为。
因为 next 办法的参数示意上一个 yield 表达式的返回值,所以在第一次应用 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 表达式
yield 表达式的作用:定义外部状态和暂停执行
yield 表达式 与 return 语句的区别
- yield 表达式示意函数暂停执行,下一次再从该地位持续向后执行,而 return 语句不具备地位记忆的性能
- 一个函数里,只能执行一个 return 语句,然而能够执行多个 yield 表达式
- 任何函数都能够应用 return 语句,yield 表达式只能用在 Generator 函数外面,用在其余中央都会报错
-
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 √ }
基于 Generator 生成器函数中能够反对多个 yield,咱们能够实现一个函数有多个返回值的场景:
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 之间的关系
因为 Generator 函数就是遍历器生成函数,因而能够把 Generator 赋值给对象的 Symbol.iterator 属性,从而使得该对象具备 Iterator 接口。Generator 实现形式代码更加简洁。
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) }
Generator:
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}
如果 Generator 函数外部有 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* 表达式
如果想在 Generator 函数外部,调用另一个 Generator 函数。咱们须要在前者的函数体外部,本人手动实现遍历,如果函数调用多层嵌套会导致写法繁琐不易浏览,ES6 提供了 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
Generator 函数返回一个遍历器,ES6 规定这个遍历器是 Generator 函数的实例,继承了 Generator.prototype 对象上的办法,但无奈获取 this 上的属性,因为这时 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
如果想像构造函数一样拜访实例属性,能够批改 this 绑定到 Generator.prototype 上。
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