共计 1660 个字符,预计需要花费 5 分钟才能阅读完成。
语言的一些高级特性的使用可以帮助我们更好去实现一些复杂的功能,以尽量简短的语句来使代码看上去更简洁、逻辑更完善,而且这样减少了出现 bug 的风险。接下来让我总结一些 JavaScript 中的一些简写小技巧。
1. 声明多个变量
2. 为多个变量赋值
我们可以使用数组解构赋值,仅用一行代码实现为多个变量赋值。
3. 恰当使用三元运算符
我们可以在这里用三元运算符(也称条件运算符)节省 5 行代码。
4. 指定默认值
我们可以使用「OR (||) 短路求值 (opens new window)」的逻辑,来给定一个默认值。当 ||
我们的期望值是一个「false (opens new window)」值的时候,整个表达式的值便会取到我们给定的默认值。
5. AND(&&) 短路求值
如果你只在一个变量为真的情况下才调用某个函数,那么你可以用「AND(&&) 短路求值」的逻辑来代替。
当你想有条件地渲染某个组件时,可以尝试使用 AND(&&) 这种简写方式。例如下面这个例子
6. 交换两个变量的值
当我们想交换两个变量的值时,经常会采取引入第三个变量的方法。其实我们可以通过数组解构赋值轻松地交换两个变量。
7. 善用箭头函数
8. 模板字符串
我们通常使用 +
运算符来连接字符串和其他类型的变量。有了 ES6 模板字符串,我们可以用更简单的方式来组合字符串。
9. 多行字符串
对于多行字符串,我们通常使用 + 操作符和一个新的换行符 (n)
拼接实现。其实我们可以通过使用反引号 (')
来更简单地实现。
10. 多条件检查
对于多值匹配,我们可以把所有的值放在数组中,使用数组提供的 indexOf()
或 includes()
方法来简写。
11. 对象属性分配
如果变量名和对象的属性名相同,那么我们可以在对象的中只写变量名,而不用同时写出属性名和属性值(变量的值)。JavaScript 会自动将属性名设置为与变量名相同,并将属性值分配为变量值。
12. 字符串(String)转为数字(Number)
有一些内置方法,如 parseInt
和 parseFloat
,可以将字符串转换为数字。我们也可以通过简单地在字符串值前面提供一个一元运算符 + 来实现。
13. 多次重复一个字符串
要将一个字符串重复指定的次数,你可以使用 for
循环。但使用 repeat()
方法,我们可以在一行中完成。
14. 幂的力量
我们可以使用 Math.pow()
方法来求一个数字的幂。有一个更简洁的语法,那就是双星号 (**)
。
15. 双 NOT 位运算符(~~)?
双 NOT 位运算符 (~~)
是 Math.floor()
方法的替代品。
提醒:双 NOT 位运算符方法只适用于 32 位整数,即 (2^31) -1=2147483647。所以对于任何大于 2147483647 的数字,位运算符
(~~)
会给出错误的结果,所以建议在这种情况下使用Math.floor()
。
16. 找出数组中的最大最小值
我们可以使用 for
循环来遍历数组,找到最大值或最小值。也可以使用 Array.reduce()
方法来寻找数组中的最大和最小值。
但是使用展开操作符 (...)
我们可以,我们可以用一行代码就实现这个需求。
17. 关于 For 循环
要遍历一个数组,我们通常使用传统的 for
循环。我们可以利用 for...of
的方式来遍历一个数组。如果要访问数组每个值的索引,我们可以使用 for...in
循环。
我们还可以使用 for...in
循环来遍历对象的属性。
18. 合并数组
19. 多层次对象的深拷贝
要对一个多层次的对象实现深拷贝,我们可以遍历其每个属性,检查当前属性是否包含一个对象。如果是,则递归调用同一个函数,并将当前属性值(即嵌套对象)作为函数的参数传递进去。
如果我们的对象不包含 函数
、undefined
、NaN
或 Date
等值,我们也可以使用 JSON.stringify()
和 JSON.parse()
来实现。
如果我们的对象是单层对象,即没有嵌套对象,那么我们也可以使用展开操作符 (...)
进行深拷贝。