迭代器生成器到底有什么用？使用場景！
- 基礎知識
- 陣列的擴展
- 迭代器（Iterator）
- 生成器（generator）
- 使用場景
基礎知識
今天學習了es6的生成器和迭代器，真的有很多感想，我是一個正在學習前端的學生，可能說的不對，可以請各大大神多多包涵，就是總結一個我學到的東西，好了現在開始
陣列的擴展
再說生成器迭代器之前，要先了解一個es6的知識，就是es6新添加的陣列的擴展，有三個功能是entries() , keys() , values()，這三個功能很類似，都是在干一件事情，舉個例子:
for(let index of ['a','b','c','d'].keys(){
console.log(index) //0,1,2,3
}
for(let values of ['a','b','c'].values()){
console.log(values) //'a','b','c'
}
for(let [index,value] of ['a','b','c'].entries()){
console.log([index,value]) // [0,'a'],[1,'b'],[2,'c'];
}
entries() , keys() , values() 這三個函式，回傳都會回傳一個遍歷器，所有它們回傳的值，都具備了遍歷器的功能，所有就可以使用for…of這個方法，
好了，如果這三個方法明白了，之后就可以進入生成器迭代器了，
迭代器（Iterator）
何為迭代器呢？就是一種新的遍歷機制，我總結出它又兩個核心，一個就是它是一個介面，能夠快速的訪問資料，第二個，就是用于遍歷資料結構的指標，先說一個比較簡單的對陣列的迭代器吧，
const items = ['one','two','three'];
//創建迭代器
const ite = items(Symbol.Iterator)();
//進行獲取
console.log(ite.next()) //{value:'one',done:false}
console.log(ite.next()) //{value:'two',done:false}
console.log(ite.next()) //{value:'three',done:false}
console.log(ite.next()) //{value:undefined,done:true}
ite.next()的結果是什么意思呢？就是遍歷出陣列的值，done代表遍歷是否完成，在第四次呼叫ite.next()的時候，已經沒有值了，所以done的值為true，
生成器（generator）
生成器是一個函式，但是它與普通的函式的區別是：宣告函式的方法是：
function* func(ele){
console.log(ele);
}
另一個區別是，只能在函式內部呼叫yield，解釋一個yield哈，就是這個生成器通過yield關鍵字，將函式掛起，再解釋的清晰一點，就是說，如果你宣告一個函式，在內部你可以寫一個yield，就可以把函式的“行程”卡在那里，生成器generator有一個方法是next(),此方法就是把yield卡住的地方，重新打開，讓函式里面的內容繼續走下去
function* func(){
console.log('start');
yield "2";
console.log('end');
}
let fn = func();
fn.next(); // "start" //{value:'2',done:false}
總結一小下：generator是分段執行的，yield是暫停執行，next（）是恢復執行，
使用場景
迭代器和生成器使用場景，用的最多的就有兩類，今天先說一類，另外一類下次再分享，
這迭代器生成器就是，為不具有迭代器的物件，創建介面，
來個例子：
//第一步 創建一個無迭代器介面的物件
let obj = {
name: "xiaoChen",
age: 21
}
//第二步 寫一個迭代器介面 （用到了keys（），忘了往上看看哈）
function* objectEntries(obj){
const Keys = Object.keys(obj);
for(let key of Keys){
yield [key,obj[key]];
}
}
//第三步 給obj介面
obj[Symbol.iterator] = objectEntries;
//第四步 遍歷
for(let [name,age] of objectEntries(obj)){
console.log(`${name}:${age}`); //name: "xiaoChen",age: 21
}
//成功的遍歷出obj里面的屬性
好了分享到這里了，另外一個使用的場景下次再分享，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/267144.html
標籤：其他
上一篇：JS異步：執行原理與回呼