19+JavaScript快速编程技巧-SitePoint这确实是基于JavaScript语言编程的开发人员必读的文章。在过去几年学习JavaScript时，我写了这篇文章并将其用作快速JavaScript编程技巧的重要参考。为了方便理解，我也给出了相关的编程观点，常规写法。2017年6月14日：本文更新了一些基于ES6的速记。如果您想了解更多关于ES6的新变化，您可以注册SitePointPremium并查看我们录制的视频ALookintoES6.1。三元运算符如果你想写一个只有一行代码格式的if..else表达式，那么这是一个节省代码的好方法。常规写法：constx=20;letanswer;if(x>10){answer='isgreater';}else{answer='islesser';}简写：constanswer=x>10?'更大'：'更小';你也可以像这样嵌套if表达式：constbig=x>10?“大于10”：x2。短路求值简写当你需要将一个变量赋值给另一个变量时，你可能需要确保该变量不为null、undefined或不为空。您可以编写一个包含多个if表达式的语句，也可以使用短路求值。常规写法：if(variable1!==null||variable1!==undefined||variable1!==''){letvariable2=variable1;}简写：constvariable2=variable1||'新的';你不相信这行得通吗？然后自己测试一下（将下面的代码复制粘贴到es6console中：letvariable1;letvariable2=variable1||'';console.log(variable2==='');//printstruevariable1='foo';variable2=variable1||'';console.log(variable2);//printsfoo3.变量声明简写在函数中声明变量时，如果需要同时声明多个变量，这种简写可以节省很多时间和金钱空格.常规写法:letx;lety;letz=3;简写:letx,y,z=3;用if判断变量是否为真时，赋值运算符有时可以省略。常规写法：if(likeJavaScript===true)简写：if(likeJavaScript)注意：这两个例子并不完全相等，只要likeJavaScript变量为真值，则表达式成立。再举一个例子，如果“a”不等于为true，如下：常规写法：leta;if(a!==true){//dosomething...}简写方法：leta;if(!a){//dosomething...}5.JavaScript循环简写如果你只想运行原生JavaScript，不想依赖JQuery或lodash等外部库，那么这个小技巧将非常有用。常规写法：for(leti=0;iconsole.log('Hello',name);setTimeout(()=>console.log('Loaded'),2000);list.forEach(item=>console.log(item));这里要注意，this的值在箭头函数和正则函数中是完全不同的，所以这两个例子并不是严格等价的。有关更多详细信息，请参阅这篇关于箭头函数语法的文章。10.隐式return简写我们经常使用return关键字来返回函数的结果。只有一个表达式的箭头函数隐式返回函数结果（函数必须省略花括号({})以省略return关键字）。如果要返回多行表达式（比如对象字面量），需要用()而不是{}包裹函数体。这确保代码作为单个表达式被评估和返回。常规写法：functioncalcCircumference(diameter){returnMath.PI*diameter}简写：calcCircumference=diameter=>(Math.PI*diameter;)11.默认参数值可以使用if表达式定义默认值功能参数。在ES6中，可以直接在函数声明中定义默认值。常规写法：functionvolume(l,w,h){if(w===undefined)w=3;如果（h===未定义）h=4；returnl*w*h;}shorthand:volume=(l,w=3,h=4)=>(l*w*h);volume(2)//output:2412.Templateliteral你用腻了吗'+'将多个变量连接成一个字符串？没有更简单的方法吗？如果你可以使用ES6，那么恭喜你，你所要做的就是使用反引号和${}来包装你的变量。常规写法：constwelcome='Youhaveloggedinas'+first+''+last+'.'constdb='http://'+主机+':'+端口+'/'+数据库；简写：constwelcome=你已经以${first}${last}登录；constdb=http://${host}:${port}/${database};13.解构赋值速记如果你正在使用任何流行的网络框架，你很可能会使用数组或对象文字形式的数据在组件和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;constentity=this.props.entity;简写：从'mobx'导入{observable,action,runInAction}；const{store,form,loading,errors,entity}=this.props;您甚至可以重新分配变量名称：const{store,form,loading,errors,entity:contact}=this.props;14、多行字符串速记如果你的代码中需要写一个多行字符串，你可能会这样写：常规写法：constlorem='Loremipsumdolorsitamet,consectetur\n\t'+'adipisicingelit'，但做eiusmodtemporincididunt\n\t'+'分娩和疼痛大大减轻。Utenimadminim\n\t'+'对不起，我要努力锻炼并努力工作\n\t'+'我要做一些让自己舒服的事。你可以\n\t'+'谴责淫荡行为中的痛苦。\n\t'但有一个更简单的方法：使用反引号。简写：constlorem=constlorem=Loremipsumpainsitamet,consecteturadipisicingelite,butdoeiusmodtemporincididuntoutlaborandpainmagnaaliqua.Utenimadminimveniam,quisnostrudexerciseullamcolaborisnisialiquitgowithureasepaininreprehenderitinvoluptatevelitesse.展开运算符简写展开运算符是在ES6中引入的，它的多种应用场景让JavaScript代码使用起来更加高效和有趣。它可以用来代替某些数组函数。展开运算符写起来很简单，就三个点。常规写法：//连接数组constodd=[1,3,5];常量数=[2,4,连接（奇数）；//克隆数组constarr=[1,2,3,4];constarr2=arr.slice()shorthand://连接数组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}16.强制参数简写如果没有传递任何值，JavaScript会默认将函数参数设置为undefined。其他一些编程语言会抛出警告或错误。要强制分配给参数，可以使用if表达式在参数未定义时抛出错误，或者可以使用“forceparametershorthand”。常规写法：functionfoo(bar){if(bar===undefined){thrownewError('Missingparameter!');}returnbar;}简写：mandatory=()=>{thrownewError('Missingparameter!');}foo=(bar=mandatory())=>{returnbar;}17.Array.findShorthand如果你曾经用原生JavaScript编写过查找函数，您可能使用过for循环。在ES6中，您可以使用数组的新方法find()。常规写法：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'}18.Object[key]简写你知道Foo.bar可以写成Foo['bar']。起初，似乎没有理由这样写。但是这种写法可以让你写出可重用的代码。考虑验证函数的下一个简单示例：functionvalidate(values){if(!values.first)returnfalse;如果（！values.last）返回false；returntrue;}console.log(validate({first:'Bruce',last:'Wayne'}));//true这个函数完美的实现了需要的功能。但是，考虑一个场景：你有很多表单需要验证，不同的域有不同的验证规则。创建一个在运行时配置的通用验证函数不是更好吗？简写：//对象验证规则constschema={first:{required:true},last:{required:true}}//通用验证函数constvalidate=(schema,values)=>{for(fieldinschema){if(schema[field].required){if(!values[field]){returnfalse;}}}returntrue;}console.log(validate(schema,{first:'Bruce'}));//假控制台。日志（验证（架构，{first：'Bruce'，last：'Wayne'}））;//true现在创建了一个可以在所有表??单中重复使用的验证函数，而无需为每个表单验证函数编写一个特定的验证函数。19.双位取反运算符简写按位运算符是你刚开始学习JavaScript时学到的一个特性，但如果你不处理二进制，你基本上不会用到它。但是，双按位运算符有一个非常有用的用例：它们可以用来代替Math.floor。双位取反运算符的优点是执行相同的运算速度更快。您可以在此处阅读有关按位运算符的更多信息。常规写法：Math.floor(4.9)===4//true简写：~~4.9===4//true20。还有其他提示吗？我确实喜欢这些小技巧，并且很想发现更多。有什么想说的，就留言吧！译者：myvin链接：http://www.zcfy.cc/article/3519原文：https://www.sitepoint.com/shorthand-javascript-techniques/原文地址：https://www.sitepoint.com/sho...众诚翻译http://www.zcfy.cc/article/19...
