令你眼前一新的JS小知识

80 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 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 语句进行断行。