19个JS超有用的简写技巧
1.三元操作符 当想写if...else语句时，使用三元操作符来代替。 constx=20;letanswer;if(x>10){answer='isgreater';}else{answer='islesser';} 简写： const answer = x > 10 ? 'is greater' : 'is lesser'; 也可以嵌套if语句：const big = x > 10 ? " greater 10" : x 2.短路求值简写方式 当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。 if(variable1!==null||variable1!==undefined||variable1!==''){letvariable2=variable1;} 或者可以使用短路求值方法：const variable2 = variable1 || 'new'; 3.声明变量简写方法 letx;lety;letz=3; 简写方法：let x, y, z=3; 4.if存在条件简写方法 if (likeJavaScript === true) 简写： if (likeJavaScript) 只有likeJavaScript是真值时，二者语句才相等 如果判断值不是真值，则可以这样： leta;if(a!==true){//dosomething...} 简写： leta;if(!a){//dosomething...} 5.JavaScript循环简写方法 for (let i = 0; i < allImgs.length; i++) 简写：for (let index in allImgs)也可以使用Array.forEach： functionlogArrayElements(element,index,array){console.log("a["+index+"]="+element);}[2,5,9].forEach(logArrayElements);//logs://a[0]=2//a[1]=5//a[2]=9 6.短路评价 给一个变量分配的值是通过判断其值是否为null或undefined，则可以： letdbHost;if(process.env.DB_HOST){dbHost=process.env.DB_HOST;}else{dbHost='localhost';} 简写：const dbHost = process.env.DB_HOST || 'localhost'; 7.十进制指数 当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：for (let i = 0; i < 10000; i++) {}简写： for(leti=0;i<1e7;i++){}//下面都是返回true1e0===1;1e1===10;1e2===100;1e3===1000;1e4===10000;1e5===100000; 8.对象属性简写 如果属性名与key名相同，则可以采用ES6的方法：const obj = { x:x, y:y }; 简写： const obj = { x, y }; 9.箭头函数简写 传统函数编写方法很容易让人理解和编写，但是当嵌套在另一个函数中，则这些优势就荡然无存。 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关键字） 为返回多行语句（例如对象字面表达式），则需要使用()包围函数体。 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;returnl*w*h;} 简写： volume=(l,w=3,h=4)=>(l*w*h);volume(2)//output:24 12.模板字符串 传统的JavaScript语言，输出模板通常是这样写的。 constwelcome='Youhaveloggedinas'+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;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;//最后一个变量名为contact 14.多行字符串简写 需要输出多行字符串，需要使用+来拼接： constlorem='Loremipsumdolorsitamet,consectetur\n\t'+'adipisicingelit,seddoeiusmodtemporincididunt\n\t'+'utlaboreetdoloremagnaaliqua.Utenimadminim\n\t'+'veniam,quisnostrudexercitationullamcolaboris\n\t'+'nisiutaliquipexeacommodoconsequat.Duisaute\n\t'+'iruredolorinreprehenderitinvoluptatevelitesse.\n\t' 使用反引号，则可以达到简写作用： constlorem=`Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitesse.` 15.扩展运算符简写 扩展运算符有几种用例让JavaScript代码更加有效使用，可以用来代替某个数组函数。 //joiningarraysconstodd=[1,3,5];constnums=[2,4,6].concat(odd);//cloningarraysconstarr=[1,2,3,4];constarr2=arr.slice() 简写： //joiningarraysconstodd=[1,3,5];constnums=[2,4,6,...odd];console.log(nums);//[2,4,6,1,3,5]//cloningarraysconstarr=[1,2,3,4];constarr2=[...arr]; 不像concat()函数，可以使用扩展运算符来在一个数组中任意处插入另一个数组。 constodd=[1,3,5];constnums=[2,...odd,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.强制参数简写 JavaScript中如果没有向函数参数传递值，则参数为undefined。为了增强参数赋值，可以使用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<pets.length;++i){if(pets[i].type==='Dog'&&pets[i].name===name){returnpets[i];}}} 简写： pet=pets.find(pet=>pet.type==='Dog'&&pet.name==='Tommy');console.log(pet);//{type:'Dog',name:'Tommy'} 18.Object[key]简写 考虑一个验证函数 functionvalidate(values){if(!values.first)returnfalse;if(!values.last)returnfalse;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'}));//falseconsole.log(validate(schema,{first:'Bruce',last:'Wayne'}));//true 现在可以有适用于各种情况的验证函数，不需要为了每个而编写自定义验证函数了 19.双重非位运算简写 有一个有效用例用于双重非运算操作符。可以用来代替Math.floor()，其优势在于运行更快，可以阅读此文章了解更多位运算。 Math.floor(4.9) === 4 //true 简写：~~4.9 === 4 //true 本文分享自微信公众号 - JavaScript忍者秘籍（js-obok）。如有侵权，请联系 support@oschina.cn 删除。本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
