JS の論理代入演算子の詳細な分析

この記事では、JavaScript の論理代入演算子について詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#論理代入は、既存の数学演算子および二項論理演算子の拡張機能です。まずそれらを確認してから、それらを組み合わせることで何が得られるかを見てみましょう。

まず、JS の 条件演算子と 無条件演算子の違いを見てみましょう。

無条件と条件付き

などの数学演算子は無条件です。

const x = 1 2 では、何があっても常に LHS を RHS に加算し、その結果は次のように代入されます。 ＃＃＃バツ＃＃＃。 LHS と RHS は数学分野の概念で、方程式の左側と右側を意味します。現在のシナリオでは、代入演算子の左側と右側です。変数が代入演算子の左側にある場合は LHS クエリが実行され、それ以外の場合は RHS クエリが実行されます。

const x = false 2

のような奇妙なコードを書くこともできます。 JS は最初に false の LHS を Number に変換するため、const x = Number (false) 2 が得られ、結果 は const x = になります。 0 2 。 LHS を RHS に追加し、最終的に #xx に割り当て、結果は 2 になります。

&&

などの論理演算子は条件付きです。 const x = true && 0 2

では、最初に LHS を計算します。 、これは

true です。 LHS の値は true であるため、次に値が 2 である RHS 演算を実行し、代入演算も実行します。結果は 2 になります。 const x = false && 0 2

と比較すると、左側は

false であるため、右側は完全に無視されます。 なぜ RHS の計算を避けるべきなのか疑問に思われるかもしれません?一般的な 2 つの理由は、パフォーマンスの向上と副作用の回避です。

二項論理演算子

##& || ??

JSX

では && をよく使用します。 ||

条件付きでインターフェイスをレンダリングします。

?? は、nullish(null value) 合体演算子で、最近承認され、間もなく普及される予定です。これらはすべて二項論理演算子です。 LHS の結果が真の値であるかどうかをテストするには、&& を使用します。

LHS の結果が虚数であるかどうかをテストするには、
• || を使用します。
• ?? を使用して、LHS が無効かどうかをテストします。
• 仮想値と Nullish

JS の仮想値とは何ですか?

null

未定義

false
• NaN
• 0
• "" (空の文字列)
• 次の 2 つの姉妹はヌル値とみなされます。
• null

未定義

• 二項論理演算子を使用すると、必ずしも
ブール値
• が返されるわけではないことに注意してください。返される式の
LHS

または

RHS の値です。これらの式タイプの要点を明確にするために、ECMAScript ドキュメントの次の文を再検討すると役立ちます: && または ||

は値を生成しません。ブール型ですが、2 つのオペランド式の値の 1 つです。

#いくつかの例<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// &amp;&amp; / /如果 LHS 是真值，计算并返回 RHS，否则返回 LHS true &amp;&amp; 100**2 // 10000 &quot;Joe&quot; &amp;&amp; &quot;JavaScript&quot; // &quot;JavaScript&quot; false &amp;&amp; 100**2 // false &quot;&quot; &amp;&amp; 100**2 // &quot;&quot; NaN &amp;&amp; 100**2 // NaN null &amp;&amp; 100**2 // null undefined &amp;&amp; 100**2 // undefined</pre><div class="contentsignin">ログイン後にコピー</div></div>

論理代入演算子

&&= ||= ??=

この演算子は代入と条件論理演算子を組み合わせたものであるため、

「論理代入」

という名前が付けられています。たとえば、x && = y は、

x && (x = y)

の略称です。 論理割り当てから返される値は、更新された割り当てではなく、評価された式の値です。 デフォルト引数や null 合体演算子などの以前の ECMAScript 機能により、論理割り当てによって提供される機能には明らかにある程度の冗長性があると主張できます。ただし、この省略表現はスムーズに思えます。さらに多くの使用例が発見されるにつれて、きっと便利になるでしょう。

論理 AND 代入 (&&= )

// 逻辑与
LHS &&= RHS
// 等价于 
LHS && (LHS = RHS)
 
// 事例
// if x is truthy, assign x to y, otherwise return x
// 如果 x 为真值，则将 y 赋值给 x， 否则返回 x
let x = 1
const y = 100
x &&= y // x 为 100
  
// 与上面对应的长的写法
x && (x = y)

論理 OR 代入 (||= )

// 逻辑或
LHS ||= RHS
 
// 等价于
LHS || (LHS = RHS)
 
// 事例
// 如果 x 为真值，返回 x，否则将 y 赋值给 x
let x = NaN
const y = 100
x ||= y // x 为 100
 
// 与上面对应的长的写法
x || (x = y)

論理的な null 代入 (??=)

// 逻辑 nullish
LHS ??= RHS
 
// 等价于
LHS ?? (LHS = RHS)
 
// 事例
// if x.z is nullish, assign x.z to y
let x = {}
let y = 100;
x.z ??= y // x 为 { z: 100 }
 
// 与上面对应的长的写法
x.z ?? (x.z = y)

実装における論理的な代入の例

React の JSX

let loading = true
const spinner = <Spinner />
loading &&= spinner

DOM

el.innerHTML ||= 'some default'

オブジェクト

// 如果对象没有 onLoad 方法，则设置一个方法
const config = {};
config.onLoad ??= () => console.log('loaded!')

const myObject = { a: {} }
 
myObject.a ||= 'A'; // 被忽略，因为 myObject 中 a 的值为真值
myObject.b ||= 'B'; // myObject.b 会被创建，因为它不丰 myObject 中
 
// {
//  "a": {}
//  "b": "B"
// }
 
myObject.c &&= 'Am I seen?'; // 这里的 myObject.c 为虚值，所以什么都不会做

プロジェクトでの論理割り当ての使用方法

Chrome はすでに論理割り当てをサポートしています。下位互換性を確保するには、トランスフォーマーを使用します。 Babel を使用している場合は、プラグイン

npm install @babel/plugin-proposal-logical-assignment-operators

をインストールし、次の内容を .babelrc に追加してください:

{
  "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}

論理割り当ては新しい概念であるため、関連する知識はまだあまりありません。論理割り当ての他の優れた使用例がある場合は、以下にコメントを残してください。

元のアドレス: https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html

著者: Joe Seifi

翻訳アドレス：https://segmentfault.com/a/1190000039923017

プログラミング関連の知識については、 プログラミング ビデオ をご覧ください。 ！

以上がJS の論理代入演算子の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。