- 鄢云峰
- 2023-10-30 10:06:43
- 309
- 0
- YYF
一、 三目运算 ?
// if 逻辑判断
if (x > y) {
z = 100
} else {
z = 200
}
// 三目运算简化 if 判断
z = x > y ? 100 : 200这个没什么好讲的，十分常见，如果这都没掌握，赶快去补补吧~
二、可选链操作符 ?.
let demo = { name: '鄢云峰', age: 33 }
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 等于 1001- ?? 只有当操作符左侧表达式的值为 undefined 或者 null 时，才会返回右侧的值。
2- || 只要操作符左侧表达式的值为 false 时，那么就会返回右侧的值。左侧的表达式会自动做布尔运算，因为 0 和 空字符串 '' 做布尔运算，其值为 false，所以 o 和 p 的值等于 100。
3- 通过上面的比较可以发现，?? 操作符的出现，是为了更准确的做空值判断，只有 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看到这里，你都学费了嘛~！ Fighting ：）