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
