什么是JS的空值合并操作？-js教程-PHP中文网

空值合并操作符 ?? 在 JavaScript 中用于精确处理默认值，仅当左侧为 null 或 undefined 时返回右侧值，与 || 运算符不同，后者会将 0、''、false 等假值也视为“空”。?? 更适用于 0、false、空字符串为有效值的场景，如配置项、用户输入等，能避免 || 带来的意外覆盖。使用时需注意：?? 不能与 && 或 || 混合使用而无括号，否则会报语法错误，必须通过括号明确优先级。该操作符自 ES2020 引入，现代浏览器支持良好，旧环境可通过 Babel 转译确保兼容。

什么是js的空值合并操作？

JavaScript中的空值合并操作符

??

登录后复制

，在我看来，是一个相当优雅且实用的语法糖，它提供了一种更精确的方式来处理默认值。简单来说，它只会在左侧表达式为

null

登录后复制

或

undefined

登录后复制

时，才使用右侧的默认值。这和我们过去习惯的

||

登录后复制

运算符有着本质的区别，让代码在很多场景下变得更加清晰和可靠。

解决方案

空值合并操作符

??

登录后复制

（Nullish Coalescing Operator）是ES2020引入的一个新特性，它的核心功能是当左侧的操作数为

null

登录后复制

或

undefined

登录后复制

时，返回右侧的操作数；否则，返回左侧的操作数。这和逻辑或操作符

||

登录后复制

有着关键的不同。

举个例子，假设我们有一个配置对象，其中某个属性可能未定义，或者明确设置为

null

登录后复制

。我们希望为它提供一个默认值。

// 传统方式，使用 ||
const configA = { timeout: 0 };
const timeoutA = configA.timeout || 3000; // timeoutA 会变成 3000，因为 0 是一个 falsy 值

const configB = { timeout: null };
const timeoutB = configB.timeout || 3000; // timeoutB 会变成 3000

const configC = {};
const timeoutC = configC.timeout || 3000; // timeoutC 会变成 3000

console.log(timeoutA); // 3000
console.log(timeoutB); // 3000
console.log(timeoutC); // 3000

// 使用 ??
const configD = { timeout: 0 };
const timeoutD = configD.timeout ?? 3000; // timeoutD 依然是 0，因为 0 既不是 null 也不是 undefined

const configE = { timeout: null };
const timeoutE = configE.timeout ?? 3000; // timeoutE 会变成 3000

const configF = {};
const timeoutF = configF.timeout ?? 3000; // timeoutF 会变成 3000，因为 configF.timeout 是 undefined

console.log(timeoutD); // 0
console.log(timeoutE); // 3000
console.log(timeoutF); // 3000

登录后复制

从上面的例子可以看出，

??

登录后复制

运算符在处理

登录后复制

、

''

登录后复制

（空字符串）或

false

登录后复制

这些在

||

登录后复制

运算符看来是“假值”但实际上可能是有效值的情况下，表现出了它的独特优势。它只关心是不是

null

登录后复制

或

undefined

登录后复制

，这使得我们在为变量设置默认值时，能够更加精确地表达意图。

??

登录后复制

和

||

登录后复制

运算符有什么本质区别？

这真的是一个非常值得深挖的问题，因为这两个运算符看起来相似，但在实际应用中，它们对“空”的定义完全不同。我个人觉得，理解这个区别是掌握

??

登录后复制

关键。

||

登录后复制

逻辑或运算符，它会检查左侧操作数是否为“假值”（falsy value）。在 JavaScript 中，假值包括：

false

登录后复制

、

登录后复制

、

''

登录后复制

（空字符串）、

null

登录后复制

、

undefined

登录后复制

和

NaN

登录后复制

。只要左侧是这些值中的任何一个，

||

登录后复制

就会返回右侧的操作数。这在很多场景下非常方便，比如快速为变量提供一个“非空”的默认值。

但是，问题也随之而来。设想一下，如果

登录后复制

、

''

登录后复制

或

false

登录后复制

本身就是你想要保留的有效值呢？比如，一个用户配置项

timeout

登录后复制

设置为

登录后复制

，意味着“永不超时”；一个

userName

登录后复制

设置为空字符串

''

登录后复制

，意味着“匿名”；或者一个

isAdmin

登录后复制

布尔值设置为

false

登录后复制

，表示“不是管理员”。在这些情况下，如果使用

||

登录后复制

来提供默认值，那么

登录后复制

、

''

登录后复制

和

false

登录后复制

都会被误认为是“无效”或“空”，从而被默认值替代，这显然不是我们想要的。

而

??

登录后复制

空值合并操作符，它对“空”的定义要严格得多。它只关心左侧操作数是否是

null

登录后复制

或

undefined

登录后复制

。只有当左侧是这两者之一时，它才会返回右侧的操作数。这意味着，像

登录后复制

、

''

登录后复制

、

false

登录后复制

甚至是

NaN

登录后复制

，在

??

登录后复制

看来，它们都是“有值”的，都会被保留下来。这种精确性，在我看来，大大提升了代码的语义表达能力，减少了潜在的bug。

