js简写提升效率

水深无声 2024-04-01 17:36 189阅读 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

发表评论

表情:
评论列表 (有 0 条评论,189人围观)

还没有评论,来说两句吧...

相关阅读

    相关 如何提升工作效率

    要想提升效率,我觉得首先得解决以下四个问题,那就是「沟通、持续学习、情绪管理、学会拒绝」。 1.沟通 我们先来看看沟通的定义:沟通是不同的行为主体,通过各种载体实现信息的双