真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Iterator與Generator

創(chuàng)新互聯(lián)公司成都企業(yè)網(wǎng)站建設(shè)服務(wù),提供成都網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),響應(yīng)式網(wǎng)站開發(fā),網(wǎng)頁設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:028-86922220

Iterator

Iterator 概念

Iterator 提供了一種統(tǒng)一的接口機(jī)制,為各種不同數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制。定義 Iterator 就是提供一個(gè)具有 next() 方法的對象,每次調(diào)用 next() 都會(huì)返回一個(gè)結(jié)果對象,該結(jié)果對象有兩個(gè)屬性,value 表示當(dāng)前的值,done 表示遍歷是否結(jié)束。

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 的作用:

  1. 為各種數(shù)據(jù)結(jié)構(gòu),提供一個(gè)統(tǒng)一的、簡便的訪問接口;
  2. 使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列;
  3. 供 for...of 消費(fèi)

默認(rèn) Iterator 接口

ES6 提供了 for of 語句遍歷迭代器對象,我們將上述創(chuàng)建的迭代器使用 for of 語句遍歷一下:

let iterator = makeIterator(['1','2'])
for (let value of iterator) {
    console.log(value);
} // iterator is not iterable

結(jié)果報(bào)錯(cuò)說 iterator is not iterable,這是為什么呢?
ES6 規(guī)定默認(rèn)的 Iterator 接口部署在數(shù)據(jù)結(jié)構(gòu)的 Symbol.iterator 屬性中,如果一個(gè)數(shù)據(jù)結(jié)構(gòu)存在 Symbol.iterator 屬性,則該數(shù)據(jù)結(jié)構(gòu)可遍歷。我們將自定義的 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()

我們?yōu)?MakeIterator 添加 return 方法,如果 for...of 循環(huán)提前退出(通常是因?yàn)槌鲥e(cuò),或者有 break 語句),就會(huì)調(diào)用 return() 方法,終止遍歷?;谶@一特性,如果一個(gè)對象在完成遍歷前,需要清理或釋放資源,我們可以部署 return() 方法,列入文件讀取失敗時(shí)關(guān)閉文件。

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 接口的數(shù)據(jù)結(jié)構(gòu)

  1. 數(shù)組
  2. Set
  3. Map
  4. 類數(shù)組對象,如 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
  1. Generator 對象
function* gen(){
    yield 1;
    yield 2;
}
for(let value of gen()){
    console.log(value)
}
  1. String

Q: 為什么 Object 不具有原生 Iterator ?

A: 對象(Object)之所以沒有默認(rèn)部署 Iterator 接口,是因?yàn)閷ο蟮哪膫€(gè)屬性先遍歷,哪個(gè)屬性后遍歷是不確定的。本質(zhì)上,遍歷器是一種線性處理,對于任何非線性的數(shù)據(jù)結(jié)構(gòu),部署遍歷器接口,就等于部署一種線性轉(zhuǎn)換。不過,嚴(yán)格地說,對象部署遍歷器接口并不是很必要,因?yàn)檫@時(shí)對象實(shí)際上被當(dāng)作 Map 結(jié)構(gòu)使用,ES5 沒有 Map 結(jié)構(gòu),而 ES6 原生提供了。

調(diào)用 Iterator 接口的場合

  1. 解構(gòu)賦值
let set = new Set().add('a').add('b').add('c');

let [x,y] = set; // x='a'; y='b'
  1. 擴(kuò)展運(yùn)算符
var str = 'hello';
[...str] //  ['h','e','l','l','o']

擴(kuò)展運(yùn)算符是調(diào)用 Iterator 接口,那么 Object 沒有部署 Iterator 接口,為什么也能使用 ... 運(yùn)算符呢?
原因:擴(kuò)展運(yùn)算符分為兩種

  • 一種是用在函數(shù)參數(shù)、數(shù)組展開的場合,這種情況要求對象是可迭代的(iterable)
  • 另一種是用于對象展開,也就是 {…obj} 形式,這種情況需要對象是可枚舉的(enumerable)
let obj1 = {
    name: 'qianxun'
} 
let obj2 = {
    age: 3
}
// 數(shù)組對象是可枚舉的
let obj = {...obj1, ...obj2}
console.log(obj) //{name: 'qianxun', age: 3}

// 普通對象默認(rèn)是不可迭代的
let obj = [...obj1, ...obj2]
console.log(obj) // object is not iterable

模擬實(shí)現(xiàn) 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

認(rèn)識 Generator

// 概念上
Generator 函數(shù)是 ES6 提供的一種異步編程解決方案。Generator 函數(shù)是一個(gè)狀態(tài)機(jī),封裝了多個(gè)內(nèi)部狀
態(tài);Generator 函數(shù)還是一個(gè)遍歷器對象生成函數(shù),執(zhí)行后返回一個(gè)遍歷器對象。

