js简写提升效率

水深无声 2024-04-01 17:36 188阅读 0赞

## 1、声明变量 ##

![6ba93c13fd5b8385197653c8eea44877.png][]

2、将多个变量赋值

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

![7fd99255f468dcd5e84d56bcb7fc29f5.png][]

3、三元运算符

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

![47051b6869b2a549f73b3a8d191c3e02.png][]

4、分配默认值

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

![3361ea3781d083918d8da223641c9b42.png][]

5、与(&&)短路运算

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

![c889a3649c31757dc0fb68026c7d4274.png][]

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

![d2cd188ac23a366e44c5cf4b7eae667c.png][]

6、交换两个变量

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

![f26d50f5d845cbb63dcb6fbc604c4601.png][]

7、箭头函数

![089e4fc01879c064e958102122202eb3.png][]

8、模板字符串

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

![74811e2c05c101a8e6b91d6fb43fd743.png][]

9、多行字符串

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

![374c41ccafcd0d0e93a9250aed8e031e.png][]

10、多条件检查

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

![08f3ac60cd32dcd95b40366de6d68436.png][]

11、对象属性复制

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

![8600c1a2adf87b9dbcbc6d9862e3c92d.png][]

12、字符串转变为数字

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

![09e98c527306c1fe19ac1568f2d90cc3.png][]

13、多次重复一个字符串

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

![08d115819cccfafe525fccfdfe1199d3.png][]

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

![a7057a23f598a939f0056b4e53a94589.png][]

14、指数幂

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

![74e704ceb3c81a7325aface968c6b052.png][]

15、双非位运算符（~~）

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

![22ade11a150cb7ebe9830bf9d7056ce1.png][]

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

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

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

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

![255135abe46d63ccc022735b25a4b43f.png][]

17、For循环

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

![9dce9f6cfa4b78e87c79cd8b4e12ce24.png][]

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

18、合并数组

![3f863ba873564df2b2a21656dc9c580d.png][]

19深拷贝多级对象

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

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

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

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

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

20、从字符串中获取字符

![331341b9011f49f9bf92cf7d7e24f56c.png][]

[6ba93c13fd5b8385197653c8eea44877.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8612a5f7b0ee4f4faef23f8c4d3b58f1.png
[7fd99255f468dcd5e84d56bcb7fc29f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7d300caaca1a4d0296f55c3607986dbf.png
[47051b6869b2a549f73b3a8d191c3e02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1fa16e83f75b405f83afcd9badbac42c.png
[3361ea3781d083918d8da223641c9b42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ad6758328d14494da4f6648a1e5e1a57.png
[c889a3649c31757dc0fb68026c7d4274.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/484c9f20c7f74ab4b9440bc87cdc06c8.png
[d2cd188ac23a366e44c5cf4b7eae667c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/379e98e2c4ac4f01b85999869bcde1ad.png
[f26d50f5d845cbb63dcb6fbc604c4601.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4594a540313f44a8abfbc9708aae97a9.png
[089e4fc01879c064e958102122202eb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/223f489fd1584ffc884e0c14983297e0.png
[74811e2c05c101a8e6b91d6fb43fd743.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ad50933c37194db49f5fe82878dc17b0.png
[374c41ccafcd0d0e93a9250aed8e031e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ebd773feec194a979bd3c8a2ae83522d.png
[08f3ac60cd32dcd95b40366de6d68436.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2e338da8035f4cdc955bf96471d58bb8.png
[8600c1a2adf87b9dbcbc6d9862e3c92d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a69ef107994e456dbafa869f208d0d76.png
[09e98c527306c1fe19ac1568f2d90cc3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/381774200f5f45a89af9aaa2f20681a5.png
[08d115819cccfafe525fccfdfe1199d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5eb0e28364cf4f1782cdf1d8ef82f95f.png
[a7057a23f598a939f0056b4e53a94589.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d80b49fec9ac460c9ad18376c1fb1a38.png
[74e704ceb3c81a7325aface968c6b052.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4cf3b18386d4496b80e70bfc9d2ac1c7.png
[22ade11a150cb7ebe9830bf9d7056ce1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/064ddac53a4c40d79adeb6cdcf92b8c4.png
[255135abe46d63ccc022735b25a4b43f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/21ab4b7593c04df88add5735b6affa20.png
[9dce9f6cfa4b78e87c79cd8b4e12ce24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/616edf7339b24787b9f867e1b6888295.png
[3f863ba873564df2b2a21656dc9c580d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a95c839f930f4d47b057f7bb2f18474e.png
[331341b9011f49f9bf92cf7d7e24f56c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bc12b8a9aa384e7e901aa4a13a7e2f55.png