ES6入门篇（下）

【Iterators 迭代器（轮流交换）】每次执行会返回一个对象
功能：针对不同的数据结构，例如 Array,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 是异步编程的更高级的解决方式【除了回调，Promise】

// 定义一个生成器
 function* chef(foods){
     for(var i=0;i<foods.length;i++){
         yield foods[i]
     }
 }

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

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.【类 Classes】

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.【继承 extends】

// 父类
 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.【 Set 】一堆东西的集合相当于数组，但是***Set里面的内容不能重复***
*** 可以用于数组或者字符串的去重 ***

 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 默认导出
在导入默认导出的东西时，不需要加 {}

猜你喜欢