ES 6入門編(下)

【Iteratorsシーケンサ(交代交換)】実行毎にオブジェクト機能が戻ります.別のデータ構造、例えばAray、Object、Set、Mapなど、実はいくつかのセットです.Iteratorは異なるデータ構造のセットに対して

を巡回することができます.

//    next() ,     ，{value，done}
// { value ：xx , done：true or false}  value      ，done        

//        
 function chef(foods){
     let i = 0;
     return {
         next(){
             let done = ( i>=foods.length );
             let value = !done ? foods[i++] : undefined;
             return {
                 value:value,
                 done:done
             }
         }
     }
 }

 let wanghao = chef(["   ","  "]);  //   wanghao        
 
 console.log(wanghao.next()); // { value: '   ', done: false }
 console.log(wanghao.next()); // { value: '  ', done: false }
 console.log(wanghao.next()); // { value: undefined, done: true }

//             ，           
//   obj      Symbol.iterator       ，    

let obj = {
    start:[1,2,3],
    end:[7,8,9],
    [Symbol.iterator](){
        let self= this;
        let index = 0;
        let arr = self.start.concat(self.end);
        let len = arr.length;
        //       {}，   next()，      {value：xxx, done: true or false}，        
        return {
            next(){
                if(index < len){
                    return {
                        value:arr[index++],
                        done:false
                    }
                }else{
                    return {
                        value:arr[index++],
                        done:true
                    }
                }
            
            }
        }
    }
}

for( let key of obj){
    console.log(key) // 1 2 3 7 8 9 
}

2.【Generatorsジェネレータ】サブジェネレータを作成するGeneratorは、非同期的にプログラムされたより高級な解決方法です.

//        
 function* chef(foods){
     for(var i=0;i

let obj = {};

obj[Symbol.iterator] = function* (){
    yield 1;
    yield 2;
    yield 3;
}
for ( let value of obj){
    console.log('value',value); 
    // value 1
    // value 2
    // value 3
} 

アプリケーションのシーンは、ステータスマシンです.

//    
let state= function* (){
    while(1){
        yield "a";
        yield "b";
        yield "c";
    }
}

let status = state();

console.log(status.next()); // { value: 'a', done: false }
console.log(status.next()); // { value: 'b', done: false }
console.log(status.next()); // { value: 'c', done: false }
console.log(status.next()); // { value: 'a', done: false }

3.【クラスクラスクラスクラスクラス】

class Chef{
     //                 constructor    ，          
     constructor (food){
         this.food = food;
         this.dish = [];
    }
     eat(){
         console.log(this.food);
     }
     //       ，               ，           
     static cook(food){
         console.log(food);
     }
     //       
    get menu(){
         return this.dish;
     }
     // set      menu    ，     dish     this.dish
    set menu(dish){
         this.dish.push(dish);
    }
 }

 let xiaohong  = new Chef("  ");
 xiaohong.eat(); //   

 // get set   
 let wanghao = new Chef();
 console.log(wanghao.menu = "  "); //   
 console.log(wanghao.menu = "      "); //       
 console.log(wanghao.menu); // [ '  ', '      ' ]
 
 // static       
 Chef.cook("   "); //    

4.【extens引き継ぎ】

//   
 class Person{
     constructor(name,birthday){
         this.name = name,
         this.birthday = birthday
	 }

     intro(){
         return `${this.name},${this.birthday}`
     }
 }
 //   
 class Chef extends Person{
     constructor(name,birthday){
        //        
         super(name,birthday);
     }
 }

 let zhoushiqin = new Chef("zhoushiqin","1996-7-18")
 
 console.log(zhoushiqin.intro()) // zhoushiqin,1996-7-18

5.【セット】一山のものの集合は配列に相当しますが、****セットの内容は重複してはいけません.行列や文字列のデバッグに使えます.

 let dessert = new Set(["  ","   ","  ","  "]);
 dessert.add("  ");
 dessert.add("  ");

 console.log(dessert); // Set { '  ', '   ', '  ', '  ' }
 
 console.log(dessert.size); // 4
 
 console.log(dessert.has("  ")); // true
 
 dessert.delete("  "); 
 console.log(dessert); // Set { '  ', '   ', '  ' }
 
 dessert.forEach( item =>{
     console.log(item) //          
 })

6.【Map】対象に相当し、対象としてkey-valueのプロジェクトに対するkeyを実現できます.対象以外に文字列、関数はkeyとしてもいいです.

 let food = new Map();
 let fruit = {}, 
     cook = function(){},
     dessert = "  ";

 console.log(food); // Map {}
 
 food.set(fruit,"  ");
 console.log(food); // Map { {} => '  ' }
 
 food.set(cook, "   ");
 food.set(dessert, "   ");
 console.log(food); // Map { {} => '  ', [Function: cook] => '   ', '  ' => '   ' }
 
 console.log(food.size); // 3
 console.log(food.get(fruit)); //   
 console.log(food.get(cook)); //    
 
 food.delete(dessert); 
 console.log(food.has(dessert)); // false
 
 food.forEach((value,key) =>{
     console.log(`${key} = ${value}`); // [object Object] =     function(){} =    
 })

 food.clear();
 console.log(food) // Map {}

7.【JS定義モジュールModule】必要に応じてモジュールBabel変換を定義し、export導出モジュールを使用して、モジュールを使用するところimport導入モジュールexportで変数、オブジェクト、関数、クラスexport defaultがデフォルトでエクスポートされたものを導入する場合、追加する必要はありません.