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 = https://www.cnblogs.com/dtux/p/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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502328.html
標籤：Html/Css