ECMAScript6语法重点（二）

十一.Proxy和Reflect（Proxy保护对象不被外界访问；Object方法移植到Reflect）

①Proxy：原始对象（供应商）通过Proxy（代理商）生成新对象（映射原对象），用户访问的是新对象，对新对象操作会通过Proxy传回原对象，原对象对用户不可见。

{
  let obj={
    time:'2017-03-11',
    name:'net',
    _r:123
  };

  let monitor=new Proxy(obj,{
    // 拦截对象属性的读取
    get(target,key){
      return target[key].replace('2017','2018')
    },
    // 拦截对象设置属性
    set(target,key,value){
      if(key==='name'){
        return target[key]=value;
      }else{
        return target[key];
      }
    },
    // 拦截key in object操作
    has(target,key){
      if(key==='name'){
        return target[key]
      }else{
        return false;
      }
    },
    // 拦截delete
    deleteProperty(target,key){
      if(key.indexOf('_')>-1){
        delete target[key];
        return true;
      }else{
        return target[key]
      }
    },
    // 拦截 Object.keys,Object.getOwnPropertySymbols,Object.getOwnPropertyNames
    ownKeys(target){
      return Object.keys(target).filter(item=>item!='time')
    }
  });

  console.log('get',monitor.time);//get 2018-03-11
  monitor.time='2018';
  monitor.name='mu';
  console.log('set',monitor.time,monitor);//set 2018-03-11 Proxy{time: "2017-03-11", name: "mu", _r: 123}
  console.log('has','name' in monitor,'time' in monitor);//has true false  time被隐藏了
  console.log('ownKeys',Object.keys(monitor));//ownKeys ["name", "_r"] time被隐藏了
  delete monitor._r;
  console.log('delete',monitor);//Proxy{time: "2017-03-11", name: "mu"}
}

②Reflect直接用

{
  let obj={
    time:'2018-11-27',
    name:'net',
    _r:123
  };

  console.log(Reflect.get(obj,'time'));//2018-11-27
  Reflect.set(obj,'name','muu');
  console.log(obj);//{time: "2018-11-27", name: "muu", _r: 123}
  console.log(Reflect.has(obj,'name'));//ture
}

十二.类

基本语法  类的继承  静态方法  静态属性  getter  setter

{
  // 基本定义和生成实例
  class Parent{
    constructor(name='muu'){
      this.name=name;
    }
  }
  let v_parent = new Parent('v');
  console.log('构造函数和实例',v_parent);//构造函数和实例 Parent {name: "v"}
}

{
  // 继承
  class Parent{
    constructor(name='muu'){
      this.name=name;
    }
  }
  class Child extends Parent{

  }
  console.log('继承',new Child());//继承 Child {name: "muu"}
}

{
  // 继承传递参数
  class Parent{
    constructor(name='muu'){
      this.name=name;
    }
  }
  class Child extends Parent{
    constructor(name='child'){
      super(name);//一定要放在构造函数第一行
      this.type='child';
    }
  }
  console.log('继承传递参数',new Child('hello'));//继承传递参数 Child {name: "hello", type: "child"}
}

{
  // getter,setter
  class Parent{
    constructor(name='muu'){
      this.name=name;
    }
    get longName(){
      return 'mu'+this.name
    }
    set longName(value){
      this.name=value;
    }
  }
  let v=new Parent();
  console.log('getter',v.longName);//getter mumuu
  v.longName='hello';
  console.log('setter',v.longName);//setter muhello
}

{
  // 静态方法
  class Parent{
    constructor(name='muu'){
      this.name=name;
    }
    static tell(){
      console.log('tell');
    }
  }
  Parent.tell();//tell   通过类调用而不是通过实例调用
}

{
  // 静态属性
  class Parent{
    constructor(name='muu'){
      this.name=name;
    }
    static tell(){
      console.log('tell');
    }
  }
  Parent.type='test';
  console.log('静态属性',Parent.type);//静态属性 test
}

十三.Promise（异步编程的解决方法，a执行完再执行b）

优点：Promise可以异步执行多个，code简洁

