前端js用法：val ?? 0 和 val || 0

在JavaScript中，val ?? 0 是**空值合并运算符（Nullish Coalescing Operator）**的用法。

具体含义

javascript

val ?? 0

• 如果 val 是 null 或 undefined，返回 0

• 如果 val 是其他任何值（包括 0、false、'' 空字符串），返回 val 本身

与 || 运算符的区别

javascript

let val = 0

val ?? 10  // 返回 0（val 不是 null/undefined）
val || 10  // 返回 10（val 是假值 false）

javascript

let val = ''

val ?? 'default'  // 返回 ''（空字符串）
val || 'default'  // 返回 'default'（空字符串是假值）

其他类似用法

1. 可选链运算符（Optional Chaining）

javascript

// 安全访问嵌套属性
const name = user?.profile?.name ?? '匿名'

// 安全调用函数
const result = obj.method?.() ?? 'default'

// 数组安全访问
const item = arr?.[0] ?? '无数据'

2. 逻辑或运算符（Logical OR）

javascript

// 适用于任何假值的情况
const value = val || 0  // val为假值（false、0、''、null、undefined）时返回0

3. 三元运算符

javascript

// 更灵活的条件判断
const result = val != null ? val : 0
const result = val !== undefined && val !== null ? val : 0

4. 默认参数（函数参数）

javascript

function calculate(amount = 0) {
  return amount * 1.1
}

5. 解构赋值默认值

javascript

const { price = 0, quantity = 1 } = item
const total = price * quantity

6. 结合使用示例

javascript

// 组合使用：安全访问 + 默认值
const price = product?.pricing?.discountPrice ?? product?.pricing?.originalPrice ?? 0

// 函数默认返回值
const getUserName = (user) => user?.name ?? '游客'

// 表单数据处理
const formData = {
  quantity: inputQuantity ?? 1,
  price: parseFloat(inputPrice) || 0,
  notes: inputNotes || '',
  discount: discount ?? 0
}

浏览器兼容性

• ?? 运算符：ES2020+，现代浏览器都支持

• ?. 运算符：ES2020+，现代浏览器都支持

• 如果需要兼容旧浏览器，可以使用 Babel 转译

实用建议

javascript

// 推荐使用 ?? 的场景：
// 1. 需要区分 0/false/'' 和 null/undefined 时
const count = receivedCount ?? 0  // 0 是有效值

// 推荐使用 || 的场景：
// 1. 所有假值都应该使用默认值时
const displayName = username || '匿名用户'  // 空字符串也显示默认名

// 2. 布尔值判断
const isEnabled = featureFlag || false

这两个运算符是现代JavaScript开发中非常有用的工具，可以大大简化空值检查和默认值设置的代码。

分析示例

其中，

// 组合使用：安全访问 + 默认值

const price = product?.pricing?.discountPrice ?? product?.pricing?.originalPrice ?? 0

这段代码是JavaScript/TypeScript中的可选链操作符（?.）和空值合并操作符（??）的组合使用。让我为你详细解释：

分解代码：

javascript

const price = 
  product?.pricing?.discountPrice ??  // 第一选择：折扣价
  product?.pricing?.originalPrice ??  // 第二选择：原价
  0;                                 // 默认值：0

逐步解释：

1. 可选链操作符 ?.

• product?.pricing：如果 product 存在，则访问 product.pricing；如果 product 是 null 或 undefined，则返回 undefined

• product?.pricing?.discountPrice：如果 product 和 product.pricing 都存在，则访问 discountPrice

2. 空值合并操作符 ??

• a ?? b：如果 a 不是 null 也不是 undefined，则返回 a；否则返回 b

执行逻辑：

代码会按顺序检查以下条件：

1. 优先尝试获取折扣价：

   javascript

   product?.pricing?.discountPrice

   • 如果 product 存在且 pricing 存在且 discountPrice 有值 → 返回 discountPrice

2. 如果折扣价不存在，尝试获取原价：

   javascript

   product?.pricing?.originalPrice

   • 如果 discountPrice 不存在（null/undefined）→ 检查 originalPrice

3. 如果两者都不存在，返回默认值 0：

   • 如果 discountPrice 和 originalPrice 都不存在 → 返回 0

等价于传统写法：

javascript

let price = 0;

if (product && product.pricing) {
  if (product.pricing.discountPrice !== null && 
      product.pricing.discountPrice !== undefined) {
    price = product.pricing.discountPrice;
  } else if (product.pricing.originalPrice !== null && 
             product.pricing.originalPrice !== undefined) {
    price = product.pricing.originalPrice;
  }
}

示例：

javascript

// 示例1：有折扣价
const product1 = {
  pricing: {
    discountPrice: 80,
    originalPrice: 100
  }
};
// price = 80

// 示例2：没有折扣价，但有原价
const product2 = {
  pricing: {
    originalPrice: 100
  }
};
// price = 100

// 示例3：pricing为空
const product3 = {};
// price = 0

// 示例4：product为null
const product4 = null;
// price = 0

关键点：

• 可选链 ?. 防止访问 undefined 或 null 的属性时出错

• 空值合并 ?? 只在左侧为 null 或 undefined 时才使用右侧值

• 代码简洁且安全，避免了复杂的条件判断