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

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

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

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

無条件と条件付き

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

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

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

などの論理演算子は条件付きです。

では、左側が最初に計算されます。これは ## です。 ＃真実＃＃＃。 LHS の値は true であるため、次に値が 2 である RHS 演算を実行し、代入演算も実行します。結果は 2 になります。 const x = false && 0 2 と比較すると、左側は

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

&& || ??

&&

||

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

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

null

未定義

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

未定義

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

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

いくつかの例

// &&
/ /如果 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 機能により、論理割り当てによって提供される機能には明らかに冗長性があると主張する人もいるでしょう。ただし、この省略表現はスムーズに思えます。さらに多くの使用例が発見されるにつれて、きっと便利になるでしょう。

// 逻辑与
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)

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

// 逻辑 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)

ログイン後にコピー

JSX in React

let loading = true
const 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 サイトの他の関連記事を参照してください。