JavaScript における型の必須および暗黙的な変換の詳細な説明

JavaScript における型の必須および暗黙的な変換の詳細な説明

1. 暗黙的な変換

次のステートメントを実行した結果は何でしょうか?

A. 未定義 == null
B. isNaN("100")
C. parseInt("1a") === 1
D. [ ] 配列のインスタンス

答え:

A. undefined == null は真、 undefined === null は偽

B. NaN または NaN に変換できる値が渡された場合、isNaN は true を返します。「100」は最初に Number–>100 に変換されますが、これは NaN ではないため、false を返します。

C. parseInt("1a") は数字が先行する部分のみを解析します。つまり、"1" のみが解析され、parseInt("1a1") === 1 も真となります。

D. [ ] が空の配列の場合、trueを返します

二重等号での変換

ウォーミングアップが終わったら、コードの一部を見てみましょう。

もし ([]) {
  コンソールログ(true);
}

結果は真実です。

実際、[] は false です。等号を比較する場合、片側がブール値であれば、両側のデータが最初に数値に変換されるからです。
今すぐ:

数値([]); // 0
数値(偽); // 0

したがって[]は偽です。

ただし、if ステートメントを作成すると、データはブール型に変換されます。

今すぐ:

ブール値([]); // 真

したがって、true を出力できます。

二重等号の判定に関するいくつかのテクニックをまとめます。

  1. 二重等号の前後に NaN がある場合は、常に false が返されます。
  2. 二重等号の前後にブール値(0と1を含む)がある場合、比較前にすべて数値に変換されます(falseは0、trueは1)。
  3. 二重等号の前後に文字列がある場合、次の 3 つのケースが考えられます。
    1. もう一方の端がオブジェクトの場合、そのオブジェクトは toString または ValueOf を使用して変換されます。
    2. もう一方の端は数値、つまり文字列から数値です。
    3. もう一方の端は文字列であり、直接比較されます。
    4. その他はすべて false を返します。
  4. 片側が数字で、もう一方が「3」などの文字列の場合は、3 番目の項目を参照してください。もう一方の端はオブジェクトであり、オブジェクトの toString または ValueOf の結果が比較に使用され、それ以外の場合は false が返されます。
  5. null と undefined は型変換されませんが、等しいです。

ブール型変換

var test = new Boolean();
コンソールにログ出力します。

var test = new Boolean(0);
コンソールにログ出力します。

var test = new Boolean(null);
コンソールにログ出力します。

var test = new Boolean("");
コンソールにログ出力します。

var test = new Boolean(NaN);
コンソールにログ出力します。

答えは次のとおりです。

偽 偽 偽 偽 偽

仕組みは次のとおりです:

  1. コンストラクターとして呼び出されると (operator new を使用)、Boolean() は引数をブール値に変換し、その値を含むブール オブジェクトを返します。返されるオブジェクトはブール オブジェクトであり、toString または valueOf を介してアクセスできることに注意してください。
  2. 関数として呼び出された場合(operator new なし)、Boolean() は引数をプリミティブ ブール値に変換し、その値を返します(強制的な型変換)。
  3. 値パラメータが省略されているか、0、-0、null、""、false、undefined、または NaN に設定されている場合、オブジェクトは false に設定されます。それ以外の場合は true に設定されます (値パラメータが文字列 "false" の場合でも)。

「+」と「-」

コンソールログ(1 + "2" + "2");
コンソールログ(1 + +"2" + "2");
console.log("A" - "B" + "2");
console.log("A" - "B" + 2);

出力は何ですか?

結果は次のようになります: 122 32 NaN2 NaN

分析:

  1. 数値と文字列を追加すると、数値が文字列に変換されるため、結果は文字列の連結になります。最初の文は「122」を出力します。
  2. +"2" の場合、ここでの単項演算子 + は文字列を数値に変換するため、1+ +"2" = 1+2 = 3 となり、次の文字列と結合されるため、2 番目の文では "32" が出力されます。
  3. マイナス記号は、まずマイナス記号の両辺を数値に変換し、Number("A") と Number("B") の結果は NaN になります。減算演算では、片側が NaN である限り、結果は NaN になります。したがって、3 番目の文は NaN と "2" の連結であり、結果は NaN2 になります (ポイント 4.1 で述べたように、二重等号の片側が NaN の場合、結果は false になります)。
  4. 前の文の分析によると、「A」-「B」の結果はNaNであり、数値2を加算しても結果は依然としてNaNである。

2. 強制型変換

a の整数部分を抽出するためのコード var a = 10.42; の場合、次のコードのうち正しいものはどれですか。

A.parseInt(a);
B. Math.floor(a);
C. Math.ceil(a);
D. a.split('.')[0];

答え: AB

多くの人は一目見てABCを選ぶでしょう。

分析:

A. parseInt は整数に変換されます。デフォルトは 10 進数で、結果は 10 になります。

B. floor は切り捨てられ、結果は 10 になります。floor は floor を意味し、切り捨てられ、記憶に役立ちます。

C. ceil は切り上げられ、結果は 11 になります。

