代码精炼是每个有追求的程序所向往的,本文总结了JavaScript的简写技术,其中包括三元操作符、短路求值简写方式、声明变量简写方法等等,希望对你有帮助。
1.三元操作符
当想写if...else语句时,使用三元操作符来代替。
![图片1.1](https://image.evget.com//Content/files/2018/1/22/7429063d42834d25a7387599fb07979e636522158689146273.jpg)
简写:
![图片1.2](https://image.evget.com//Content/files/2018/1/22/6ce758fb64d14acc8a6b6a161ef3ba3c636522158805381205.jpg)
也可以嵌套if语句:
![图片1.3](https://image.evget.com//Content/files/2018/1/22/20255d4bd5704524bdcd7d371a2ddb33636522158936460457.jpg)
2.短路求值简写方式
当给一个变量分配另一个值时,想确定源始值不是null,undefined或空值。可以写撰写一个多重条件的if语句。
![图片2.1](https://image.evget.com//Content/files/2018/1/22/72d906f0b5484b14adac7d3dd74362e6636522159081641813.jpg)
或者可以使用短路求值方法:
![图片2.2](https://image.evget.com//Content/files/2018/1/22/528dad168f1845e5a57fc998571d4192636522159286005129.jpg)
3.声明变量简写方法
![图片3.1](https://image.evget.com//Content/files/2018/1/22/e4e3b14a249c43638d6c08e1e674ed2e636522159438716071.jpg)
简写:
![图片3.2](https://image.evget.com//Content/files/2018/1/22/0fd27bc3312044d8a80942b3d93f3ada636522159583838831.jpg)
4.if存在条件简写方法
![图片4.1](https://image.evget.com//Content/files/2018/1/22/9ff13f9c4979489fbb722451c836a2d7636522159751286667.jpg)
简写:
![图片4.2](https://image.evget.com//Content/files/2018/1/22/a5e98a3ed17847c7839b33b85ccf1820636522159865392611.jpg)
只有likeJavaScript是真值时,二者语句才相等,如果判断值不是真值,则可以这样:
![图片4.3](https://image.evget.com//Content/files/2018/1/22/c76b2d08eafb4c008b070ac66382749d636522159983141273.jpg)
简写:
![图片4.4](https://image.evget.com//Content/files/2018/1/22/cbfaa18ae2704910b80bb7b10b2aefa8636522160123058755.jpg)
5.JavaScript循环简写方法
![图片5.1](https://image.evget.com//Content/files/2018/1/22/9ef5a20743774bde8f5b1df435c79217636522160255563843.jpg)
简写:
![图片5.2](https://image.evget.com//Content/files/2018/1/22/7ea7de1d60b54401aa4d481d4d3ecc7e636522160380031513.jpg)
也可以使用Array.forEach:
![图片5.3](https://image.evget.com//Content/files/2018/1/22/2d5aae760e754cc788f02371e505f8e1636522160533211223.jpg)
6.短路评价
给一个变量分配的值是通过判断其值是否为null或undefined,则可以:
![图片6.1](https://image.evget.com//Content/files/2018/1/22/28d90e8736164ba78b7f044fd480420b636522160660794247.jpg)
简写:
![图片6.2](https://image.evget.com//Content/files/2018/1/22/c9f6c1074d8b4eee9c57bfea00b658a1636522160810018727.jpg)
7.十进制指数
当需要写数字带有很多零时(如10000000),可以采用指数(1e7)来代替这个数字:
![图片7.1](https://image.evget.com//Content/files/2018/1/22/5183e51a941f4437a334385140f60ba0636522160973872675.jpg)
简写:
![图片7.2](https://image.evget.com//Content/files/2018/1/22/bc63cd61f9824277bd85387e85a56f14636522161107100447.jpg)
8.对象属性简写
如果属性名与key名相同,则可以采用ES6的方法:
![图片8.1](https://image.evget.com//Content/files/2018/1/22/5268840c039347e39cb854c2bf0ed80e636522161239078171.jpg)
简写:
![图片8.2](https://image.evget.com//Content/files/2018/1/22/aced339c7fa54548b8b168bd9a59df47636522161374640017.jpg)
9.箭头函数简写
传统函数编写方法很容易让人理解和编写,但是当嵌套在另一个函数中,则这些优势就荡然无存。
![图片9.1](https://image.evget.com//Content/files/2018/1/22/428eafcc2ad64c03b1f4c27d818ffb07636522161517497065.jpg)
简写:
![图片9.2](https://image.evget.com//Content/files/2018/1/22/3f173f16a25d49b08f9e1e6fd3cea079636522161632442885.jpg)
10.隐式返回值简写
经常使用return语句来返回函数最终结果,一个单独语句的箭头函数能隐式返回其值(函数必须省略{}为了省略return关键字)为返回多行语句(例如对象字面表达式),则需要使用()包围函数体。
![图片10.1](https://image.evget.com//Content/files/2018/1/22/4f414d6c1a8e47a5b47aed4c5220bc43636522162003765737.jpg)
简写:
![图片10.2](https://image.evget.com//Content/files/2018/1/22/2bb2d8cbe47b47269d1061841aeb4039636522162116289589.jpg)