JavaScript での演算子の型変換 (グラフィック チュートリアル)

最近、フロントエンドの面接の質問で演算子の型変換の質問がよく出てくることがわかったので、JavaScript での演算子の型変換の例をまとめましたので、必要な方は参考にしてください

まず、いくつか質問してみましょう。統一するために、面接の質問ではこれらの質問が混同されることがよくあるため、まとめて書きません。説明しやすくするために、いくつかの質問をモジュールにまとめました。見てみることができます！

演算子文字列の暗黙的な変換
乗算

 console.dir("-------以下乘法---------");
 console.dir(5*"5");
 console.dir(5*"a");
 console.dir(5*NaN);
 console.dir(5*null);
 console.dir(5*undefined);
 console.dir(5*5);
 console.dir("-------以上乘法---------");

除算

 console.dir("-------以下除法---------");
 console.dir(5/"5");
 console.dir(5/"a");
 console.dir(5/NaN);
 console.dir(5/null);
 console.dir(null/5);
 console.dir(5/undefined);
 console.dir(5/5);
 console.dir(5/0);
 console.dir(0/5);
 console.dir(0/0);
 console.dir("-------以上除法---------");

剰余、剰余

 console.dir("-------以下取余、求模--------");
 console.dir(16%"5");
 console.dir(5%"a");
 console.dir(5%NaN);
 console.dir(5%null);
 console.dir(null%5);
 console.dir(5%undefined);
 console.dir(5%5);
 console.dir(5%0);
 console.dir(0%5);
 console.dir(0%0);
 console.dir("-------以上取余、求模---------");

加算

 console.dir("-------以下加法--------");
 console.dir(16+"5");
 console.dir(5+"a");
 console.dir(5+NaN);
 console.dir(5+null);
 console.dir(5+undefined);
 console.dir(5+5);
 console.dir("两个数的和是"+5+5);
 console.dir("两个数的和是"+(5+5));
 console.dir("-------以上加法--------");

減算

 console.dir("-------以下减法--------");
 console.dir(16-"5");
 console.dir(5-"a");
 console.dir(5-NaN);
 console.dir(5-null);
 console.dir(5-undefined);
 console.dir(5-5);
 console.dir(5-true);
 console.dir(5-"true");
 console.dir(5-"");
 console.dir("两个数的差是"+5-5);
 console.dir("两个数的差是"+(5-5));
 console.dir("-------以上减法--------");

関係演算子

 console.dir("-------以下关系操作符--------");
 console.dir(16>"5");
 console.dir("16">"5");
 console.dir(5<"a");
 console.dir(5>=NaN);
 console.dir(5<NaN);
 console.dir(NaN>=NaN);
 console.dir(5>=null);
 console.dir(5>=undefined);
 console.dir(5>=5);
 console.dir(5>=true);
 console.dir(5>="true");
 console.dir(5>="");
 console.dir("Brick">"alphabet");
 console.dir("brick">"alphabet");
 console.dir("-------以上关系操作符--------");

乗算

 console.dir(5*"5"); //25
 console.dir(5*"a");//NaN
 console.dir(5*NaN);//NaN
 console.dir(5*null);0
 console.dir(5*undefined);//NaN
 console.dir(5*5);//25

乗算の暗黙の変換原理について話しましょう:

1. 2 つの値が両方とも数値の場合、乗算を直接実行します (小学校の数学と同じで、誰でもできると思います)。数値の符号) に注意し、積の値が ECMAscript の数値表現範囲を超える場合は、Infinity (正の無限大) または -Infinity (負の無限大) を返します。 NaN、結果は NaN です。 3. Infinity が 0 に等しい場合、乗算の結果は NaN
4. 一方の演算子が数値で、もう一方の演算子が数値でない場合は、最初に Number() 関数を使用して変換します。 、変換された値に数値を掛けます。変換された結果が NaN である場合、結果は NaN になります。

除算

 console.dir(5/"5");//1  将字符转化为数字进行相除
 console.dir(5/"a");//NaN  将“a”用Number()函数进行转化，出来的值是NaN，结果就是NaN
 console.dir(5/NaN);//NaN
 console.dir(5/null);//Infinity null用Number()函数进行转化，结果是0，那么5/0是正无穷
 console.dir(null/5);//0 同上0/5是0
 console.dir(5/undefined);//NaN  undefined 用Number()进行转化，结果是NaN
 console.dir(5/5);//1
 console.dir(5/0);//Infinity
 console.dir(0/5);//0
 console.dir(0/0);//NaN //0除以0结果是NaN

除算の暗黙の変換原理について話しましょう:

乗算に似ていますが、唯一の違いは、0/0の結果がNaN

剰余であり、modulo
剰余が使用されることです。プロジェクト 最も一般的なのは、奇数と偶数を見つける場合です。剰余を求めるには、値と 2 を使用することがよくあります。結果が 0 の場合、その数値は偶数であり、結果が 1 の場合、その数値は奇数です。