{
  // 传统回调基本定义  打印执行，1秒后打印timeout1
  let ajax=function(callback){
    console.log('执行');
    setTimeout(function () {
      callback&&callback.call()
    }, 1000);
  };
  ajax(function(){
    console.log('timeout1');
  })
}

{
  //打印执行2，1秒后打印promise timeout2
  let ajax=function(){
    console.log('执行2');
    return new Promise(function(resolve,reject){
      setTimeout(function () {
        resolve()
      }, 1000);
    })
  };
  ajax().then(function(){//ajax()是一个promise实例，可有很多then方法
    console.log('promise','timeout2');
  })
}

{
  let ajax=function(num){
    console.log('执行3');
    return new Promise(function(resolve,reject){
      if(num>5){
        resolve()
      }else{
        throw new Error('出错了')
      }
    })
  }
  ajax(6).then(function(){//执行3  log 6
    console.log('log',6);
  }).catch(function(err){
    console.log('catch',err);
  });
  ajax(3).then(function(){//执行3  catch Error: 出错了
    console.log('log',3);
  }).catch(function(err){
    console.log('catch',err);
  });
}

十四.Iterator和for...of循环

①Iterator接口：用一种办法读取不同的数据集合（数组、Object、Map、Set）

{
  let arr=['hello','world'];
  let map=arr[Symbol.iterator]();
  console.log(map.next());//{value: "hello", done: false}
  console.log(map.next());//{value: "world", done: false}
  console.log(map.next());//{value: undefined, done: true}
}

{
  //自定义读取
  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方法的对象
　　　　 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 3 2 7 9 8
  }
}

②for...of不断调用Iterator

{
  //for...of 用法
  let arr=['hello','world'];
  for(let value of arr){
    console.log(value);//hello  world
  }
}

十五.Generator（异步编程）

进入函数停在第一个yield前，执行一个next()方法，执行一个yield，直到没有可往下执行的yield或者return则返回done:true

{
  // genertaor基本定义
  let tell = function* (){
    yield 'a';
    yield 'b';
    return 'c'
  };
  let k = tell();
  console.log(k.next());//{value: "a", done: false}
  console.log(k.next());//{value: "b", done: false}
  console.log(k.next());//{value: "c", done: true}
  console.log(k.next());//{value: undefined, done: true}
}

{
  //用genertaor部署，不手写Iterator(object对象不能用for...of除非有Iterator接口)
  let obj={};
  obj[Symbol.iterator]=function* (){
    yield 1;
    yield 2;
    yield 3;
  }
  for(let value of obj){
    console.log(value);//1 2 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}
  console.log(status.next());//{value: "B", done: false}
}

十六.Decorator（修饰器：函数修改类的行为）

{
  //只读
  let readonly=function(target,name,descriptor){
    descriptor.writable=false;
    return descriptor
  };
  class Test{
    @readonly
    time(){
      return '2018-11-27'
    }
  }
  let test=new Test();
  console.log(test.time());//2018-11-27
  test.time=function(){
     console.log('reset time');
  };
  console.log(test.time());//2018-11-27
}

{
  let typename=function(target,name,descriptor){
    target.myname='hello';
  }
  @typename//可以放class上面
  class Test{

  }
  console.log('类修饰符',Test.myname);//类修饰符 hello
  //可引入第三方库修饰器的js库，不用自己写，直接@就可以：core-decorators; npm install core-decorators
}

十七.模块化

export let A=123;
export function test(){
  console.log('test');
}
export class Hello{
  test(){
    console.log('class');
  }
}
import {A,test,Hello} from './xx';//{}中取什么写什么,./xx是上面内容的路径
import  *as  lesson1  from './xx';//取所有内容放到对象lesson1中
-------------------------------------------
let A=123;
let test=function(){
  console.log('test');
}
class Hello{
  test(){
    console.log('class');
  }
}
export default {A,test,Hello}//导出,但是我不指定名字,路径为./xxx
import lesson from './xxx';//我随便叫lesson，它接收了上面的内容
console.log(lesson.A);//123