JavaScript开发者需要知道的速记技巧本文的目的是帮助你更熟练地使用JavaScript语言进行开发工作。文章将分为初级和高级两部分，分别进行介绍。基本部分1.三元运算符以下是一个很好的示例，它将完整的if语句简化为一行代码。constx=20;letanswer;if(x>10){answer='大于10';}else{answer='小于10';}简写为：constanswer=x>10?'大于10':'小于10';2.循环语句当使用纯JavaScript（不依赖外部库，如jQuery或lodash）时，下面的简写会非常有用。for(leti=0;iconsole.log('Hello',name);setTimeout(()=>console.log('Loaded'),2000);list.forEach(item=>console.log(item));5.隐式返回值返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数可以隐式返回一个结果（该函数必须省略括号({})，以便省略return关键字）。要返回多行语句（例??如对象字面量），需要使用()而不是{}来包裹函数体。这确保代码被评估为单个语句。functioncalcCircumference(diameter){returnMath.PI*diameter}的缩写为：calcCircumference=diameter=>(Math.PI*diameter;)6.默认参数值可以使用if语句来定义函数的默认值范围。ES6规定可以在函数声明中定义默认值。函数体积（l，w，h）{如果（w===未定义）w=3;如果（h===未定义）h=4；returnl*w*h;}简写为：volume=(l,w=3,h=4)=>(l*w*h);volume(2)//output:247.templatestring过去，我们以前都是用“+”把多个变量转换成字符串，但是有没有更简单的方法呢？ES6提供了相应的方法，我们可以使用反引号和${}将变量组合成一个字符串。constwelcome='您已经登录为'+first+''+last+'.'constdb='http://'+主机+':'+端口+'/'+数据库；缩写为：constwelcome=`您已登录为${first}${last}`；constdb=`http://${host}:${port}/${database}`;8.解构赋值解构赋值是一种表达式，用于从数组或对象中快速提取属性值，并将其赋值给定义好的变量。在代码速记方面，解构赋值可以达到很好的效果。constobservable=require('mobx/observable');constaction=require('mobx/action');construnInAction=require('mobx/runInAction');conststore=this.props.store;constform=this.道具形式；constloading=this.props.loading;consterrors=this.props.errors;constentity=this.props.entity;缩写为：import{observable,action,runInAction}from'mobx';const{store,form,loading,errors,entity}=this.props;你甚至可以指定你自己的变量名：const{store,form,loading,errors,entity:contact}=this.props;9.扩展运算符扩展运算符是在ES6中引入的，使用扩展运算符可以使JavaScript代码更加高效和有趣。可以使用扩展运算符替换某些数组函数。//连接数组constodd=[1,3,5];常量数=[2,4,6]。连接（奇数）；//克隆数组constarr=[1,2,3,4];constarr2=arr.slice()缩写为：//连接数组constodd=[1,3,5];constnums=[2,4,6,...奇数];控制台日志（数字）；//[2,4,6,1,3,5]//克隆数组constarr=[1,2,3,4];constarr2=[...arr];与concat()的不同之处在于，用户可以使用展开运算符将任意数组插入到另一个数组中。const奇数=[1,3,5];constnums=[2,...奇数,4,6];您还可以将扩展运算符与ES6解构符号结合使用：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}10.强制参数默认情况下，如果没有值传递给函数参数，JavaScript会将函数参数设置为未定义。其他语言发出警告或错误。要执行参数分配，可以使用if语句来抛出未定义的错误，或者可以使用“强制参数”。functionfoo(bar){if(bar===undefined){thrownewError('缺少参数！');}returnbar;}简写为：mandatory=()=>{thrownewError('Missingparameter!');}foo=(bar=mandatory())=>{returnbar;}11.Array.find如果你曾经用纯JavaScript编写过查找函数，您可能使用过for循环。在ES6中，引入了一个名为find()的新数组函数，它实现了for循环的简写形式。constpets=[{type:'Dog',name:'Max'},{type:'Cat',name:'Karl'},{type:'Dog',name:'Tommy'},]functionfindDog(name){for(leti=0;ipet.type==='Dog'&&pet.name==='Tommy');控制台日志（宠物）；//{type:'Dog',name:'Tommy'}12,Object[key]尽管将foo.bar写成foo['bar']是一种常见的做法，但这种做法构成了编写可重用代码的基础。考虑以下验证函数的简化示例：functionvalidate(values){if(!values.first)returnfalse;如果（！values.last）返回false；returntrue;}console.log(validate({first:'Bruce',last:'Wayne'}));//true上面的函数完美的完成了校验工作。但是当表单比较多的时候，就需要申请validation，这时候就会有不同的字段和规则。如果您可以构建一个在运行时配置的通用验证函数，那就太好了。//对象验证规则constschema={first:{required:true},last:{required:true}}//通用验证函数constvalidate=(schema,values)=>{for(fieldinschema){if(模式[字段].required){if(!values[field]){返回false;}}}returntrue;}console.log(validate(schema,{first:'Bruce'}));//falseconsole.log(validate(schema,{first:'Bruce',last:'Wayne'}));//true现在我们有了这个验证函数，我们可以在所有表??单中重用它，而无需为每个表单函数编写自定义验证。13.双位运算符位运算符是JavaScript初级教程的基础知识点，但是我们并不经常用到位运算符。因为没有人愿意在不处理二进制的情况下处理1和0。但是二元运算符有一个非常有用的例子。您可以使用二元运算符代替Math.floor()。双取反位运算符的优点是它可以更快地执行相同的操作。Math.floor(4.9)===4//true简写为：~~4.9===4//true总结了以上是一些常用的JavaScript简写技巧，如果还有其他的简写技巧没有提到，欢迎大家交流加上。原文链接：https://www.sitepoint.com/shorthand-javascript-techniques/转载请注明出处：葡萄城控