所以，本质区别在于：

```
||
```
登录后复制
关心的是“假值”（falsy values）。
```
??
```
登录后复制
关心的是“空值”（nullish values），即
```
null
```
登录后复制
和
```
undefined
```
登录后复制
。

理解这个差异，你就知道什么时候该用哪个了。

在实际开发中，何时应该优先选择

??

登录后复制

而不是

||

登录后复制

？

在实际开发中，我发现

??

登录后复制

运算符的引入，让很多过去需要额外判断才能写清楚的逻辑，变得简洁明了。我通常会在以下几种情况中优先选择

??

登录后复制

：

当

登录后复制

、
false
登录后复制
或
''
登录后复制
（空字符串）是有效且有意义的值时：这是

??

登录后复制

最经典的用武之地。

数值配置： 比如一个API请求的超时时间

timeout

登录后复制

，如果设置为

登录后复制

，可能意味着“不设置超时”或“立即返回”。

const userSettings = {
    timeout: 0,
    retries: null
};
const actualTimeout = userSettings.timeout ?? 5000; // 得到 0，而不是 5000
const actualRetries = userSettings.retries ?? 3;     // 得到 3
console.log(`Timeout: ${actualTimeout}, Retries: ${actualRetries}`); // Timeout: 0, Retries: 3

登录后复制

布尔标志： 一个

isEnabled

登录后复制

属性，如果明确设置为

false

登录后复制

，就应该保持

false

登录后复制

，而不是被默认值

true

登录后复制

覆盖。

const featureConfig = {
    isEnabled: false,
    // showTips: undefined
};
const displayFeature = featureConfig.isEnabled ?? true; // 得到 false
const showUserTips = featureConfig.showTips ?? true;   // 得到 true
console.log(`Display Feature: ${displayFeature}, Show Tips: ${showUserTips}`); // Display Feature: false, Show Tips: true

登录后复制

字符串处理： 用户名或描述字段，如果用户输入了空字符串，这本身可能就是一种有效状态，而不是未提供。

const userData = {
    username: '',
    email: null
};
const displayUsername = userData.username ?? '匿名用户'; // 得到 ''
const displayEmail = userData.email ?? '未提供';       // 得到 '未提供'
console.log(`Username: "${displayUsername}", Email: "${displayEmail}"`); // Username: "", Email: "未提供"

登录后复制

维护数据类型和精确性： 当你从后端API获取数据时，如果某个字段可能返回
```
null
```
登录后复制
或
```
undefined
```
登录后复制
，但你希望其他非空值（包括
```
0
```
登录后复制
或
```
false
```
登录后复制
）能够被正确地保留下来，
```
??
```
登录后复制
就显得非常重要。它帮助你确保数据的完整性，避免了
```
||
```
登录后复制
可能导致的类型转换或值丢失。
避免意外的副作用： 有时候，左侧表达式可能是一个函数调用，如果这个函数返回
```
0
```
登录后复制
或
```
false
```
登录后复制
，而你又不想它被默认值覆盖，
```
??
```
登录后复制
是更安全的选择。

总而言之，只要你认为

登录后复制

、

false

登录后复制

或

''

登录后复制

应该被视为“有意义的值”而不是“空”，那么

??

登录后复制

就是你设置默认值时的首选。它让你的代码意图更加明确，也减少了因为“假值”判断带来的潜在逻辑错误。

??

登录后复制

运算符可以和

&&

登录后复制

或

||

登录后复制

混合使用吗？有哪些注意事项？

是的，

??

登录后复制

运算符可以和

&&

登录后复制

（逻辑与）或

||

登录后复制

（逻辑或）混合使用，但这里有一个非常重要的“坑”需要注意，否则会遇到语法错误。

JavaScript为了避免操作符优先级可能导致的歧义，不允许

??

登录后复制

直接与
&&
登录后复制
或
||
登录后复制
在同一个表达式中不加括号地混合使用。如果你尝试这样做，JavaScript 会抛出一个

SyntaxError

登录后复制

。

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

查看详情

比如，这样的写法是会报错的：

// 这会抛出 SyntaxError
// const result = someValue ?? anotherValue || defaultValue;
// const result = someValue ?? anotherValue && defaultValue;

登录后复制

这是因为

??

登录后复制

的优先级介于

&&

登录后复制

和

||

登录后复制

之间。为了强制你明确意图，JS 引擎要求你必须使用括号来明确分组。

正确的使用方式是使用括号来明确操作符的执行顺序：

结合

||

登录后复制

：如果你想先执行

||

登录后复制

，再用

??

登录后复制

提供最终的默认值：

const userPref = null;
const defaultSetting = 'default';
const finalValue = (userPref || 'fallback') ?? defaultSetting;
// 解释：userPref || 'fallback' -> null || 'fallback' -> 'fallback'
// 'fallback' ?? defaultSetting -> 'fallback'
console.log(finalValue); // 'fallback'

