开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第7天
1.ES2020引入"链判断运算符"(?.)
const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value
直接在链式调用的时候判断,左侧的对象是否为null或undefined。如果是,就不在往下运算,而是返回undefined。
链判断运算符三种用法:
obj?.prop // 对象属性
obj?.[expr] // 同上
func?.(…args) // 函数或对象方法的调用
2.Null判断运算符(??)
ES2020引入了一个新的Null判断运算符??。它的行为类似||,但是只有运算符左侧的值为null或undefined时,才会返回右侧的值。
const animationDuration = response.settings?.animationDuration ?? 300;
这个运算符只有一个目的,就是跟链判断运算符?.配合使用,为null或undefined的值设置默认值。
??有一个运算优先级问题,它与&&和||的优先级孰高孰低。现在的规则是,如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错。
// 报错
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs
必须加入表明优先级的括号
(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);
(lhs ?? middle) && rhs;
lhs ?? (middle && rhs);
(lhs || middle) ?? rhs;
lhs || (middle ?? rhs);
(lhs ?? middle) || rhs;
lhs ?? (middle || rhs);
3.数字分隔符
数字分隔符可以在数字之间创建可视化分隔符,通过 _下划线来分割数字,使数字更具可读性,可以放在数字内的任何地方:
const money = 1_000_000_000
//等价于
const money = 1000000000
4.浮点型数据使用注意事项
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定:
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.30000000000000004
if (z == 0.3) // 返回 false
为解决以上问题,可以用整数的乘除法来解决:
实例
var z = (x * 10 + y * 10) / 10; // z 的结果为 0.3
5.return 语句使用注意事项
JavaScript 默认是在代码的最后一行自动结束。
以下实例结果会返回 undefined:
function myFunction(a) {
var
power = 10;
return
a * power;
}
为什么会有这样的结果呢?因为在 JavaScript 中,实例 4 的代码与下面的代码一致:
function myFunction(a) {
var
power = 10;
return; // 分号结束,返回 undefined
a * power;
}
不用对 return 语句进行断行。