在 2019 年的 ECMAScript 东京峰会上,ES11 理事会通过了 Optional Chaining Proposal,也就是链判断符号。这个新的特性可以有效地简化 JavaScript 中的代码,让开发者们更加高效地编写代码。
什么是 Optional Chaining?
Optional Chaining 是一种新的 JavaScript 语法,用于检查一个对象是否为 null 或 undefined,从而避免在访问该对象的属性或方法时产生错误。这个特性使用问号(?)来表示。
在 JavaScript 中,如果我们要访问一个对象的属性或方法,我们通常会使用点号(.)来访问,例如:
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- -------- - ----- ----------- ------- -------- ----- - -- ----- ---- - --------------------
这段代码中,我们访问了 person
对象的 address
属性,然后再访问 address
对象的 city
属性。但是如果 person
对象或 address
对象为 null 或 undefined,这段代码就会产生错误。
Optional Chaining 的出现就是为了解决这个问题。它让我们可以像下面这样写代码:
const city = person?.address?.city;
这段代码中,我们在 person
对象和 address
对象的属性之间加了问号,表示如果这些属性为 null 或 undefined,那么这个表达式的值就是 undefined,而不会产生错误。
Optional Chaining 的使用场景
Optional Chaining 可以用于任何需要访问对象属性或方法的场景,特别是在访问深层嵌套的对象时非常有用。
下面是一个例子,我们要从一个对象数组中获取第一个对象的 name
属性:
const users = [ { name: 'Alice', age: 20 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 40 } ]; const name = users[0]?.name;
这段代码中,我们使用了 Optional Chaining 来访问 users
数组中第一个对象的 name
属性。如果 users
数组为 null 或 undefined,或者数组中的第一个对象为 null 或 undefined,那么这个表达式的值就是 undefined。
Optional Chaining 的指导意义
Optional Chaining 是一个非常实用的特性,它可以让我们更加高效地编写 JavaScript 代码。在访问对象属性或方法时,我们不再需要手动判断对象是否为 null 或 undefined,而是可以直接使用问号来简化代码。
同时,Optional Chaining 也提醒我们在编写代码时要注意对象是否为 null 或 undefined。在 JavaScript 中,访问一个不存在的属性或方法时会产生错误,这可能会导致程序崩溃。使用 Optional Chaining 可以帮助我们避免这种情况的发生,让我们的程序更加健壮和可靠。
示例代码
下面是一个使用 Optional Chaining 的示例代码:
-- -------------------- ---- ------- -- ------- ---- -------- ----- -- ----- ---- - - ----- -------- ------ ------------------- -- -- -- -------- -------- --- ----- -- ----- ----- - ------------ -- -- ----- - ---------------- ----- -------------- - ----- -- ------
在这个示例中,我们使用 Optional Chaining 来访问 user
对象的 phone
属性。如果 user
对象没有 phone
属性,那么 phone
的值就是 undefined。
接着,我们使用了 nullish coalescing 运算符(??)来判断 phone
是否为 undefined。如果 phone
为 undefined,那么 formattedPhone
的值就是默认值 'N/A'
。如果 phone
不为 undefined,那么 formattedPhone
的值就是 phone
的值。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67d38cf7a941bf71346c3537