// 形式上
1.function 關(guān)鍵字與函數(shù)名之間有一個(gè)星號;
2.函數(shù)體內(nèi)部使用 yield 表達(dá)式,定義不同的內(nèi)部狀態(tài)。
function* simpleGenerator(){
    yield 1;
    yield 2;
}
simpleGenerator()

如上我們創(chuàng)建了一個(gè)簡單的 Generator,我們帶著兩個(gè)問題進(jìn)行探究:

  1. Generator 函數(shù)運(yùn)行后會(huì)發(fā)生什么?

  2. 函數(shù)中的 yield 表達(dá)式有什么作用?

function* simpleGenerator(){
    console.log('hello world');
    yield 1;
    yield 2;
}
let generator = simpleGenerator(); // simpleGenerator {

Generator 生成器函數(shù)運(yùn)行后返回一個(gè)生成器對象,而普通函數(shù)會(huì)直接執(zhí)行函數(shù)內(nèi)部的代碼;每次調(diào)用生成器對象的 next 方法會(huì)執(zhí)行函數(shù)到下一次 yield 關(guān)鍵字停止執(zhí)行,并且返回一個(gè){value: Value, done: Boolean} 的對象。

next 方法的參數(shù)

yield 表達(dá)式本身沒有返回值,或者說總是返回 undefined。next 方法可以帶一個(gè)參數(shù),該參數(shù)就會(huì)被當(dāng)作上一個(gè) yield 表達(dá)式的返回值。通過 next 方法的參數(shù),可以在 Generator 函數(shù)運(yùn)行的不同階段,從外部向內(nèi)部注入不同的值,從而調(diào)整函數(shù)行為。
由于 next 方法的參數(shù)表示上一個(gè) yield 表達(dá)式的返回值,所以在第一次使用 next 方法時(shí),傳遞參數(shù)是無效的。

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 表達(dá)式

yield 表達(dá)式的作用:定義內(nèi)部狀態(tài)和暫停執(zhí)行
yield 表達(dá)式 與 return 語句的區(qū)別

  • yield 表達(dá)式表示函數(shù)暫停執(zhí)行,下一次再從該位置繼續(xù)向后執(zhí)行,而 return 語句不具備位置記憶的功能
  • 一個(gè)函數(shù)里,只能執(zhí)行一個(gè) return 語句,但是可以執(zhí)行多個(gè) yield 表達(dá)式
  • 任何函數(shù)都可以使用 return 語句,yield 表達(dá)式只能用在 Generator 函數(shù)里面,用在其他地方都會(huì)報(bào)錯(cuò)
  • yield 表達(dá)式如果參與運(yùn)算放在圓括號里面;用作函數(shù)參數(shù)或放在賦值表達(dá)式的右邊,可以不加括號
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 生成器函數(shù)中可以支持多個(gè) yield,我們可以實(shí)現(xiàn)一個(gè)函數(shù)有多個(gè)返回值的場景:

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 之間的關(guān)系

由于 Generator 函數(shù)就是遍歷器生成函數(shù),因此可以把 Generator 賦值給對象的 Symbol.iterator 屬性,從而使得該對象具有 Iterator 接口。Generator 實(shí)現(xiàn)方式代碼更加簡潔。

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()方法,可以返回給定的值,并且終結(jié)遍歷 Generator 函數(shù)。

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

var g = gen();

g.next()        // { value: 1, done: false }
// 如果 return() 方法調(diào)用時(shí),不提供參數(shù),則返回值的 value 屬性為 undefined
g.return('foo') // { value: "foo", done: true }
g.next()        // { value: undefined, done: true }

如果 Generator 函數(shù)內(nèi)部有 try...finally 代碼塊,且正在執(zhí)行 try 代碼塊,那么 return() 方法會(huì)導(dǎo)致立刻進(jìn)入 finally 代碼塊,執(zhí)行完以后,整個(gè)函數(shù)才會(huì)結(jié)束。

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* 表達(dá)式

如果想在 Generator 函數(shù)內(nèi)部,調(diào)用另一個(gè) Generator 函數(shù)。我們需要在前者的函數(shù)體內(nèi)部,自己手動(dòng)完成遍歷,如果函數(shù)調(diào)用多層嵌套會(huì)導(dǎo)致寫法繁瑣不易閱讀,ES6 提供了 yield* 表達(dá)式作為解決方法。

委托給其他生成器

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 函數(shù)的 this

Generator 函數(shù)返回一個(gè)遍歷器,ES6 規(guī)定這個(gè)遍歷器是 Generator 函數(shù)的實(shí)例,繼承了 Generator.prototype 對象上的方法,但無法獲取 this 上的屬性,因?yàn)檫@時(shí) this 是全局對象,而不是實(shí)例對象。

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

如果想像構(gòu)造函數(shù)一樣訪問實(shí)例屬性,可以修改 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 實(shí)現(xiàn)一個(gè)狀態(tài)機(jī)

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

網(wǎng)站名稱:Iterator與Generator
文章轉(zhuǎn)載:http://weahome.cn/article/dsojsgs.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部