es6中 ?? 与 || 区别

本文解释了ES6中的空值合并运算符??和逻辑或运算符||的区别,前者用于检查并提供默认值(如foo??default),后者用于判断真假并返回相应值(如foo||default)。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

es6中 ?? 与 || 区别

自我记录

??||都是逻辑运算符,但它们的作用不同。
??是空值合并运算符,它用于检查左侧的表达式是否为nullundefined。如果是nullundefined,则返回右侧的表达式;如果不是,则返回左侧的表达式

let foo = null;
let bar = foo ?? 'default'; // bar 的值为 'default'

let baz; 
let qux = baz ?? 'default'; // qux 的值为 'default'

||是逻辑或运算符,它用于检查左侧的表达式是否为假。如果左侧的表达式为假,则返回右侧的表达式;如果左侧的表达式为真,则返回左侧的表达式。在JavaScript中,只有nullundefined''0NaN被视为假值,其他值都被视为真值。

let foo = 'hello';
let bar = foo || 'default'; // bar 的值为 'hello'

let baz; 
let qux = baz || 'default'; // qux 的值为 'default'

因此,??||的区别在于它们的逻辑行为和使用场景。??用于空值合并,而||用于逻辑或

<think>好的,我现在需要帮助用户理解 JavaScript 中的 ??|| 和 ?. 这三个操作符。用户之前已经询问过 ??,现在可能希望比较这三者的区别和用途。首先,我得回忆一下之前给出的关于 ?? 的回答,确保这次的内容不重复但能衔接上。 用户的问题涉及三个操作符,所以我需要逐一分析每个的作用,然后比较它们的差异。首先,?? 是空值合并运算符,专门处理 null 和 undefined。|| 是逻辑或,处理所有假值,而 ?. 是可选链,用于安全访问嵌套属性。 接下来,我需要考虑如何结构化回答。可能分成三个部分,分别介绍每个操作符,然后比较它们的使用场景和区别。需要例子来帮助理解,比如用 ??|| 处理默认值的不同,以及 ?. 如何防止因属性不存在而导致的错误。 还要注意用户可能的疑惑点,比如为什么选择 ?? 而不是 ||,或者何时使用 ?. 而不是普通的点操作符。需要明确每个操作符的适用情况,避免混淆。 另外,用户之前提到了系统级指令,必须使用正确的 LaTeX 格式,但这次问题中没有数学表达式,可能不需要用到。但需要确保格式正确,比如代码块用反引号,单独成段的部分使用换行。 最后,检查是否有兼容性或其他注意事项,比如 ?? 和 ?. 是 ES6 之后的特性,可能需要转译工具支持旧环境。这部分信息对用户可能有帮助,尤其是如果他们需要支持旧浏览器的话。 总结下来,结构应该是先分别介绍每个操作符,然后比较它们,再给出使用场景和注意事项。确保语言简洁,例子明确,帮助用户清晰区分这三者的不同用途。</think>在 JavaScript 中,`??`、`||` 和 `?.` 是三种不同的运算符,以下是它们的详细对比和解释: --- ### 一、空值合并运算符 `??`(Nullish Coalescing) #### 作用 - **专为 `null/undefined` 设计**:仅当左侧值为 `null` 或 `undefined` 时,返回右侧的默认值 - **保留假值**:不处理 `0`、`''`(空字符串)、`false` 等假值(falsy value) #### 示例 ```javascript let a = null; console.log(a ?? 10); // 10 let b = 0; console.log(b ?? 20); // 0 (保留非 null/undefined 的值) let c = ''; console.log(c ?? '默认'); // '' (空字符串不被视为 null/undefined) ``` --- ### 二、逻辑或 `||`(Logical OR) #### 作用 - **处理所有假值**:当左侧为假值(`false`、`0`、`''`、`null`、`undefined`、`NaN`)时,返回右侧值 - **更宽泛的默认值逻辑**:适合需要过滤假值的场景 #### 示例 ```javascript let x = 0; console.log(x || 100); // 100 (0 是假值) let y = ''; console.log(y || 'hello'); // 'hello' (空字符串是假值) let z = null; console.log(z || '默认'); // '默认' (null 是假值) ``` --- ### 三、可选链 `?.`(Optional Chaining) #### 作用 - **安全访问嵌套属性**:避免因访问 `null/undefined` 的属性导致的 `TypeError` - **短路机制**:遇到 `null/undefined` 时立即停止执行,返回 `undefined` #### 示例 ```javascript const user = { address: { city: '北京' } }; // 普通写法(可能报错) console.log(user.address.street.name); // TypeError: Cannot read property 'name' of undefined // 可选链写法(安全) console.log(user?.address?.street?.name); // undefined // 结合 ?? 使用 const city = user?.address?.city ?? '未知城市'; console.log(city); // '北京'(若 city 不存在则返回 '未知城市') ``` --- ### 四、对比表格 | 运算符 | 触发条件 | 典型场景 | 保留假值? | |--------|-----------------------------|--------------------------------|--------------------| | `??` | 仅 `null/undefined` | 需保留 `0`、`''` 的默认值逻辑 | ✅ | | `||` | 所有假值(包括 `0`、`''`) | 过滤所有假值的默认值逻辑 | ❌ | | `?.` | 访问 `null/undefined` 的属性 | 安全访问深层对象/函数 | 不涉及(仅防止报错) | --- ### 五、联合使用示例 ```javascript const config = { timeout: 0, api: { url: null } }; // 1. 使用 ?? 保留 0 值 const timeout = config.timeout ?? 5000; // 0 // 2. 使用 ?. 安全访问属性,结合 ?? 提供默认值 const apiUrl = config.api?.url ?? 'https://default.api'; // 3. 使用 || 过滤假值(可能丢失 0) const filteredTimeout = config.timeout || 5000; // 5000 ``` --- ### 六、注意事项 1. **运算符优先级** - `?.` 优先级高于 `??` 和 `||` - 使用括号明确优先级:`(a?.b) ?? '默认'` 2. **兼容性** - `??` 和 `?.` 是 ES2020 特性,需现代浏览器或 Node.js 14+ - 旧环境需通过 Babel 转译 3. **逻辑清晰性** - `?.` 避免过度嵌套:`obj?.a?.b?.c` 可能导致代码可读性下降 --- ### 总结 - **`??`**:精确处理 `null/undefined`,适合保留 `0`、`''` 的场景 - **`||`**:过滤所有假值,适合通用默认值逻辑 - **`?.`**:安全访问属性,避免代码崩溃 三者结合使用能写出更健壮、简洁的 JavaScript 代码!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值