ECMAScript の開発中には、破棄、アロー関数、モジュールなど、JavaScript の記述方法を大幅に変更する多くの機能の更新が行われる予定です. 好きな人もいれば嫌いな人もいるかもしれませんが、すべての新しいものと同じように.機能、私たちは最終的にそれらに慣れます。
新しいバージョンの ECMAScript では 3 つの新しい論理代入演算子が導入されています: null 演算子, AND および OR 演算子. これらの演算子の出現により、コードがよりクリーンで簡潔になることも期待されています. ここにいくつかのエレガントな JavaScript 演算子があります.
1. オプションの連鎖演算子 [? .】
Optional Chaining Operator はES2020 提案のステージ 4 にあるため、仕様に追加する必要があります。オブジェクトの内部プロパティ、特に深くネストされたプロパティにアクセスする方法が変わります。TypeScript 3.7 以降の機能としても利用できます。
フロント エンドを開発する小さなパートナーのほとんどは、null および未定義のプロパティに遭遇すると思います。JS 言語の動的な性質により、それらに遭遇しないわけにはいきません。特にネストされたオブジェクトを扱う場合は、次のコードが一般的です。
if (data && data.children && data.children[0] && data.children[0].title) {
// I have a title!
}
上記のコードは API 応答用です。JSON を解析して、名前が存在することを確認する必要があります。ただし、オブジェクトにオプションのプロパティがあるか、一部の構成オブジェクトに特定の値の動的マッピングがあり、多くの境界条件を確認する必要がある場合、同様の状況が発生する可能性があります。
この時点で、オプションの連鎖演算子を使用すると、すべてが簡単になります。ラダーを明示的に検索しなくても、ネストされたプロパティをチェックしてくれます。null 値を確認したいプロパティの後に "?" 演算子を使用するだけです。演算子は式の中で何度でも使用でき、何も定義されていない場合は早期に戻ります。
静的プロパティの使用法は次のとおりです。
object?.property
動的プロパティの場合は、次のように変更します。
object?.[expression]
上記のコードは次のように簡略化できます。
let title = data?.children?.[0]?.title;
次に、次の場合：
let data;
console.log(data?.children?.[0]?.title) // undefined
data = {
children: [{
title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao
こう書いた方がわかりやすいでしょうか？演算子はnullになるとすぐに終了するため、メソッドを条件付きで呼び出したり、条件付きロジックを適用したりするためにも使用できます
const conditionalProperty = null;
let index = 0;
console.log(conditionalProperty?.[index++]); // undefined
console.log(index); // 0
メソッド呼び出しの場合は、次のように記述できます
object.runsOnlyIfMethodExists?.()
たとえば、次のparentオブジェクトを直接呼び出すと、エラーがparent.getTitle()報告され、終了し、実行されません。Uncaught TypeError: parent.getTitle is not a functionparent.getTitle?.()
let parent = {
name: "parent",
friends: ["p1", "p2", "p3"],
getName: function() {
console.log(this.name)
}
};
parent.getName?.() // parent
parent.getTitle?.() //不会执行
ボイドマージで使用
未定義を処理する方法、または null と式のデフォルト値を提供する方法を提供します。演算子を使用して??、式のデフォルト値を提供できます
console.log(undefined ?? 'codercao'); // codercao
したがって、void 合体演算子をオプションの連鎖演算子と組み合わせて使用すると、属性が存在しない場合にデフォルト値を指定できます。
let title = data?.children?.[0]?.title ?? 'codercao';
console.log(title); // codercao
2. 論理的な空の割り当て (?? =)
expr1 ??= expr2
論理 null 演算子は、値が null 値 (nullまたは)undefinedである場合にのみ expr1 に値を代入します。式は次のとおりです。
x ??= y
次と同等に見えるかもしれません:
x = x ?? y;
しかし、それは真実ではありません！微妙な違いがあります。
空の合体演算子 (??) は左から右に動作し、x がnull 値でない場合、中間の式は実行されません。したがって、 x がnullorでない場合undefined、式はy評価されません。関数の場合はy、まったく呼び出されません。したがって、この論理代入演算子は次と同等です。
x ?? (x = y);
3. 論理または代入 (|| =)
この論理代入演算子は、左側の式が偽値 (false value)である場合にのみ値を代入します。偽値 (false 値) は、未定義、null、空の文字列 (二重引用符 ""、一重引用符 ''、バッククォート ``)、 NaN、0。IE ブラウザーの document.all も 1 つと見なされます。
文法
x ||= y
に相当
x || (x = y)
これは、存在しない場合に既存の値を保持したい場合、または既存の値をデフォルト値に割り当てたい場合に便利です。たとえば、検索リクエストにデータがない場合、要素の内部 HTML をデフォルトに設定したいとします。それ以外の場合は、既存のリストを表示します。このようにして、不要な更新や、解析、再レンダリング、フォーカスの喪失などの副作用を回避します。この演算子を使用して、JavaScript を使用して HTML を更新できます。
document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'
4. 論理と代入 (&& =)
ご想像のとおり、この論理代入演算子は、左辺が真の場合にのみ値を代入します。したがって：
x &&= y
に相当
x && (x = y)
やっと
今回は、オプションのリンク演算子の使用に焦点を当てて、いくつかのエレガントな JavaScript 演算子の使用スキルを共有します。これにより、この例で多くのコードを記述することなく、ネストされたプロパティに簡単にアクセスできます。ただし、IE ではサポートされていないため、そのバージョンまたはそれ以前のブラウザーをサポートする必要がある場合は、Babel プラグインを追加する必要がある場合があります。Node.js の場合、12.x はそのバージョンをサポートしていないため、これには Node 14 LTS バージョンにアップグレードする必要があります。