今天程序员好web前端教程分享JavaScript速记方法,小伙伴们快来看看吧。1.三元运算符当你想写一个if...else语句时,请改用三元运算符。constx=20;letanswer;if(x>10){answer='isgreater';}else{answer='islesser';}简写:constanswer=x>10?'isgreater':'islesser';还可以嵌套if语句:constbig=x>10?""greater10":x2.可以写一个有多个条件的if语句。if(variable1!==null||variable1!==undefined||variable1!==''){letvariable2=variable1;}或者你可以使用短-电路求值法:constvariable2=variable1||'new';3.声明变量简写法letx;lety;letz=3;简写法:letx,y,z=3;4.ifexists条件简写法if(likeJavaScript===true)简写:if(likeJavaScript)只有likeJavaScript是真值,这两个语句是相等的。functionsayHello(name){console.log('Hello',name);}setTimeout(function(){console.log('Loaded')},2000);list.forEach(function(item){console.log(item);});速记:sayHello=name=>console.log('Hello',name);setTimeout(()=>console.log('Loaded'),2000);list.forEach(item=>console.log(item));10.隐式返回值的简写常使用return语句来返回函数的最终结果。单条语句的箭头函数可以隐式返回它的值(函数必须省略{}才能省略return关键字)返回多条Line语句(比如对象字面量表达式),需要用()把函数包围起来身体。functioncalcCircumference(diameter){returnMath.PI*diameter}varfunc=functionfunc(){return{foo:1};};简写:calcCircumference=diameter=>(Math.PI*diameter;)varfunc=()=>({foo:1});11、默认参数值就是在函数中给参数传递默认值,一般用if语句写,但是用ES6来定义默认值,会很简洁:functionvolume(l,w,h){if(w===undefined)w=3;if(h===undefined)h=4;returnlwh;}速记:volume=(l,w=3,h=4)=>(lwh);volume(2)//output:2412.templatestring在传统的JavaScript语言中,输出模板通常是这样写的。constwelcome='你已经登录为'+first+''+last+'.'constdb='http://'+host+':'+port+'/'+database;ES6可以对{}使用反引号和$简写:constwelcome=Youhaveloggedinas${first}${last};constdb=http://${host}:${port}/${database};13.web框架中的解构赋值速记方法,经常需要以数组或者对象字面量的形式在组件和API之间来回传递数据,然后需要对其进行解构。constobservable=require('mobx/observable');constaction=require('mobx/action');construnInAction=require('mobx/runInAction');conststore=this.props.store;constform=this.props.form;constloading=this.props.loading;consterrors=this.props.errors;constantity=this.props.entity;shorthand:import{observable,action,runInAction}from'mobx';const{store,form,loading,errors,entity}=this.props;也可以给变量名赋值:const{store,form,loading,errors,entity:contact}=this.props;//最后一个变量名是contact14。多行字符串简写需要输出多行字符串。为了达到最小的细节,任何人都不应从事我们的任何练习,除非从中获得一些好处。Duisautent'+'iruredolorinreprehenderitvelitesse。untut劳动和疼痛magna缓解。使用和最短的时间,这有助于锻炼甚至劳动,但会带来一点前和舒适的结果。Duisauteirure疼痛在voluptatevelitesse中的reprehenderit。有效使用,可用于替换数组函数//joiningarraysconstodd=[1,3,5];constnums=[2,4,6].concat(odd);//克隆数组constarr=[1,2,3,4];constarr2=arr.slice()shorthand://joiningarraysconstodd=[1,3,5];constnums=[2,4,6,...odd];console.log(nums);//[2,4,6,1,3,5]//克隆数组constarr=[1,2,3,4];constarr2=[...arr];与concat()函数不同,您可以使用扩展运算符将一个数组插入另一个数组中的任意位置。constodd=[1,3,5];constnums=[2,...奇数,4,6];也可以使用扩展运算符进行解构:const{a,b,...z}={a:1,b:2,c:3,d:4};console.log(a)//1console.log(b)//2console.log(z)//{c:3,d:4}16.Mandatoryparameters在速记JavaScript中,如果没有值传递给函数参数,参数未定义。要增强参数分配,请使用if语句抛出异常,或使用强制参数简写。functionfoo(bar){if(bar===undefined){thrownewError('Missingparameter!');}returnbar;}速记:mandatory=()=>{thrownewError('Missingparameter!');}foo=(bar=mandatory())=>{returnbar;}17.Array.find的简写如果要从数组中找到一个值,需要循环。在ES6中,find()函数可以达到同样的效果。constpets=[{type:'Dog',name:'Max'},{type:'Cat',name:'Karl'},{type:'Dog',name:'Tommy'},]functionfindDog(name){for(leti=0;i
