es6进阶

一、构建工具：
gulp、babel、webpack、npm，一套完整的构建工具，编译，监听，打包，上线
二、基础语法
对应的代码和实例
三、项目实战
express 、mockjs做服务器接口数据
1、模块化概念
2、工程构建
3、编程经验
2-1项目构建
1、基础架构
2、任务自动化（gulp)（模块依赖，文件的压缩）
3、编译工具（babel、webpack）babel专门做es6的解析，webpack做模块依赖，文件压缩
4、代码实现
1、基础架构：

任务自动化，电脑自动监听，自动响应
gulp工具，就是完成任务自动化，属于nodejs，task组合完成更加复杂的任务，通过流
gulp中文网，插件，API
babel：编译器，
webpack及webpack-stream的作用
一、块级作用域
{
}
1、let声明的变量只在自己的块级作用域中有效
2、‘use strict’ es5中采用严格模式，es6中强制开启严格模式
3、严格模式中未声明不能调用
4、使用let声明的变量不能重复声明
5、const声明的是常量，使用const声明的是不能修改的，const也是块作用域，声明的时候必须赋值
二、解构赋值
就是一种赋值，左边一种结构，右边一种结构
分类：数组解构赋值，对象解构赋值，布尔值解构赋值，函数参数解构赋值，字符串解构赋值，数值解构赋值

{
            let a,b,rest;
            [a,b]=[1,2];
            console.log(a,b);
        }
        {
            let a,b,rest;
            [a,b,...rest]=[1,2,3,4,5,6];
            console.log(a,b,rest);
        }
        {
            let a,b;
            ({a,b}={a:1,b:2});
            console.log(a,b);
        }
        {
            let a,b,c,rest;
            [a,b,c=3]=[1,2];
            console.log(a,b,c);
        }

Symbol
概念：表示唯一值，独一无二的

{
    let a1=Symbol();
    let a2=Symbol();
    console.log(a1===a2);
    let a3=Symbol.for('a3');
    let a4=Symbol.for('a3');
    console.log(a3===a4);
}

数据结构
Set用法
Map用法
set不能添加重复的元素， 可做数组的去重

 {
        let arr=[1,2,3,1,'2'];
        let list2=new Set(arr);
        console.log(list2);
 }

特点

{
        let arr=['add','delete','clear','has'];
        let list=new Set(arr);
        console.log(list.has('add'));
        console.log(list.delete('add'));
        list.clear();
        console.log(list);
    }

遍历

   {
        let arr=['add','delete','clear','has'];
        let list=new Set(arr);
        for(let key of list){
            console.log(key)
        }
        list.forEach(function(item){
            console.log(item);
        })
    }

Map

   {
        //map的key是可以任何数据类型
        let map=new Map();
        let arr=['123'];
        map.set(arr,456)
        console.log(map,map.get(arr));
    }
	{
        let map=new Map([['a',123],['b',456]]);
        console.log(map)
        console.log(map.size);
        console.log(map.delete('a'))  
 	}

数据结构：增删改查
数据结构首选Map，遇到去重选Set
Proxy代理，Reflect反射的是object

拦截Object.keys,Object.getOwnPropertySymbols
es6中的类和对象
基础语法
类的继承
静态方法
静态属性
getter、setter

{
    //定义一个类
    class Parent{
        constructor(name='mukewang'){
            this.name=name;
        }
    }
    let v_parent=new Parent('v');
    console.log(v_parent);
}

{
    //继承
    class Parent{
        constructor(name='mukewang'){
            this.name=name;
        }
    }
   
    class Child extends Parent{
        
    }
    console.log('继承',new Child());
}

{
    //继承
    class Parent{
        constructor(name='mukewang'){
            this.name=name;
        }
    }
    //继承子类怎么在自己的构造函数中定义自己的方法
    class Child extends Parent{
        constructor(name='child'){
            //super的参数列表是子类的constructor中的
            super(name);
            //子类的构造函数用super，super一定放在第一行
            this.type='child';

        }
    }
    console.log('继承',new Child('hello'));
}

'use strict'
{
    //getter,setter
    class Parent{
        constructor(name='mukewang'){
            this.name=name;
        }
    
        get longName(){
        return 'mk'+this.name
        }

        set longName(value){
            this.name=value;
        }
    }
    let v=new Parent();
    console.log(v.longName);
    //赋值就是set操作
    v.longName='hello';
    console.log(v.longName);
}

{
    //静态方法,直接通过类去调用，而不是类的实例去调用
    class Parent{
        constructor(name='mukewang'){
            this.name=name;
        }
        static tell(){
            console.log('tell');
        }
    }
    Parent.tell();
}
{
    //静态属性
    class Parent{
        constructor(name='mukewang'){
            this.name=name;
        }
        static tell(){
            console.log('tell');
        }
        
    }
    Parent.type='test';
    console.log(Parent.type);
}   

Promise
解决异步操作
Promise的作用
Promise的基本用法

{
    let ajax=function(){
        console.log('执行2');
        return new Promise(function(resolve,reject){
        setTimeout(function () {
            resolve()
        }, 1000);
        })
    };
        ajax().then(function(){
            console.log('promise','timeout2');
        })
    }

Iterator和for…of循环
Iterator接口统一读取数据结构

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

es6模块化
import export

  //default给导出的对象不起名字
    export default {
        A,test,Hello
    }