关于可选链操作符(?.)

原创 已于 2023-03-30 16:44:29 修改 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2021-10-29 12:04:35 首次发布
本文探讨了JavaScript中的可选链操作符?.的使用，如何简化代码并提升开发体验。然而，新语法可能引发浏览器兼容问题，特别是对于使用旧版浏览器的用户。作者通过两个猜想，排除了浏览器缓存和解决了浏览器版本过低的问题。建议在使用新语法时注意浏览器兼容性，并提供了解决方案——通过转换工具将ES6语法转为ES5，确保广泛支持。

javaScript越更新，越贴近、方便开发者。

大家肯定写过类似的语法：

let length = (res && res.data && res.data.length) || 0

这种代码，看起来不是很美观，而且啰哩啰嗦的。那么有没有更简洁、方便的方式呢？

当然！！那就是 可选链操作符?.

将上述代码使用 可选链操作符?. 改写如下：

let length = res?.data?.length || 0
最低0.47元/天 解锁文章
js：可选链运算符（?.）和空值合并运算符（??）
彭世瑜的博客
11-04 735
是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。使用可选链运算符（?.）就可以很好的规避这个问题。假设有两个对象，数据而结构如下。获取嵌套对象的name属性。
可选链操作符 ?.
An滴饭儿的博客
01-26 661
function main(config){ const dbHost = config && config.db && config.db.host; console.log(dbHost) } main({ db:{ host:'192.168.20.60', userName:'liuy' }, cache:{ host:'192.168.20.80', userName:'admin' } }) 使用链式操作符之前，我们使用上面代码进行判
JavaScript 可选链操作符 ?.
曹定栓的博客
07-14 1506
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。
前端基础知识与常见面试题（十四）
m0_71003185的博客
11-11 347
连续递增的子序列 可以由两个下标 l 和 r（l < r）确定，如果对于每个 l
可选链操作符
weixin_51664705的博客
04-15 310
function main(config){ const dbHost = config&&config.db&&config.db.host console.log(dbHost) } main({ db:{ host:'192.168.1.100', username:'root'
可选链操作符？.
01-08
可选链操作符?.能够去读取一个被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性。?.运算符功能类似于.运算符，不同之处在于如果链条上的一个引用是nullish (null 或 undefined)，.操作符会引起...
JavaScript 可选链操作符（?.）
gklcsdn的博客
11-21 827
可选链操作符是一个强大的工具，能够简化代码、减少冗余的检查逻辑，并提高代码的可读性。适合在不确定对象结构是否完整或存在的情况下使用，但要谨慎使用在关键路径中，以免忽略潜在的错误处理需求。
可选链操作符?.
CamphorBlossom的博客
12-10 1003
?. 操作符是ES11的新语法，允许读取位于对象链深处的属性的值，不必明确验证链中的每个引用是否有效。
零合并操作符 ??和可选链操作符 ?.
秋水不寒的专栏
01-18 392
零合并操作符 零合并操作符 ?? 是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回右侧操作数，否则返回左侧操作数。 expr1 ?? expr2 复制代码 空值合并操作符一般用来为常量提供默认值，保证常量不为 null 或者 undefined，以前一般使用 || 来做这件事 variable = variable || 'bar'。然而，由于 || 是一个布尔逻辑运算符，左侧的操作数会被强制转换成布尔值用于求值。任何假值（0， ''， NaN， null， unde
可选链操作符 ?.
qq_38796823的博客
08-10 234
https://blog.csdn.net/weixin_43487782/article/details/110524901
可选链操作符( ?. )
seimeii的博客
11-26 367
“可选的链接运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。” — MDN Web文档 问题描述：假设你有一个data对象，并且想要安全地访问data.test.value。 首先，你需要检查：data 是否被定义。data.test 是否被定义。 //在data.test.value，你可以调用之前，因为，你显然无法读取undefined属性。 const data = {test：{value：1}} if（data && data.test）.
？. 可选链操作符
weixin_59519449的博客
04-07 1330
. 可选链操作符，如果前面对象里没有length，整个表达式原地返回unndefined //如果getToken()原地有值 token 字符串, 才能调用length获取长度 // 添加请求拦截器 axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 //目标: 统一携带token //判断本地有token 再携带，判断具体api / index.js 里如果没有携带Authoriz..
可选链（Optional Chaining）操作符 ?.
一萧烟雨任平生
11-12 586
可选链（Optional Chaining）操作符 ?. 是 JavaScript 中的一种语法糖，用来简化访问嵌套对象属性时的代码，避免因访问 null 或 undefined 而导致的错误。它允许你在链式调用中安全地处理不存在的属性或方法，从而减少了手动检查每个对象是否为 null 或 undefined 的需求。
ES6 可选链 操作符
czx3387170的博客
12-03 1215
一、 ?. 可选链操作符（?.）允许读取位于连接对象链深处的属性值,而不必明确验证链中的每个引用是否有效。 let nestedProp = obj.first && obj.first.second; // 等价于 let nestedProp = obj.first?.second; js会在尝试访问obj.first.second之前隐式的检查并确定obj.first既不是null也不是undefined。如果obj.first是null或者undefined,表达式将会短路计
【JavaScript】可选链操作符
小秀的博客
08-08 903
可选链操作符（Optional Chaining Operator）是一种 JavaScript/TypeScript 中的语法特性，用于简化对可能为空或未定义的属性或方法的访问。在访问一个对象的属性或方法时，通常需要先检查该对象是否为 null 或 undefined，以避免产生错误。可选链操作符的优点在于它简化了对多层嵌套属性或方法的访问，避免了手动进行非空判断的繁琐性。为 null 或 undefined，那么。将为 undefined，而不是抛出错误。
js中的 可选链操作符、空值合并操作符、空值赋值运算符、非空断言操作符
qq_44376306的博客
02-22 3193
1.可选链操作符( ?.) const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName = adventurer.dog?.name; console.log(dogName); // expected output: undefined console.log(adventurer.someNonExistentMethod?.()); // expected output: undef.
JavaScript 36 ，JavaScript 可选链操作符：深度解读与实战应用（ JS可选链操作符，JS中的可选链操作符）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
09-19 3220
⭐在前端开发中，我们经常会遇到访问嵌套对象属性的需求。然而，处理深层嵌套对象时，属性可能为 undefined 或 null，直接访问这些属性时会抛出错误。为了解决这种问题，JavaScript在ES2020中引入了一项新特性——可选链操作符（?.）。它不仅简化了代码逻辑，还提升了代码的健壮性和可读性。这里来分享记录，可选链操作符的语法、应用场景及其与其他JavaScript特性的结合使用，并通过多个实际例子展示如何在日常开发中充分利用这一特性。
可选链操作符（?.）转成js
最新发布
07-15
在 JavaScript 中，可选链操作符（`?.`）是一种语法糖，用于安全地访问对象的深层属性或调用方法，而无需显式检查每一层是否为 `null` 或 `undefined`。如果某个引用为空，则表达式会短路并返回 `undefined`，而不是抛出错误。 ### 可选链操作符的基本使用 可选链支持以下几种形式： - `object?.property`：访问对象的属性。 - `object?.[expression]`：通过表达式动态访问对象的属性。 - `object?.method()`：调用对象的方法（如果存在）。 例如，访问嵌套对象中的属性： ```javascript const user = { profile: { name: 'John Doe' } }; // 使用可选链 const userName = user?.profile?.name; // 'John Doe' ``` 上述代码等价于传统的写法： ```javascript const userName = user && user.profile && user.profile.name; // 'John Doe' ``` 使用可选链可以显著减少冗余的条件判断，使代码更简洁和易读[^4]。 --- ### 可选链与函数调用 可选链也适用于函数调用场景，尤其适合处理可选的回调函数或事件处理器。如果指定的方法不存在，表达式将返回 `undefined` 而不会引发错误。 ```javascript function invoke(fn) { fn?.call(this); // 如果 fn 不存在，不会报错 } ``` 这种写法比传统的条件判断更加简洁，并且避免了不必要的错误处理逻辑[^5]。 --- ### 可选链与数组元素访问 除了对象属性之外，可选链也可以用于访问数组中的元素。如果数组本身为 `null` 或 `undefined`，或者索引超出范围，表达式会返回 `undefined`。 ```javascript const arr = [1, 2, 3]; console.log(arr?.[0]); // 1 console.log(arr?.[5]); // undefined ``` 这种方式可以有效防止访问未定义数组时的运行时错误[^5]。 --- ### 可选链与空值合并运算符结合使用 为了进一步简化默认值的设置，可选链可以与空值合并运算符 `??` 结合使用。当左侧表达式的结果为 `null` 或 `undefined` 时，返回右侧的默认值。 ```javascript const obj = {}; const value = obj?.prop ?? 'default'; console.log(value); // 'default' ``` 这种组合在处理配置项、API 响应等不确定结构的数据时非常有用[^4]。 --- ### 注意事项 虽然可选链提供了便捷的访问方式，但在使用时需要注意以下几点： - **不可用于赋值**：不能将可选链用于属性赋值操作，否则会导致语法错误。 ```javascript const obj = { propName: 'name' }; obj?.['propName'] = 'new name'; // SyntaxError ``` - **类型不匹配仍会报错**：如果链中某个属性不是函数但尝试以函数方式调用，依然会抛出错误。 ```javascript const obj = { method: 'not a function' }; obj?.method?.(); // TypeError: obj.method is not a function ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值