乐趣区

关于前端:JS-中的-操作符

一、三目运算 ?

// if 逻辑判断
if (x > y) {

z = 100

} else {

z = 200

}

// 三目运算简化 if
z = x > y ? 100 : 200
这个没什么好讲的,非常常见,如果这都没把握,赶快去补补吧~

二、可选链操作符 ?.

let demo = {name: ‘ 前端小玖 ’, age: 20}
console.log(‘ 昵称 ’, demo.nickName.toString())
执行下面的代码,你会失去以下谬误:

谬误音讯
因为 demo 对象上不存在 nickName 属性,所以当读取 demo.nickName 时,你失去的将会是 undefined,而 undefined 是没有 toString() 办法的,所以就报错了。

也就是说,当你要拜访某个对象的属性或者调用某个对象上的办法时,如果这个对象的值为 undefined 或者 null,那么语句执行就会报错,举例如下:

// 报错:null 是不存在 push 办法的
let arr = null
arr.push(1)

// 报错:obj 中不存在 c 属性,所以 obj.c 的值为 undefined,
// 那么再拜访 c (undefined) 中的 d 属性是行不通的
let obj = {a: 1, b: 2}
console.log(obj.c.d)
以往咱们的解决方案是加一层判断,确保拜访的对象不为 undefined 或者 null,咱们才做后续操作,具体代码如下:

let demo = {name: ‘ 前端小玖 ’, age: 20}

// 确保 demo.nickName 不为 null / undefined
// 咱们才调用 nickName.toString() 办法
if (demo.nickName) {

console.log('昵称', demo.nickName.toString())

}
下面的代码尽管解决了问题,然而写起来太繁琐,不够优雅,所以新版 JS 减少了可选链操作符来简化这一过程。下面的代码用可选链操作符简化如下

let demo = {name: ‘ 前端小玖 ’, age: 20}
console.log(‘ 昵称 ’, demo.nickName?.toString())
所以 ?. 可选链操作符的作用就是,如果 demo 对象的 nickName 属性值不为 null 或 undefined 则调用其 toString() 办法,如果不存在则不调用,实际效果与下面的 if 判断是等价的。

可选链操作符在深层嵌套时,劣势就更显著了,简便的不是一点半点,举个例子,看如下代码:

let demo = {

setp1: {
    name: '步骤一',
    step2: {name: '步骤二'}
}

}

// 如果咱们想拜访【步骤二】的 name 属性,即
demo.step1.step2.name

// 咱们为了确保安全性,过来咱们可能要写如下代码
if (demo && demo.step1 && demo.step1.step2 && demo.step1.step2.name) {

demo.step1.step2.name.toString()

}

// 用可选链的话
demo?.step1?.step2?.name?.toString()

三、空值合并操作符 ??

这是一个逻辑操作符,与 || 操作符十分相似,然而它们并不是等价的,具体的区别如下

let a = 0
let b = ”
let c = null
let d = undefined

let x = a ?? 100 // x 等于 0
let y = b ?? 100 // y 等于 ”
let z = c ?? 100 // z 等于 100
let k = d ?? 100 // k 等于 100

let o = a || 100 // o 等于 100
let p = b || 100 // p 等于 100
let q = c || 100 // q 等于 100
let r = d || 100 // r 等于 100
?? 只有当操作符左侧表达式的值为 undefined 或者 null 时,才会返回右侧的值。

|| 只有操作符左侧表达式的值为 false 时,那么就会返回右侧的值。左侧的表达式会主动做布尔运算,因为 0 和 空字符串 ” 做布尔运算,其值为 false,所以 o 和 p 的值等于 100。

通过下面的比拟能够发现,?? 操作符的呈现,是为了更精确的做空值判断,只有 null 和 undefined 才会被断定为空值,0 和 ” 不会被断定为空值。

四、空值赋值操作符 ??=

只有当 ??= 左侧的值为 null 或者 undefined 的时候,才会将右侧变量的值赋值给左侧变量,其余所有值都不会进行赋值,在某些场景下能够省略很多代码。

let a = null
let b = undefined
let c = 100
let d = 200

// 因为 a 的值为 null,所以会将 c 的值赋值给 a , 所以最终 a = 100
a ??= c

// 因为 b 的值为 undefined,所以会将 d 的值赋值给 b , 所以最终 b = 200
b ??= d

退出移动版