JS运算符备忘

JS 运算符

JavaScript

发布日期: 2023-11-17

更新日期: 2023-11-17

文章字数: 561

阅读时长: 2 分

阅读次数:

链判断运算符 `?.`

读取对象内部的某个属性时，判断上层对象是否存在

// 读取message data.result.state.message

// 正常写法
const message = ( data && data.result && data.result.state && data.result.state.message ) || ""

// 链判断运算符写法
const message = data?.result?.state?.message || ""

三元运算符?:也常用于判断对象是否存在

// state.code

const code = state ? state.code : ""

?.运算符常见形式

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()

Null 判断运算符 `||`、`??`

如果某个属性的值是null或undefined，有时候需要为它们指定默认值

常见做法是通过||运算符指定默认值，但是属性的值如果为空字符串或false或0，默认值也会生效，如下

const value = data.value || "123"
// 当data.value等于null、undefine、false、0或空值的时候value的值都是'123'
// 这样会导致无法判断false、0或者空值

通过??运算符，只有值为null或undefined时，才会返回右侧的值

const value = data.value ?? "123"
// 当data.value等于null、undefine的时候value的值才是'123'

逻辑赋值运算符 `||=`、`&&=`、`??=`

// 或赋值运算符
x ||= y
// 等同于
x || (x = y)

// 与赋值运算符
x &&= y
// 等同于
x && (x = y)

// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)

写法对比

// 老的写法
user.id = user.id || 1;

// 新的写法
user.id ||= 1;

示例

// ||=  值为 null、undefined、false、0或空时取默认值
let user = {
  id: 0
}
user.id ||= 1
console.log(user.id) // 1

let user = {
  id: 9
}
user.id ||= 1
console.log(user.id) // 9

// &&= 与上面相反，值不为 null、undefined、false、0或空时取默认值
let user = {
  id: 0
}
user.id &&= 1
console.log(user.id) // 0

let user = {
  id: 9
}
user.id &&= 1
console.log(user.id) // 1

// ??=  ,值为 null undefined 时取默认值
let user = {
  id: 0
}
user.id ??= 1
console.log(user.id) // 0

let user = {
  id: 9
}
user.id ??= 1
console.log(user.id) // 9

let user = {
  id: null
}
user.id ??= 1
console.log(user.id) // 1