JavaScriptの論理演算子の詳しい解説

推奨チュートリアル: 「JavaScript ビデオ チュートリアル 」

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

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

無条件と条件付き

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

const x = 1 2 では、何があっても常に LHS を RHS に加算し、その結果を x# に代入します。 ##。

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 であるため、次に値が 2 である RHS 演算を実行し、代入演算も実行します。結果は 2 になります。 const x = false && 0 2 と比較すると、左側は

false

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

二項論理演算子

&& || ??

JSX では、条件付きレンダリングに

&&

と

||

をよく使用します。インターフェース。

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

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

null

未定義

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

未定義

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

または

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

は、そうでない値を生成します。ブール型である必要がありますが、2 つのオペランド式の値のいずれかです。

いくつかの例

// &&
/ /如果 LHS 是真值，计算并返回 RHS，否则返回 LHS

true && 100**2 // 10000
 
"Joe" && "JavaScript" // "JavaScript"
 
false && 100**2 // false
 
"" && 100**2 // ""
 
NaN && 100**2 // NaN
 
null && 100**2 // null
 
undefined && 100**2 // undefined

論理代入演算子

&&= ||= ??=

この演算子は、代入と条件付き論理演算子を組み合わせます。名前

「論理割り当て」

。たとえば、

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 in React

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

DOM

el.innerHTML ||= 'some default'

Object

// 如果对象没有 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

プログラミング関連の知識については、

プログラミング入門
をご覧ください。 ！

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