摘自:阮一峰的ES6,感觉在项目中用处比较大,记录一下。
(1)链判断运算符
- 在我们需要获取多层对象内部的某个属性值时,比如读取 message.body.user.firstName
不安全的写法:
const firstName = message.body.user.firstName
安全的写法:
const firstName = (message
message.body
message.body.user
message.body.user.firstName) || 'default';
- 三元运算符?: 也常用于判断对象是否存在。
const fooInput = myForm.querySelector('input[name=foo]')
const fooValue = fooInput ? fooInput.value : undefined
- 以上的方法可以简写为:
const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value
- 我们还以判断一个对象是否有这一个函数,如果有就执行,没有就返回undefined
var obj = { say(){console.log(1111) }}
obj.say?.() //1111
obj.read?.() //undefined
a?.b
a == null ? undefined : a.b
a?.[x]
a == null ? undefined : a[x]
a?.b()
a == null ? undefined : a.b()
a?.()
a == null ? undefined : a()
a.b?.()
a.b == null ? undefined : a.b()
(2)Null 判断运算符
在读取对象属性的时候,如果属性的值为null和undefined的时候,会指定默认值,但是我们通常是使用 || 来指定默认值得,但是当我们的属性值为 空字符串、false、0的时候,默认值也会生效
为避免这种情况,ES2020引入一个新的Null判断运算符 ?? 行为类似于 || 但是只有运算符左侧的值为null和undefined时,才会返回右侧的值。
??有一个运算优先级问题,它与&&和||的优先级孰高孰低。现在的规则是,如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错。
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs
//以上都会报错