基本知識
今日、私はes6ジェネレーターとイテレーターについて学びました。私は本当にたくさんの考えを持っています。私はフロントエンドを学んでいる学生です。何かがおかしいと言うかもしれません。ご容赦ください。私が学んだことを要約することです。 。さあ始めましょう
配列拡張
ジェネレータイテレータについて説明する前に、es6の新しく追加された配列の拡張であるes6の知識を最初に理解する必要があります。3つの関数があります：entries（）、keys（）、values（）、これら3つの関数は非常に似ています、それらはすべてDo onethingにあります。例：
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'];
}
entry（）、keys（）、values（）の3つの関数はイテレーターを返します。返されるすべての値はイテレーターの機能を持っているため、for ... ofメソッドを使用できます。
これらの3つの方法を理解していれば、ジェネレータイテレータに入ることができます。
イテレータ
イテレータとは何ですか？これは新しいトラバーサルメカニズムです。2つのコアがあると結論付けました。1つは、データにすばやくアクセスできるインターフェイスであるということです。2つ目は、データ構造をトラバースするために使用されるポインターです。配列に対する比較的単純なイテレータについて説明します。
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（）が4回呼び出されたとき、値がないため、doneの値はtrueです。
発生器
ジェネレーターは関数ですが、通常の関数との違いは次のとおりです。関数を宣言する方法は次のとおりです。
function* func(ele){
console.log(ele);
}
もう1つの違いは、yieldは関数内でのみ呼び出すことができることです。イールドを説明します。つまり、ジェネレーターはyieldキーワードを使用して関数を一時停止します。説明はより明確です。つまり、関数を宣言すると、内部にイールドを記述でき、そこでスタックした関数を「処理」できます。ジェネレーターの1つのメソッドはnext（）です。このメソッドは、yieldがスタックしている場所を再度開き、関数のコンテンツを続行することです。
function* func(){
console.log('start');
yield "2";
console.log('end');
}
let fn = func();
fn.next(); // "start" //{value:'2',done:false}
少し要約すると、ジェネレーターは段階的に実行され、yieldは実行を一時停止し、next（）は実行を再開します。
使用するシーン
最もよく使用されるイテレータとジェネレータの使用シナリオには2つのタイプがありますが、今日は1つのタイプについて説明し、次回はもう1つのタイプを共有します。
このイテレータジェネレータは、イテレータを持たないオブジェクトのインターフェイスを作成するためのものです。
次に例を示します。
//第一步 创建一个无迭代器接口的对象
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里面的属性
さて、ここで共有して、次回は別の使用シーンを共有してください。