aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html
diff options
context:
space:
mode:
authorIrvin <irvinfly@gmail.com>2022-02-16 02:02:49 +0800
committerIrvin <irvinfly@gmail.com>2022-02-16 02:35:54 +0800
commit01b0e12ba27b5069248fd09235e9a7143915ee30 (patch)
tree0e9edf538dc3fa3331e1dbb79239b58186765f86 /files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html
parent6ca84f1794af830ada9736d7289ce29aabb04ca3 (diff)
downloadtranslated-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.html28
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 &amp;&amp; obj.first.second;</pre>
+<pre class="brush: js">let nestedProp = obj.first &amp;&amp; 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 }
};