const anotherPref = 0;
const finalValue2 = (anotherPref || 'fallback') ?? defaultSetting;
// 解释：anotherPref || 'fallback' -> 0 || 'fallback' -> 'fallback'
// 'fallback' ?? defaultSetting -> 'fallback'
console.log(finalValue2); // 'fallback'

登录后复制

如果你想先用

??

登录后复制

处理空值，然后整个表达式再与

||

登录后复制

结合：

const userPrefA = undefined;
const userPrefB = null;
const userPrefC = 0;
const result = (userPrefA ?? userPrefB) || userPrefC;
// 解释：userPrefA ?? userPrefB -> undefined ?? null -> null
// null || userPrefC -> null || 0 -> 0
console.log(result); // 0

登录后复制

结合

&&

登录后复制

：如果你想先执行

&&

登录后复制

，再用

??

登录后复制

提供默认值：

const condition = true;
const value = null;
const finalResult = (condition && value) ?? 'default';
// 解释：condition && value -> true && null -> null
// null ?? 'default' -> 'default'
console.log(finalResult); // 'default'

const condition2 = false;
const value2 = 'data';
const finalResult2 = (condition2 && value2) ?? 'default';
// 解释：condition2 && value2 -> false && 'data' -> false
// false ?? 'default' -> false
console.log(finalResult2); // false

登录后复制

如果你想先用

??

登录后复制

处理空值，然后整个表达式再与

&&

登录后复制

结合：

const a = undefined;
const b = 'hello';
const c = 'world';
const result = (a ?? b) && c;
// 解释：a ?? b -> undefined ?? 'hello' -> 'hello'
// 'hello' && c -> 'hello' && 'world' -> 'world'
console.log(result); // 'world'

登录后复制

总结注意事项：

必须使用括号： 这是最重要的规则。当你需要在同一个表达式中同时使用
```
??
```
登录后复制
和
```
&&
```
登录后复制
或
```
||
```
登录后复制
时，请务必使用括号来明确你想要的操作顺序。
理解优先级： 虽然强制使用括号避免了优先级问题，但了解
```
??
```
登录后复制
的优先级低于
```
&&
```
登录后复制
和
```
||
```
登录后复制
仍然有助于你更好地设计表达式。
清晰意图： 引入
```
??
```
登录后复制
的目的就是为了更清晰地表达“空值”的概念。在混合使用时，也要确保你的代码意图依然清晰，避免过度复杂的表达式。如果一个表达式变得过于复杂，可以考虑将其拆分成多个步骤或使用临时变量。

??

登录后复制

运算符的浏览器兼容性和Polyfill方案是怎样的？

??

登录后复制

运算符是 ECMAScript 2020 (ES2020) 标准中引入的特性，这意味着它在较新的 JavaScript 环境中才能直接使用。

浏览器兼容性： 目前，主流的现代浏览器对

??

登录后复制

运算符的支持都非常好，包括：

Chrome (从 80 版本开始)
Firefox (从 72 版本开始)
Edge (从 80 版本开始)
Safari (从 13.1 版本开始)
Opera (从 67 版本开始)

你可以访问像 caniuse.com 这样的网站来查看最新的兼容性信息。对于绝大多数桌面和移动端用户来说，现在使用

??

登录后复制

已经不是什么大问题了。

Polyfill 方案： 虽然现代浏览器支持良好，但如果你需要支持一些老旧的浏览器环境（例如，一些企业内部应用可能还在使用旧版IE，或者某些嵌入式浏览器），那么你就需要考虑 Polyfill 或转译（Transpilation）方案。

通常，我们不会直接为

??

登录后复制

运算符编写 Polyfill 代码，因为它是一个语法特性，而不是一个全局对象或方法。最常见的做法是使用 Babel 这样的 JavaScript 编译器来将 ES2020+ 的语法转译成 ES5 或其他目标环境支持的语法。

当你使用 Babel 时，配合

@babel/preset-env

登录后复制

预设，它会自动检测你的目标浏览器环境，并将

??

登录后复制

这样的新语法转换为等效的旧语法。

例如，

a ?? b

登录后复制

可能会被转译成类似这样的形式：

var a = someValue;
var b = defaultValue;
var result = (a !== null && a !== undefined) ? a : b;

登录后复制

或者更简洁的：

var result = (someValue == null) ? defaultValue : someValue;

登录后复制

（注意这里的

== null

登录后复制

会同时检查

null

登录后复制

和

undefined

登录后复制

，这是 JS 的一个特性。）

如何配置 Babel： 如果你正在使用 Webpack、Rollup 或 Parcel 等构建工具，你通常会在 Babel 的配置文件（如

.babelrc

登录后复制

或

babel.config.js

登录后复制

）中配置

@babel/preset-env

登录后复制

。

一个简单的

babel.config.js

登录后复制

示例：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          edge: '17',
          firefox: '60',
          chrome: '67',
          safari: '11.1',
          // 你可以根据你的项目需求指定支持的浏览器版本
        },
        useBuiltIns: 'usage', // 如果需要，也可以配置polyfill
        corejs: 3,
      },
    ],
  ],
};

登录后复制

通过这样的配置，Babel 会自动处理