diff options
author | Irvin <irvinfly@gmail.com> | 2022-02-16 02:02:49 +0800 |
---|---|---|
committer | Irvin <irvinfly@gmail.com> | 2022-02-16 02:35:54 +0800 |
commit | 01b0e12ba27b5069248fd09235e9a7143915ee30 (patch) | |
tree | 0e9edf538dc3fa3331e1dbb79239b58186765f86 /files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html | |
parent | 6ca84f1794af830ada9736d7289ce29aabb04ca3 (diff) | |
download | translated-content-01b0e12ba27b5069248fd09235e9a7143915ee30.tar.gz translated-content-01b0e12ba27b5069248fd09235e9a7143915ee30.tar.bz2 translated-content-01b0e12ba27b5069248fd09235e9a7143915ee30.zip |
remove `notranslate` class in zh-CN
Diffstat (limited to 'files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html')
-rw-r--r-- | files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html | 28 |
1 files changed, 14 insertions, 14 deletions
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/可选链 <h2 id="语法">语法</h2> -<pre class="syntaxbox notranslate"><var>obj</var>?.<var>prop</var> +<pre class="syntaxbox"><var>obj</var>?.<var>prop</var> <var>obj</var>?.[<var>expr</var>] <var>arr</var>?.[<var>index</var>] <var>func</var>?.(<var>args</var>) @@ -38,19 +38,19 @@ original_slug: Web/JavaScript/Reference/Operators/可选链 <p>比如,思考一个存在嵌套结构的对象 <code>obj</code>。不使用可选链的话,查找一个深度嵌套的子属性时,需要验证之间的引用,例如:</p> -<pre class="brush: js notranslate">let nestedProp = obj.first && obj.first.second;</pre> +<pre class="brush: js">let nestedProp = obj.first && obj.first.second;</pre> <p>为了避免报错,在访问<code>obj.first.second</code>之前,要保证 <code>obj.first</code> 的值既不是 <code>null</code>,也不是 <code>undefined</code>。如果只是直接访问 <code>obj.first.second</code>,而不对 <code>obj.first</code> 进行校验,则有可能抛出错误。</p> <p>有了可选链操作符(<code>?.</code>),在访问 <code>obj.first.second</code> 之前,不再需要明确地校验 <code>obj.first</code> 的状态,再并用短路计算获取最终结果:</p> -<pre class="brush: js notranslate">let nestedProp = obj.first?.second;</pre> +<pre class="brush: js">let nestedProp = obj.first?.second;</pre> <p>通过使用 <code>?.</code> 操作符取代 <code>.</code> 操作符,JavaScript 会在尝试访问 <code>obj.first.second</code> 之前,先隐式地检查并确定 <code>obj.first</code> 既不是 <code>null</code> 也不是 <code>undefined</code>。如果<code>obj.first </code>是 <code>null</code> 或者 <code>undefined</code>,表达式将会短路计算直接返回 <code>undefined</code>。</p> <p>这等价于以下表达式,但实际上没有创建临时变量:</p> -<pre class="brush: js notranslate">let temp = obj.first; +<pre class="brush: js">let temp = obj.first; let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);</pre> <h3 id="可选链与函数调用">可选链与函数调用</h3> @@ -59,7 +59,7 @@ let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.secon <p>函数调用时如果被调用的方法不存在,使用可选链可以使表达式自动返回<code>undefined</code>而不是抛出一个异常。</p> -<pre class="brush: js notranslate">let result = someInterface.customMethod?.();</pre> +<pre class="brush: js">let result = someInterface.customMethod?.();</pre> <div class="blockIndicator note"> <p><strong>注意:</strong> 如果存在一个属性名且不是函数, 使用 <code>?.</code> 仍然会产生一个 {{JSxRef("TypeError")}} 异常 (<code>x.y</code><code> is not a function</code>).</p> @@ -73,7 +73,7 @@ let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.secon <p>如果使用<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>来解构的一个对象的回调函数或 fetch 方法,你可能得到不能当做函数直接调用的不存在的值,除非你已经校验了他们的存在性。使用<code>?.</code>的你可以忽略这些额外的校验:</p> -<pre class="brush: js notranslate">// ES2019的写法 +<pre class="brush: js">// ES2019的写法 function doSomething(onContent, onError) { try { // ... do something with the data @@ -86,7 +86,7 @@ function doSomething(onContent, onError) { } </pre> -<pre class="brush: js notranslate">// 使用可选链进行函数调用 +<pre class="brush: js">// 使用可选链进行函数调用 function doSomething(onContent, onError) { try { // ... do something with the data @@ -101,16 +101,16 @@ function doSomething(onContent, onError) { <p>当使用<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors#方括号表示法">方括号与属性名</a>的形式来访问属性时,你也可以使用可选链操作符:</p> -<pre class="brush: js notranslate">let nestedProp = obj?.['prop' + 'Name'];</pre> +<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name'];</pre> <h3 id="可选链不能用于赋值">可选链不能用于赋值</h3> -<pre class="notranslate"><code>let object = {}; +<pre><code>let object = {}; object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre> <h3 id="可选链访问数组元素">可选链访问数组元素</h3> -<pre class="notranslate">let arrayItem = arr?.[42];</pre> +<pre>let arrayItem = arr?.[42];</pre> <h2 id="例子">例子</h2> @@ -118,7 +118,7 @@ object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignm <p>如下的例子在一个不含 <code>bar</code> 成员的 Map 中查找 <code>bar</code> 成员的 <code>name</code> 属性,因此结果是 <code>undefined</code>。</p> -<pre class="brush: js notranslate">let myMap = new Map(); +<pre class="brush: js">let myMap = new Map(); myMap.set("foo", {name: "baz", desc: "inga"}); let nameBar = myMap.get("bar")?.name;</pre> @@ -127,7 +127,7 @@ let nameBar = myMap.get("bar")?.name;</pre> <p>当在表达式中使用可选链时,如果左操作数是 <code>null</code> 或 <code>undefined</code>,表达式将不会被计算,例如:</p> -<pre class="brush: js notranslate">let potentiallyNullObj = null; +<pre class="brush: js">let potentiallyNullObj = null; let x = 0; let prop = potentiallyNullObj?.[x++]; @@ -138,7 +138,7 @@ console.log(x); // x 将不会被递增,依旧输出 0 <p>可以连续使用可选链读取多层嵌套结构:</p> -<pre class="brush: js notranslate">let customer = { +<pre class="brush: js">let customer = { name: "Carl", details: { age: 82, @@ -155,7 +155,7 @@ let duration = vacations.trip?.getTime?.(); <p>{{JSxRef("Operators/Nullish_Coalescing_Operator", "空值合并操作符")}}可以在使用可选链时设置一个默认值:</p> -<pre class="brush: js notranslate"><code>let customer = { +<pre class="brush: js"><code>let customer = { name: "Carl", details: { age: 82 } }; |