ホームページ > 記事 > ウェブフロントエンド > 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 が無効かどうかをテストします。
JS の仮想値とは何ですか? 未定義
未定義
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 && (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)論理 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)
let loading = true const 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をインストールし、次の内容を
{ "plugins": ["@babel/plugin-proposal-logical-assignment-operators"] }論理割り当ては新しい概念であるため、関連する知識はまだあまりありません。他にも論理代入の優れた使用例がある場合は、以下にコメントを残してください。
英語の元のアドレス: https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html
著者: Joe Seifi
プログラミング関連の知識については、プログラミング入門
をご覧ください。 !
以上がJavaScriptの論理演算子の詳しい解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。