D. 分割オペランドは正規表現または文字列である必要があります。そうでない場合は TypeError が発生します。

' ' を含む新しい文字列

次のどれが正しいでしょうか?

A. 'foo' == new function(){ return String('foo'); };
B. 'foo' == new function(){ return new String('foo'); };
C. [] == 0
D. ![]
E: !0

答え:

A: 以下に詳しく説明します。

B: 詳しく説明しましょう。
C: Number([]) の結果は 0 なので、オプション C が正解です。
D: オブジェクトは常に true に等しいのですが、空のオブジェクト == true または === true と判断した結果が常に false になるのはなぜですか?

二重等号の概要によると、二重等号の片側がブール値の場合、両側が数値型に変換されます。したがって、コンソールが空のオブジェクト == true または === true をテストする場合、実際には空のオブジェクト == 1 または === 1 が実行されているため、false が返されます。したがって、オブジェクトが常に true に等しいことを確認する場合は、!{} と !!{} を使用する必要があります。!{}; // false; !!{}; // true

E: Boolean(0) == false なので、!0 = true となり、正解です。

オプション AB について説明しましょう。new キーワードの使用と関数コンストラクターの呼び出しにより、結果は予期しません。

まず、コンストラクタが new で呼び出された場合、内部的に参照オブジェクト (配列、オブジェクト、関数など) が返されると、new によって作成された匿名オブジェクトが上書きされることを知っておく必要があります。

プリミティブ型が返される場合 (明示的な戻りがない場合、実際には undefined が返されます)、new によって作成された匿名オブジェクトが返されます。

どうやら

オプション A では、コンストラクターは文字列を返すため、最後のコンストラクターは new によって作成された匿名オブジェクト (空のオブジェクト) を返します。

オプション B では、コンストラクター内で文字列オブジェクトが返されるため、最後のコンストラクターはこのオブジェクトを返します。

要約する

JavaScript の必須型変換と暗黙型変換に関するこの記事はこれで終わりです。JavaScript の必須型変換と暗黙型変換の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript によるデータ視覚化: ECharts マップの作成
  • 非常に詳細な基本的なJavaScript構文ルール
  • JavaScriptはスライダーを介してWebページの色を変更することを実装します
  • JavaScript es6 における var、let、const の違いの詳細な説明
  • JavaScript における this ポイントの問題の詳細な説明
  • JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ
  • JavaScript における Arguments オブジェクトの使用に関する詳細な説明
  • JavaScript CollectGarbage 関数の例
  • JavaScript における BOM と DOM の詳細な説明
  • JavaScript の setTimeout と setTimeinterval の使用例の説明
  • 期間限定フラッシュセール機能を実現するJavaScriptタイマー
  • 期間限定フラッシュセール機能を実装するJavaScript
  • JavaScript オブジェクト (詳細)

<<:  MySQL での SQL モードの表示と設定の詳細な説明

>>:  CentOS 7 でソースコードから Openssh をインストールする方法

推薦する

MySQL 5.7.24 のインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.24のインストールと設定のチュートリアルを参考までに紹介します。具...

zabbix 4.04 の詳細なインストール チュートリアル (CentOS 7.6 ベース)

1. インストール前の準備: 1.1 JDKをインストールするopenjdkをアンインストールする...

MySQL で二重引用符の位置が誤っていたために起きた殺人事件の詳細な分析

1. はじめに最近、開発者が誤ってデータを削除したり更新したりするケースがよくあります。今回もまた問...

レスポンシブWebデザイン学習(1) - 画面サイズと使用率の決定

最近では、モバイルデバイスがますます普及しており、ユーザーがスマートフォンやタブレットを使用して W...

MySQL テーブルをコピーする 3 つの方法 (要約)

テーブル構造とそのデータをコピーする次のステートメントは、データを新しいテーブルにコピーします。注:...

HTML テキストフォーマットの簡単な例 (詳細な説明)

1. テキストの書式設定: この例では、HTML ファイル内のテキストを書式設定する方法を示します...

nginxサーバーのダウンロード、インストール、使用方法の詳細な説明

ダウンロードhttp://nginx.org/en/download.html解凍ダウンロードしたn...

Windows での MySQL 8.X インストール チュートリアル

以前は MySQL 5.7 を使用していましたが、MySQL にいくつか新しい機能が追加されたため、...

Linux 上のカラフルな猫

Linux システムを使用したことがある友人なら、 catコマンドを使用したことがあるはずです。もち...

MySQLでカーソルトリガーを使用する方法

カーソル選択クエリによって返される行のセットは、結果セットと呼ばれます。結果セット内の行は、入力した...

CentOS7 は yum を使用して mysql 8.0.12 をインストールします

この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...

HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...

MySQL 5.7.20 無料インストールバージョンの設定方法グラフィックチュートリアル

インターネット上で多くの関連チュートリアルを見てきましたが、インストール プロセスにはまだいくつかの...

通知メッセージカルーセルを実装するための CSS3 トランジション

Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...

MySQL データ型 DECIMAL(N,M) における N と M の意味の詳細な説明

同僚から、MySQL データ型 DECIMAL(N,M) の N と M の意味を尋ねられました。言...