上の質問を見てください:

 console.dir(16%"5"); //1 将字符串5通过Number()转化为5然后进行求余
 console.dir(5%"a");//NaN
 console.dir(5%NaN);//NaN
 console.dir(5%null);//NaN 将null 通过Number()转化，结果是0，然后计算5%0 ，结果是NaN
 console.dir(null%5);//0 同上0%5 取余，结果是0
 console.dir(5%undefined);//NaN
 console.dir(5%5);//0
 console.dir(5%0);//NaN
 console.dir(0%5);//0
 console.dir(0%0);//NaN
console.dir(Infinity%Infinity);//NaN
console.dir(5%Infinity);//5
 console.dir(Infinity%5); //NaN

剰余の暗黙の変換原理について話しましょう:

乗算と同じです。特別な部分について話しましょう!被除数と除数の概念は小学校で習ったので誰もが知っています。

1. 被除数が無限で、除数が有限の場合、結果は NaN

2、被除数が有限の場合、結果は Infinity%Infinity になります。結果は NaN

4 です。被除数は有限値、除数は無限値、結果は被除数です。
5. 被除数は 0、結果は 0 です

減算

上の例を見てください。

 console.dir(16-"5");//11
 console.dir(5-"a");//NaN
 console.dir(5-NaN);//NaN
 console.dir(5-null);//5
 console.dir(5-undefined);//NaN
 console.dir(5-5);//0
 console.dir(5-true);//4
 console.dir(5-"true");//NaN
 console.dir(5-"");//5
 console.dir(5-Infinity);//-Infinity
 console.dir(Infinity-Infinity);//NaN
 console.dir("两个数的差是"+5-5);//NaN
 console.dir("两个数的差是"+(5-5));//两个数的差是0

引き算の暗黙の変換原理について話しましょう:

上と同じですが、同じものについては説明しません。引き算に特有のものについて話します。

1. Infinity-Infinity の結果は NaN

2、-Infinity-Infinity の結果は -Infinity

3、Infinity-(-Infinity) の結果は -Infinity です。 ) が Infinity

5 の場合、オペランドがオブジェクトの場合、結果が NaN の場合は、オブジェクトの valueOf メソッドを呼び出します。 valueOf メソッドがない場合は、toString() メソッドが呼び出され、結果の文字列が数値に変換されます。

関係演算子


関係演算子は一律に true または false を返します

 console.dir(16>"5"); //true
 console.dir("16">"5");//false
 console.dir(5<"a");//false
 console.dir(5>=NaN);//false
 console.dir(5<NaN);//false
 console.dir(NaN>=NaN);//false
 console.dir(5>=null);//true
 console.dir(5>=undefined);//false
 console.dir(5>=5);//true
 console.dir(5>=true);//true
 console.dir(5>="true");//false
 console.dir(5>="");//true 
 console.dir("Brick">"alphabet");//false B的字符串编码值是66 ，而a的字符串编码是97.因此false
 console.dir("brick">"alphabet");//true 小写字母b比a大，所以是true

関係演算子の暗黙の変換原理について話しましょう:

それは上記と同じです。同じものについては説明しません。

比較される 2 つの数値が両方とも文字列である場合、文字列に対応する文字列エンコード値が比較されます。

加算演算

加算演算の暗黙的な変換は、1 つが数値である限り、これまでの演算記号とは異なるためです。もう 1 つはデフォルトで使用され、Number() は数値変換を実行します。加算演算が異なります。加算演算の 1 つが文字列である限り、もう 1 つは文字列に変換され、文字列が連結されます。

 console.dir(16+"5"); //156
 console.dir(5+"a");//5a
 console.dir(5+NaN);//NaN
 console.dir(5+null);//5
 console.dir('5'+null);//5null
 console.dir(5+undefined);//NaN
 console.dir(null+undefined);//NaN
 console.dir(5+5);//10
 console.dir("两个数的和是"+5+5);//两个数的和是55
 console.dir("两个数的和是"+(5+5));//两个数的和是10

加算演算子の暗黙的な変換原理について話しましょう:

1. 一方が文字列の場合、もう一方も結合のために文字列に変換されます。一方が文字列で、もう一方が null または未定義の場合、追加されると、null または未定義は String() メソッドを呼び出して文字列「null」または「未定義」を取得し、それを結合します。

2. null または未定義が数値に追加される場合は、null または未定義を Number() に変換してから追加する必要があります。

3. 残りの原則は他の原則と似ているため、詳細は説明しません。

二重等号の暗黙的な変換
次のコードを一度実行してください。自然に理解できると思います~

var a;

console.dir(0 == false);//true

console.dir(1 == true);//true

console.dir(2 == {valueOf: function(){return 2}});//true

console.dir(a == NaN);//false
console.dir(NaN == NaN);//false

console.dir(8 == undefined);//false

console.dir(1 == undefined);//false

console.dir(2 == {toString: function(){return 2}});//true

console.dir(undefined == null);//true

console.dir(null == 1);//false

console.dir({ toString:function(){ return 1 } , valueOf:function(){ return [] }} == 1);//true

console.dir(1=="1");//true

console.dir(1==="1");//false

上記は皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。 関連記事:

大規模なJavaScriptアプリケーションアーキテクチャの設計パターン(上級)

javascript

における未定義とnullの理解の詳細な解釈

JavaScriptオブジェクトリテラルの理解(グラフィックチュートリアル)

以上がJavaScript での演算子の型変換 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。