JS简写技巧，让你写代码速度翻倍（一）

迷南。 2022-06-01 05:47 259阅读 0赞

代码精炼是每个有追求的程序所向往的，本文总结了JavaScript的简写技术，其中包括三元操作符、短路求值简写方式、声明变量简写方法等等，希望对你有帮助。

**1.三元操作符**

当想写if...else语句时，使用三元操作符来代替。

![图片1.1][1.1]

简写：

![图片1.2][1.2]

也可以嵌套if语句：

![图片1.3][1.3]

**2.短路求值简写方式**

当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。

![图片2.1][2.1]

或者可以使用短路求值方法：

![图片2.2][2.2]

3.声明变量简写方法

![图片3.1][3.1]

简写：

![图片3.2][3.2]

**4.if存在条件简写方法**

![图片4.1][4.1]

简写：

![图片4.2][4.2]

只有likeJavaScript是真值时，二者语句才相等，如果判断值不是真值，则可以这样：

![图片4.3][4.3]

简写：

![图片4.4][4.4]

**5.JavaScript循环简写方法**

![图片5.1][5.1]

简写：

![图片5.2][5.2]

也可以使用Array.forEach：

![图片5.3][5.3]

**6.短路评价**

给一个变量分配的值是通过判断其值是否为null或undefined，则可以：

![图片6.1][6.1]

简写：

![图片6.2][6.2]

**7.十进制指数**

当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：

![图片7.1][7.1]

简写：

![图片7.2][7.2]

**8.对象属性简写**

如果属性名与key名相同，则可以采用ES6的方法：

![图片8.1][8.1]

简写：

![图片8.2][8.2]

**9.箭头函数简写**

传统函数编写方法很容易让人理解和编写，但是当嵌套在另一个函数中，则这些优势就荡然无存。

![图片9.1][9.1]

简写：

![图片9.2][9.2]

**10.隐式返回值简写**

经常使用return语句来返回函数最终结果，一个单独语句的箭头函数能隐式返回其值（函数必须省略\{\}为了省略return关键字）为返回多行语句（例如对象字面表达式），则需要使用()包围函数体。

![图片10.1][10.1]

简写：

![图片10.2][10.2]

[1.1]: /images/20220601/56c762ebd20e4b75ad72d9b1af45ff2a.png
[1.2]: /images/20220601/a07880f0426644aeb50d1a5572480c80.png
[1.3]: /images/20220601/88cb0ed8cd3b4fb0a8969e6099a84875.png
[2.1]: /images/20220601/fc1b99cf52624b25a07c777989da0272.png
[2.2]: /images/20220601/8900c3bb6ca14b479905bbd3a5991fbf.png
[3.1]: /images/20220601/7660a09e9a1f4bdf9617d1f303c007ab.png
[3.2]: /images/20220601/b9651a8d13664eafa1777f82a4ff7248.png
[4.1]: /images/20220601/b23e12040da74df1ae5f592e18ec8871.png
[4.2]: /images/20220601/d537d7fc36e94903a8ec1ce5a654f8d6.png
[4.3]: /images/20220601/ec078cf6efcc4d168a16f42ab78d9e2d.png
[4.4]: /images/20220601/969e9494ada549dcb3e364f4d07bdade.png
[5.1]: /images/20220601/9bd0a3904c594e6e8b2764b54311ca2b.png
[5.2]: /images/20220601/067bbc7fe5c64df4ac5ce6dcbef5d9c7.png
[5.3]: /images/20220601/6576705b054a4a22b0d74fbf704c8edc.png
[6.1]: /images/20220601/d14b11719ac747d78313ded2f2d37170.png
[6.2]: /images/20220601/6df9aa78e42a4c2fae159b58adaad5ce.png
[7.1]: /images/20220601/dc2c5a218d574517bef5b6cd258e968c.png
[7.2]: /images/20220601/47fa0468fe574865b75373b38c9ebe6b.png
[8.1]: /images/20220601/419b7a19f82549af89189f3e72726d7e.png
[8.2]: /images/20220601/ffb296a7603e40c1a8e6d4235e9754e3.png
[9.1]: /images/20220601/35dc3a01d5c54770ae92bb4cc56a3883.png
[9.2]: /images/20220601/f20520862c9c4c6db175371dc9ab21e5.png
[10.1]: /images/20220601/0bcc02a13a7a491b92c026e2f8b00ad1.png
[10.2]: /images/20220601/06befef37b504d059a584be6721625fc.png