下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:ES6.x

作者:purple910     来源: https://www.cnblogs.com/purple910/p/11827527.html点击数:703发布时间: 2020-03-11 14:19:16

标签: 面向对象ES6

Web开发

  类(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=/(?<year>\\d{4})-(?<month>\\d{2})-(?<day>\\d{2})/

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

  letreg=/^(?<name>welcome)-\\k<name>-\\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)){

  <!--thrownewTypeError('年龄是整数')-->

  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等基本类型,不同的是它是一种复杂的数据类型。因为它的本质是类型,而不是数据,所以不存在于内存中,不能被直接操作,只有被实例化为对象时,才会变得可操作。

赞(10)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程