译文：20个提升效率的JS简写

桃扇骨 2023-01-03 04:06 149阅读 0赞

![format_png][]

原文:

https://mp.weixin.qq.com/s/pxBtofRaodSVaPwVALHvrQ

对于任何程序语言来说，JS简写都可以帮助你写出更加简练优化的代码，并且还可以让你在少写代码的基础上达成目标。让我们一起对JS简写的小技巧一一进行讨论吧。

声明变量

![format_png 1][]

将多个变量赋值

我们可以通过数组解构来对一行中的多个变量赋值。

![format_png 2][]

三元运算符

通过三元运算符，我们可以在这里节省五行代码。

![format_png 3][]

分配默认值

如果期望值不正确，我们可以使用OR（丨丨）短路运算，为变量分配默认值。

![format_png 4][]

与(&&)短路运算

如果仅在变量为true的情况下调用函数，你就可以使用与(&&)的短路形式作为替代方法。

![format_png 5][]

在react中，当你想要有条件的渲染组件时，与(&&)短路写法更加实用。比如：

![format_png 6][]

交换两个变量

交换两个变量的时候，我们经常会用到第三个变量。我们可以通过结构任务来轻松交换两个变量。

![format_png 7][]

箭头函数

![format_png 8][]

模板字符串

我们通常运用“+”运算符连接字符串变量。通过使用ES6的模板，我们可以用更简单的方法进行处理。

![format_png 9][]

多行字符串

对于多行字符串，我们通常将“+”运算符与（\\n）配合使用。我们可以通过（\`）的方法更加轻松的实现它。

![format_png 10][]

多条件检查

对于多值匹配来说，我们可以把所有的值都放在数组中，并且采用indexOf（）或includes（）的方法。

![format_png 11][]

对象属性复制

如果变量名称和对象属性名相同，那么我们可以在目标文字中仅提到变量名称就可以，而不是两个都提到。JavaScript会自动将关键对象名称设置为变量名称，并将该值分配为变量值。

![format_png 12][]

字符串转变为数字

我们可以通过parseInt和parseFloat的方法将字符串转变为数字，也可以通过一下这种简单的方法——将一元运算符“+”置于字符串值之前。

![format_png 13][]

多次重复一个字符串

想要将一个字符串重复具体的次数，你可以使用for循环。但使用repeat()的方法，我们可以在一行代码之内将它完成。

![format_png 14][]

**注意：**当你想要给某人道歉，发一百次“我错了”的时候，尝试一下使用repeat（）的方法。如果你想要在新的一行里继续你重复的话，只需要在字符串中加入换行符（\\n）即可。

![format_png 15][]

指数幂

我们可以使用Math.pow（）的方法查找数字的幂，但下面这个方法可以让你使用更短的代码——两个(\*\*)即可。

![format_png 16][]

双非位运算符（~~）

双非位运算符（~~）是Math.floor（）方法的缩写。

![format_png 17][]

**补充说明：**（~~）仅适用于32位整数，即（2\*\* 31）-1=2147483647。因此，对于大于2147483647的任何数字，按位运算符（~~）将给出错误的结果，所以在这种情况下建议使用Math.floor（）。

在数组中发现最大值和最小值

我们可以使用for循环在查找数组中的每一个值，并且找到最大值和最小值，也可以通过使用Array.reduce（）的方法来查找最大值和最小值。

但是使用扩展符号，我们可以在一行之内搞定。

![format_png 18][]

For循环

想要遍历数组，我们通常都会使用传统的for循环，可以使用for...of循环来遍历数组。想要访问每个值的索引，我们可以使用for...in循环。

![format_png 19][]

也可以通过for...in循环遍历对象属性。

![format_png 20][]

合并数组

![format_png 21][]

深拷贝多级对象

如果要深拷贝多级对象，我们要遍历每个属性并检查当前属性是否包含对象。如果是，则通过传递当前属性值（即嵌套对象）对同一函数进行递归调用。

如果我们的对象不包括函数，undefined，NaN或Date作为值的话，我们也可以通过使用JSON.stringify()和JSON.parse()的方法执行以上操作。

如果我们有单层对象，也就是不存在嵌套对象，那么我们也可以使用扩展符进行深拷贝。

![format_png 22][]

**补充说明：**如果你的对象属性包括function,undefined或者NaN作为值，那么JSON.parse(JSON.stringify(obj))的简写技巧并不适用。因为当使用JSON.stringify对象时，属性包括function,undefined或者NaN作为值就会从对象中移除。

所以，当你的对象中仅包含字符串和数字时，你可以使用JSON.parse(JSON.stringify(obj))。

从字符串中获取字符

![format_png 23][]

以上一些速记技巧似乎与项目中使用无关，但知道一些额外的技术也不错。祝你编码愉快~

[format_png]: /images/20221119/1ad8a2dadfd94f4db03e93134e439282.png
[format_png 1]: /images/20221119/44cb11e927e44e17b38bee5ecb05654c.png
[format_png 2]: /images/20221119/f5c2c82a5ae54f6d873a1cc01330ce31.png
[format_png 3]: /images/20221119/c1c7d8352ee547f2811a721374c92c3f.png
[format_png 4]: /images/20221119/6e15188d0e1640308a6dc4d44095689d.png
[format_png 5]: /images/20221119/ea152611e7d84f499b47b33ac27b3e1f.png
[format_png 6]: /images/20221119/8b48331e170d4dec8d41d98ee90ad917.png
[format_png 7]: /images/20221119/d15611611a694570a045e2d692c3ea60.png
[format_png 8]: /images/20221119/7bbf316022da4508836b1d704f83adb1.png
[format_png 9]: /images/20221119/bb9a0177d33f4121bd1253b0cdbe373b.png
[format_png 10]: /images/20221119/3f2c9cc1d28044dea9a06d21e3369a2b.png
[format_png 11]: /images/20221119/5fcfac25574c42c2a8861e15b6f7a06c.png
[format_png 12]: /images/20221119/af1cca89501d4b8fa762c9bcda6090da.png
[format_png 13]: /images/20221119/823e07a6221f4202b013954c39d8460b.png
[format_png 14]: /images/20221119/30bc7110704a492db0bb15dad57dab03.png
[format_png 15]: /images/20221119/95307d5ac9f54e9483356e7c1efcfe9e.png
[format_png 16]: /images/20221119/c14bb21005e24ddab2efc74c1dfc7f81.png
[format_png 17]: /images/20221119/3e51cc27c8ee487e9893ea336a698990.png
[format_png 18]: /images/20221119/ba558669904c411bb97b0149758c5f05.png
[format_png 19]: /images/20221119/366efcfe9e414165a6bce0f4d09c10be.png
[format_png 20]: /images/20221119/a88ebf6afcd14ce488f1a3b760625dfe.png
[format_png 21]: /images/20221119/8696cf135f7d415cb635075825e352c3.png
[format_png 22]: /images/20221119/0e8ab38cc703418f895b6952a39a96f5.png
[format_png 23]: /images/20221119/acb636f2e5834cb2948520d9e5323183.png