ES6新增深入理解generator

參考學習：

先來一段最基礎的generator**

function* hello() )()
return 300
}var h = hello()
console.log(typeof h)  // object
console.log(h.next())  // 
console.log(h.next())  // 
console.log(h.next())  // 
console.log(h.next())  //

iterator遍歷器

1.symbol是乙個特殊的資料型別，和number string等並列

// 陣列
console.log([1, 2, 3][symbol.iterator])  // function values() 
// 某些類似陣列的物件，noelist
console.log(document.getelementsbytagname('div')[symbol.iterator])  // function values()

2.在 es6 中，原生具有[symbol.iterator]屬性資料型別有：陣列、某些類似陣列的物件（如arguments、nodelist）、set和map。其中，set和map也是 es6 中新增的資料型別。

var item
for (item of [100, 200, 300]) 
// 列印出：100 200 300 
// 注意，這裡每次獲取的 item 是陣列的 value，而不是 index ，這一點和 傳統 for 迴圈以及 for...in 完全不一樣

3.生成iterator物件

定義乙個陣列，然後生成陣列的iterator物件

const arr = [100, 200, 300]
const iterator = arr[symbol.iterator]()  // 通過執行 [symbol.iterator] 的屬性值（函式）來返回乙個 iterator 物件

4.iterator，那麼該如何使用它呢 ———— 有兩種方式：next和for…of。

先說第一種，next

console.log(iterator.next())  // 
console.log(iterator.next())  // 
console.log(iterator.next())  // 
console.log(iterator.next())  //

再說第二種，for…of

let i
for (i of iterator) 
// 列印：100 200 300

generator

1.generator，就是生成乙個iterator物件。因此才會有next()，也可以通過for…of來遍歷。

function* hello() )()
return 300 
}const h = hello()
console.log(h[symbol.iterator])  // [function: [symbol.iterator]]

2.const h = hello()得到的就是乙個iterator物件，因為h[symbol.iterator]是有值的。既然是iterator物件，那麼就可以使用next()和for…of進行操作

console.log(h.next())  // 
console.log(h.next())  // 
console.log(h.next())  // 
console.log(h.next())  // 
let i
for (i of h)

generator 的具體應用

next和yield引數傳遞

1.yield後面的資料被返回，存放到返回結果中的value屬性中。

function* g() 
const g = g()
console.log( g.next() ) //

2.還有另外乙個方向的引數傳遞，就是next向yield傳遞。

function* g() 
const g = g()
g.next()    // value: 100, done: false
g.next('aaa') // value: 200, done: false
g.next('bbb') // value: 300, done: false
g.next('ccc') // value: undefined, done: true

3.for…of的應用示例，用簡單幾行**實現斐波那契數列。

function* fibonacci() 
}for (let n of fibonacci()) 
console.log(n)
}

4.yield*語句，如果有兩個generator，想要在第乙個中包含第二個，如下需求：

function* g1() 
function* g2()

function* g1() 
function* g2() 
for (let item of g1())

5.generator 不是函式，更不是建構函式，建構函式返回的是this，而generator返回的是乙個iterator物件。完全是兩碼事，

深入理解ES6 解構

解構時一種打破資料結構，將其拆分為更小部分的過程。解構在實際開發中經常會應用到物件和陣列中。關於解構的基本用法，請參考 es6 變數的宣告及解構賦值 const node let node 對已經宣告的變數賦值 const node let a,b node const obj let obj co...

深入理解ES6之《解構》

如果使用var let const解析宣告變數，則必須提供初始化程式也就是等號右側的值以下語句有語法錯誤 var let const解構賦值表示式也就是右側的表示式如果為null或undefined會導致程式丟擲錯誤，因為任何嘗試讀取null或undefined的屬性的行為都會觸發執行時錯誤...

深入理解es6的promise

一 promise入門 1.promise物件是什麼函式的另一種原生實現，比之前函式的寫法機構清晰，功能強大，2.以前這麼寫 function a fn else 1000 呼叫a function m 3.用promise 寫 function a else 1000 呼叫a then fu...

ES6新增 深入理解generator

深入理解ES6 解構

深入理解ES6之《解構》

深入理解es6的promise

相關推薦

ES6新增深入理解generator