一般的でない js 演算演算子の概要

一般的でない js 演算演算子の概要

1. はじめに

js には多くの演算子があり、以前の記事でも触れました。例えば:

js 整数演算:

|0~~使用すると浮動小数点数を整数に変換でき、同様のparseIntMath.roundよりも効率が速くなります。ピクセルやアニメーションの変位効果を処理するときに非常に便利です。パフォーマンスの比較については、こちらをご覧ください。

var foo = (12.4 / 4.13) | 0; // 結果は3
var bar = ~~(12.4 / 4.13); //結果は3


もう一つの小さなトリックがあります、それは!!2感嘆符を使用すると、値をブール値にすばやく変換できます。テストできます!

var eee="eee";
警報(!!eee)


これらはいくつかの演算子です。詳細については、49 の JavaScript のヒントとコツを参照してください。js 演算子は単一の縦棒 "|" です。

今日はさらにいくつか追加します:

2. カンマ演算子

x = 1 とします。
関数 x は、次の式で表されます。
コンソールログ(x);
// 期待される出力: 2
2 = (2, 3) である。
コンソールログ(x);
// 期待される出力: 3

コンマ演算子は、右側の引数よりも左側の引数を評価します。右端の引数の値が返されます。

var a = 10、b = 20;

関数 CommaTest(){
    a++、b++、10 を返します。
}

var c = カンマテスト();

alert(a); // 11 を返す
alert(b); // 21 を返す
alert(c); // 10 を返す

関数呼び出し演算子について理解できたので、その競合を処理する方法を示す例を見てみましょう。

alert(2*5, 2*4); // 出力10

上記のコードは 10 を出力しますが、コンマ演算子の原則に従って解釈すると 8 を出力する必要があります。なぜ?

カンマ演算子はJavaScriptでは優先順位が最も低いため、覚えておくと非常に便利です。したがって、関数呼び出し演算子はコンマ演算子の前に実行されます。その結果、アラート関数は最初のパラメータの値を出力します。上記のコードを以下のように変更します。

alert((2*5, 2*4)); // 8を返す

3. JavaScript Null 結合演算子 (??)

null合体演算子 (??) は、左のオペランドが null またはundefined場合にのみ右のオペランドを返し、それ以外の場合undefined左のオペランドを返す論理演算子です。

これは、左側のオペランドが false の場合に右側のオペランドを返す論理 OR 演算子 (||) とは異なります。つまり、|| を使用して特定の変数のデフォルト値を設定すると、予期しない動作が発生する可能性があります。たとえば、false の場合 (たとえば、'' または 0)。以下の例を参照してください。

str = null||未定義とする
result = str??'haorooms blog' とします。
console.log(result)//haorooms ブログ const nullValue = null;
const emptyText = ""; // 空の文字列、false値、Boolean("") === false
定数someNumber = 42;

const valA = nullValue ?? "valA のデフォルト値";
const valB = emptyText ?? "valB のデフォルト値";
const valC = someNumber ?? 0;

console.log(valA); // "valA のデフォルト値"
console.log(valB); // "" (空の文字列は false ですが、null または undefined ではありません)
console.log(valC); // 42

4. JavaScript オプション連鎖演算子 (?.)

オプションの連鎖演算子 ( ?. ) を使用すると、チェーン内の各参照が有効であることを明示的に検証することなく、接続されたオブジェクトのチェーンの奥深くにあるプロパティの値を読み取ることができます。 ?. 演算子は . 連鎖演算子と同様に機能しますが、参照が null の場合 (null または undefined) にエラーが発生しず、式が戻り値を短絡する点が異なります。

オプションの連鎖演算子 (?.) を使用すると、ブラウザはエラーを報告しません。

const デモ = {
    名前: 'haorooms'、
    猫: {
        名前: 「ハオルームス猫」
    }
};
console.log(demo.dog?.name); 
// 期待される出力: 未定義
console.log(demo.what?.());
// 期待される出力: 未定義


関数呼び出し:

結果を someOne.customMethod?.() とします。

someOne nullまたはundefinedにできるようにするには、次のようにsomeOne?.customMethod?.()を記述する必要があります。

式によるオプションの連鎖:

nestedProp = obj?.['prop' + 'Name']とします。

配列にアクセスするためのオプションの連鎖:

arrayItem = arr?とします。[42];

短絡計算:

潜在的にNullObj = null とします。
x = 0 とします。
prop = 潜在的にNullObj?.[x++] とします。

 
console.log(x); // x は増加せず、0 を出力します

//式でオプションの連鎖を使用する場合、左のオペランドがnullまたは未定義の場合、式は評価されません。let customer = {
  名前: "haorooms",
  詳細: { 年齢: 82 }
};

customerCity = customer?.city ?? "中国" とします。
console.log(customerCity); // "中国"

珍しい js 演算演算子のまとめに関するこの記事はこれで終わりです。より関連性の高い js 演算演算子のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • これまでにないほど詳細に解説されたJavaScript演算子
  • JavaScript の基本演算子
  • js の一般的でない演算子と演算子の概要
  • JS の効率的なマジック演算子の概要
  • JS のあらゆる場所で絶対等価演算子の使用をやめる
  • いつものJS演算子の説明を見てみましょう

<<:  開発にVscodeとdockerを組み合わせて使用​​する詳細なプロセス

>>:  CSSは、閉じることができるマスクレイヤーを備えたポップアップウィンドウ効果を実装します。

推薦する

chkconfig および systemctl コマンドを使用して Linux サービスを有効または無効にする方法

これは Linux 管理者にとって重要な (そして素晴らしい) トピックなので、誰もが Linux ...

Linux で fdisk を使用してディスクをパーティション分割する方法

Linux パーティションでよく使用されるコマンド: fdisk、MBR パーティション テーブルの...

Centos7 に Nginx 統合 Lua サンプル コードをインストール

序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...

docker ベースの redis-sentinel クラスターの構築例

1. 概要Redis Cluster は、Redis ノードのグループ間での高可用性とシャーディング...

MySQL の分離レベルの包括的な分析

データベースが同じデータ バッチを同時に追加、削除、および変更すると、ダーティ書き込み、ダーティ読み...

Mysql での結合操作

結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...

Tomcat マルチインスタンスの展開と構成の原則

1. ファイアウォールをオフにし、Tomcatのインストールに必要なソフトウェアパッケージを/opt...

MySQL 分離レベル操作プロセスの詳細説明 (cmd)

コミットされていない読み取りの例の操作プロセス - コミットされていない読み取り1. 2 つの My...

Vue を使用した Amap アプリケーション開発のベスト プラクティス

目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...

プロフェッショナルなMySQL開発設計仕様とSQL記述仕様

チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...

Vueがsweetalert2プロンプトコンポーネントを統合する際の問題についてお話ししましょう

目次1. プロジェクト統合1. CDNインポート方法: 2. 箱の梱包を確認する3. 迅速な箱詰め4...

HTML テーブル マークアップ チュートリアル (9): セル間隔属性 CELLSPACING

テーブルがコンパクトになりすぎないように、テーブル内のセル間に一定の距離を設定できます。基本的な構文...

MySQL の on と where における左結合設定条件の使用法の違いの分析

この記事では、MySQL の左結合における on 条件と where 条件の使用法の違いを例を使って...

HTML でのフォームとフォーム送信操作に関する情報のコレクション

ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...

JS で Websocket ベースのマルチターミナル ブリッジング プラットフォームを実装する方法

目次1. デバッグ対象2. WebSocketの機能3. ソケット接続を確立する3.1 部屋の作成方...