web前端：ES6.x

作者:purple910更新于： 2020-03-06 13:55:07

　　类(Class)是面向对象程序开发设计(OOP，Object-OrientedProgramming)实现信息封装的基础。类是一种用户定义类型，也称类类型。每个类包含数据说明和一组操作数据或传递消息的函数。类的实例称为对象。

　　类

　　classAnimal{

　　constructor(name){

　　this.name=name

　　}

　　Spack(){

　　console.log(name)

　　}

　　}

　　classDogextendsAnimal{

　　constructor(name,age){

　　super(name);//子类中如果有constructor,就必须有super

　　this.age=age

　　}

　　Spack(){

　　super.Spack()//如果没有,则重写Spack方法,有则在Spack中添加内容

　　console.log(age)

　　}

　　}

　　模块化

　　//导出

　　varname='Rainbow';

　　varage='24';

　　export{name,age};

　　导入

　　import{name,age}from'来源';

　　箭头函数

　　()=>1

　　v=>v+1

　　(a,b)=>a+b

　　()=>{

　　alert("foo");

　　}

　　e=>{

　　if(e==0){

　　return0;

　　}

　　return1000/e;

　　}

　　模板字符串

　　letname=Tom

　　`welcome${name}`

　　解构赋值

　　let[foo,[[bar],baz]]=[1,[[2],3]];

　　foo//1

　　bar//2

　　baz//3

　　[x,y='b']=['a',undefined];//x='a',y='b'

　　for(let[key,value]ofmap){

　　console.log(key+"is"+value);

　　}

　　延展操作符

　　functionsum(x,y,z){

　　returnx+y+z;

　　}

　　constnumbers=[1,2,3];

　　console.log(sum(...numbers));

　　let[a,b,...c]=[1,2,3,4,5,6,7,]

　　console.log(a,b,c)//12[3,4,5,6,7]

　　vararr=[1,2,3];

　　vararr2=[...arr];//等同于arr.slice()

　　Promise

　　varpromise=newPromise(function(resolve,reject){

　　//...somecode

　　if(/*异步操作成功*/){

　　resolve(value);

　　}else{

　　reject(error);

　　}

　　});

　　promise.then(function(value){

　　//success

　　},function(error){

　　//failure

　　});

　　promise.then((value)=>{

　　//success

　　},(error)=>{

　　//failure

　　});

　　promise.then((value)=>{

　　//success

　　}).catch((err)=>{

　　//failure

　　});

　　Generator函数

　　function*gen(x){

　　vary=*yield*x+2;

　　returny;

　　}

　　varg=gen(1);

　　g.next()//{value:3,done:false}

　　g.next(2)//{value:2,done:true}

　　async/await

　　*async*functionprocess(array){

　　for*await*(letiofarray){

　　doSomething(i);

　　}

　　}

　　asyncfunctionprocess(array){

　　forawait(letiofarray){

　　doSomething(i);

　　}

　　}

　　正则

　　/foo.bar/.test('foo\\nbar')//false

　　/foo.bar/s.test('foo\\nbar')//true

　　letstr='2019-07-31'

　　letreg=/(\\d{4})-(\\d{2})-(\\d{2})/

　　letreg=/(?\\d{4})-(?\\d{2})-(?\\d{2})/

　　console.log(str.match(reg).grouPS)

　　letreg=/^(?welcome)-\\k-\\1$/

　　letstr=welcome-welcome-welcome

　　console.log(reg.test(str))

　　Proxy

　　letjson={

　　name,

　　age

　　}

　　letnewJson=newProxy(json,{

　　set(target,property,value){

　　if(property=='age'){

　　if(!Number.isInteger(value)){

　　returnfalse

　　}

　　}

　　target[property]=value

　　returntrue

　　},

　　get(target,property){

　　if(propertyintarget){

　　console.log(`你访问了${property}属性`)

　　returntarget[property]

　　}else{

　　console.log(`没有这个属性`)

　　returnnull

　　}

　　},

　　has(target,key){

　　returnkeyintarget;

　　},

　　deleteProperty(target,property){

　　returntrue

　　}

　　})

　　vartarget=function(){return'Iamthetarget';};

　　varhandler={

　　apply:function(){

　　return'Iamtheproxy';

　　}

　　};

　　varp=newProxy(target,handler);

　　p()

　　constDOM=newProxy({},{

　　get(target,property){

　　returnfunction(attr={},...children){

　　consoleel=document.createElement(property)

　　for(letkeyofObject.keys(attr)){

　　el.setAttribute(key,attr[key])

　　}

　　for(letchildofchildren){

　　if(typeofchild=='string'){

　　child=document.createTextNode(child)

　　}

　　el.appendChild(child)

　　}

　　returnel

　　}

　　}

　　})

　　letoDiv=DOM.div(

　　{id:'id1',class:'cl1'},'div','1123',

　　DOM.ul({},

　　DOM.li({},111)

　　DOM.li({},222)

　　DOM.li({},333)

　　)

　　)

　　类的实质是一种数据类型，类似于int、char等基本类型，不同的是它是一种复杂的数据类型。因为它的本质是类型，而不是数据，所以不存在于内存中，不能被直接操作，只有被实例化为对象时，才会变得可操作。