深入理解ES6之 迭代器與生成器

2022-11-24 19:31:21 字數 3930 閱讀 3554

迭代器是被設計專用於迭代的物件,帶有特定介面。所有的迭代器物件都有next方法,會返回一個結果物件。該結果物件有兩個屬性:對應下一個值的value,以及一個布林型別的done,其值為true時表示沒有更多對值可供使用。

//es5建立迭代器

function createiterator(items)

}}}var iterator = createiterator([1, 2, 3]);

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

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

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

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

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

生成器是一個能返回迭代器的函式。生成器函式由放在function關鍵字之後的一個星號(*)來表示,並使用新的yield關鍵字(指定迭代器在被next()方法呼叫時應當按順序返回的值。)。

function* createiterator() 

var iterator = createiterator();

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

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

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

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

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

生成器最有意思的方面可能就是它們會在每個yield語句後停止執行。

//yield語句在for迴圈中的使用

function* createiterator(items)

}var iterator = createiterator([1, 2, 3]);

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

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

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

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

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

yield只能用於生成器內部,用於其他任何位置都會報錯,即使在生成器內部的函式中也不行。因為yield無法穿越函式邊界。從這點上來說,yield與return非常相似。

function *createiterator(items))

}

你可以使用函式表示式來建立一個生成器,只需要在function關鍵字與圓括號之間使用一個星號(*)即可。

var o = 

}}

可迭代物件被設計用於與es新增的for-of迴圈配合使用。

for-of迴圈在迴圈每次執行時會呼叫可迭代物件的next()方法,並將結果物件的value儲存在一個變數上。迴圈過程會持續到結果物件的done屬性程式設計true為止。

let values = [1, 2, 3];

for (let num of values)

//輸出內容為

1,2,3

let set = new set([1, 3, 3, 2, 4, 5, 1, 3]);

for (let val of set)

//輸出內容為

1,3,2,4,5

let map = new map();

map.set("name", "cc");

map.set("age", 26);

for (let val of map)

//輸出內容為

["name","nicolas"]

["age",52]

你可以使用symbo.iterator來訪問物件上的預設迭代器。

let values = [1, 2, 3];

var iterator = values[symbol.iterator]();

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

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

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

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

es6具有三種集合物件型別:陣列、map和set。這三種型別都擁有如下迭代器:

entries():返回一個包含鍵值對的迭代器

values():返回一個包含集合中值的迭代器

keys():返回一個包含集合中鍵的迭代器

let colors = ["red", "green", "blue"];

let set = new set([1234, 5678, 9012]);

let map = new map();

map.set("title", "unde");

map.set("format", "ebook");

//entries

for (let entry of colors.entries())

for (let entry of set.entries())

for (let entry of map.entries())

//values

for (let value of colors)

for (let value of set.values())

for (let value of map.values())

//keys

for (let key of colors.keys())

for (let key of set.keys())

for (let key of map.keys())

let message = "a  b";

for (let s of message)

//輸出內容為

a(blank)

(blank)

b

let p = document.getelementsbytagname("p");

for (let c of p)

function* createiterator() 

let iterator = createiterator();

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

console.log(iterator.next(4));//6

console.log(iterator.next(5));//8

在包含賦值操作的第一個yield語句中,表示式右側再第一次呼叫next()時被計算,而表示式左側則在第二次呼叫next()方法時,並在生成器函式執行之前被計算。

function* createnumi() 

function* createcoli()

function* createcomb()

let iterator = createcomb();

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

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

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

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

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

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

深入理解ES6之 物件

在js中比較兩個值時,你可能會用相等運算子 或者嚴格相等運算子 為了避免在比較時發生強制型別轉換,許多開發者更傾向於使用後者。object.is 接受兩個引數,並且會在二者的值相等時返回true,此時要求二者的資料型別相同並且值也相等。console.log object.is 0,0 false ...

理解可迭代物件 迭代器 生成器 生成器表示式

關係圖容器 container 容器是一種把多個元素組織在一起的資料結構,容器中的元素可以逐個地迭代獲取,可以用in,not in關鍵字判斷元素是否包含在容器中 可迭代物件 但凡是可以返回一個迭代器的物件都可稱之為可迭代物件 x 1,2,3 y iter x z iter x 迭代器有一種具體的迭代...

深入理解ES6之 資料解構

物件解構語法在賦值語句的左側使用了物件字面量 let node 既宣告又賦值 let node 或者先宣告再賦值 let type,name node console.log type true console.log name falsetype與name識別符號既宣告瞭本地變數,也讀取了物件的相...