From 01b0e12ba27b5069248fd09235e9a7143915ee30 Mon Sep 17 00:00:00 2001 From: Irvin Date: Wed, 16 Feb 2022 02:02:49 +0800 Subject: remove `notranslate` class in zh-CN --- .../operators/optional_chaining/index.html | 28 +++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html') diff --git a/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html b/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html index 6f639f537a..e765e6d66b 100644 --- a/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html +++ b/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html @@ -26,7 +26,7 @@ original_slug: Web/JavaScript/Reference/Operators/可选链

语法

-
obj?.prop
+
obj?.prop
 obj?.[expr]
 arr?.[index]
 func?.(args)
@@ -38,19 +38,19 @@ original_slug: Web/JavaScript/Reference/Operators/可选链
 
 
比如，思考一个存在嵌套结构的对象 obj。不使用可选链的话，查找一个深度嵌套的子属性时，需要验证之间的引用，例如：

 
-
let nestedProp = obj.first && obj.first.second;

+
let nestedProp = obj.first && obj.first.second;

 
 
为了避免报错，在访问obj.first.second之前，要保证 obj.first 的值既不是 null，也不是 undefined。如果只是直接访问 obj.first.second，而不对 obj.first 进行校验，则有可能抛出错误。

 
 
有了可选链操作符（?.），在访问 obj.first.second 之前，不再需要明确地校验 obj.first 的状态，再并用短路计算获取最终结果：

 
-
let nestedProp = obj.first?.second;

+
let nestedProp = obj.first?.second;

 
 
通过使用 ?. 操作符取代 . 操作符，JavaScript 会在尝试访问 obj.first.second 之前，先隐式地检查并确定 obj.first 既不是 null 也不是 undefined。如果obj.first 是 null 或者 undefined，表达式将会短路计算直接返回 undefined。

 
 
这等价于以下表达式，但实际上没有创建临时变量：

 
-
let temp = obj.first;
+
let temp = obj.first;
 let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

 
 
可选链与函数调用

@@ -59,7 +59,7 @@ let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.secon
 
 
函数调用时如果被调用的方法不存在，使用可选链可以使表达式自动返回undefined而不是抛出一个异常。

 
-
let result = someInterface.customMethod?.();

+
let result = someInterface.customMethod?.();

 
 

 
注意: 如果存在一个属性名且不是函数, 使用 ?. 仍然会产生一个 {{JSxRef("TypeError")}} 异常 (x.y is not a function).

@@ -73,7 +73,7 @@ let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.secon
 
 
如果使用解构赋值来解构的一个对象的回调函数或 fetch 方法，你可能得到不能当做函数直接调用的不存在的值，除非你已经校验了他们的存在性。使用?.的你可以忽略这些额外的校验：

 
-
//  ES2019的写法
+
//  ES2019的写法
 function doSomething(onContent, onError) {
   try {
     // ... do something with the data
@@ -86,7 +86,7 @@ function doSomething(onContent, onError) {
 }
 

 
-
// 使用可选链进行函数调用
+
// 使用可选链进行函数调用
 function doSomething(onContent, onError) {
   try {
    // ... do something with the data
@@ -101,16 +101,16 @@ function doSomething(onContent, onError) {
 
 
当使用方括号与属性名的形式来访问属性时，你也可以使用可选链操作符：

 
-
let nestedProp = obj?.['prop' + 'Name'];

+
let nestedProp = obj?.['prop' + 'Name'];

 
 
可选链不能用于赋值

 
-
let object = {};
+
let object = {};
 object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

 
 
可选链访问数组元素

 
-
let arrayItem = arr?.[42];

+
let arrayItem = arr?.[42];

 
 
例子

 
@@ -118,7 +118,7 @@ object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignm
 
 
如下的例子在一个不含 bar 成员的 Map 中查找 bar 成员的 name 属性，因此结果是 undefined。

 
-
let myMap = new Map();
+
let myMap = new Map();
 myMap.set("foo", {name: "baz", desc: "inga"});
 
 let nameBar = myMap.get("bar")?.name;

@@ -127,7 +127,7 @@ let nameBar = myMap.get("bar")?.name;

 
 
当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算，例如：

 
-
let potentiallyNullObj = null;
+
let potentiallyNullObj = null;
 let x = 0;
 let prop = potentiallyNullObj?.[x++];
 
@@ -138,7 +138,7 @@ console.log(x); // x 将不会被递增，依旧输出 0
 
 
可以连续使用可选链读取多层嵌套结构：

 
-
let customer = {
+
let customer = {
   name: "Carl",
   details: {
     age: 82,
@@ -155,7 +155,7 @@ let duration = vacations.trip?.getTime?.();
 
 
{{JSxRef("Operators/Nullish_Coalescing_Operator", "空值合并操作符")}}可以在使用可选链时设置一个默认值：

 
-
let customer = {
+
let customer = {
   name: "Carl",
   details: { age: 82 }
 };
-- 
cgit v1.2.3-54-g00ecf