在日常的前端开发中,我们通常会操作 JavaScript 对象。而当我们需要访问对象嵌套深度比较大的属性时,代码可能会变得冗长而难以维护。针对这种情况,JavaScript 新增了可选链式操作符,使得操作对象变得更加方便和灵活。
什么是可选链式操作符?
可选链式操作符(Optional Chaining)是 ECMAScript 2020 中的新特性,它允许在访问对象属性时,如果该属性不存在,不会抛出异常,而是返回 undefined。这样就可以避免代码因为不存在的属性而崩溃。
-- -------------------- ---- ------- ----- ------ - - ----- ------- -------- - ----- ---- ---------- - - -- ---- ----- ---- - -------------- - ------------------- - --------- -- --------- ----- ---- - --------------------
在上面的代码中,我们使用了可选链式操作符 ?.
来访问 person
对象中嵌套的 address
对象的 city
属性。如果 address
不存在,返回值则为 undefined
。
可选链式操作符的基本语法
可选链式操作符的语法与常规的属性访问操作符一样,只需要在对象属性后添加一个问号 ?
即可。
// 常规写法 object.property // 可选链式操作符写法 object?.property
我们还可以使用可选链式操作符访问嵌套对象的属性或方法:
object?.nestedObject?.nestedProperty object?.method?.() object?.['property']
使用示例
为了更好地了解可选链式操作符的使用,我们来看几个示例。
示例 1: 判断对象是否存在
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- -- - -- -- ------ ------ ---- -- -- -------------- - ------------------------ -
在上面的代码中,我们首先使用了可选链式操作符 ?.
判断 person
对象是否存在 name
属性,如果存在则打印出该属性对应的值。
示例 2: 使用可选链式操作符调用函数
const person = { sayHello() { console.log('Hello, World!') } } // 判断 person 对象是否存在 sayHello 方法 person?.sayHello?.()
在上面的代码中,我们使用了可选链式操作符 ?.
判断 person
对象是否存在 sayHello
方法,并在存在的情况下进行调用。
示例 3: 访问嵌套对象的属性
-- -------------------- ---- ------- ----- ------ - - ----- ------- -------- - ----- ---- ---------- - - -- ------------------ ----- ---- - --------------------
在上面的代码中,我们使用了可选链式操作符 ?.
访问 person
对象嵌套的 address
对象的 city
属性。如果 address
不存在,返回值则为 undefined
。
可选链式操作符的局限性
虽然可选链式操作符提供了便利的访问对象属性的方式,但是需要注意的是,它并不能使用在所有场景中。
首先,可选链式操作符只能在访问对象属性或方法时使用,无法使用在访问数组元素或函数参数上。
其次,可选链式操作符只能在部分现代浏览器中支持,如果需要在过时的浏览器中使用,需要使用转译工具将代码转换为相应的 ES5 代码。
总结
可选链式操作符是 JavaScript 中一个非常有用的新特性。它可以简化操作对象嵌套属性的代码,减少代码错误和异常情况的出现。需要注意的是,在使用时需要了解其局限性,保证代码的兼容性和可维护性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/646a43d8968c7c53b09f4a65