JavaScript의 연산자 유형 변환(그래픽 튜토리얼)

최근 프론트엔드 면접 질문에 연산자 유형 변환 질문이 자주 나오는 걸 발견했는데, JavaScript로 연산자 유형 변환 예시를 요약해두었습니다. 필요하신 분들은 참고하시면 됩니다

먼저 질문을 해보세요! 통일을 위해 이러한 질문을 함께 작성하지 않겠습니다. 인터뷰 질문에서 이러한 질문이 종종 혼동되어 더 쉽게 설명하기 위해 여기에 몇 가지 질문을 작성했습니다. 당신은 볼 수 있습니다!

연산자 문자열의 암시적 변환
Multiplication

 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("-------以上乘法---------");

Division

 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("-------以上除法---------");

Remainder, modulus

 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("-------以上取余、求模---------");

Addition

 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("-------以上加法--------");

Subtraction

 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. 두 값이 모두 숫자이면 직접 곱셈을 수행합니다(누구나 할 수 있다고 믿습니다. 초등학교 수학과 동일합니다. 동시에 주의하세요. 숫자의 부호), 제품 값이 ECMAscript의 수치 표현 범위를 초과하면 Infinity(양의 무한대) 또는 -Infinity(음의 무한대)가 반환됩니다. 2. 숫자가 반환되는 경우. NaN, 결과는 NaN입니다. 3. Infinity가 0 Multiply와 같으면 결과는 NaN
4입니다. 한 연산자는 숫자이고 다른 연산자는 숫자 값이 아닌 경우 먼저 Number() 함수를 사용하여 변환합니다. , 변환된 값에 숫자를 곱합니다. 변환된 결과가 NaN으로 나타나면 결과는 NaN입니다.

Division

 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

Remainder이고 모듈로
Remainder가 사용된다는 점입니다. 프로젝트 가장 일반적인 것은 홀수와 짝수를 찾을 때입니다. 우리는 나머지를 구하기 위해 종종 값과 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입니다. 배당금은 유한 값이고 제수는 0이면 결과는 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

3 숫자에서 Infinity를 뺀 결과는 Infinity-(-Infinity)입니다. )가 Infinity

5인 경우 피연산자가 객체인 경우 객체 valueOf 메서드를 호출합니다. 결과가 NaN입니다. 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

관계 연산자의 암시적 변환 원리에 대해 이야기해 보겠습니다.

여전히 위와 동일합니다. 동일한 것에 대해서는 이야기하지 않겠습니다.

비교되는 두 숫자가 모두 문자열인 경우 해당 문자열에 해당하는 문자열 인코딩 값이 비교됩니다.

덧셈 연산의 암묵적 변환

마지막으로 말씀드리는 이유는 덧셈 연산의 암묵적 변환이 이전의 모든 연산 기호와 다르기 때문입니다. , 다른 하나는 기본적으로 사용됩니다. Number()는 숫자 변환을 수행합니다. 추가 작업이 다릅니다. 덧셈 연산 중 하나가 문자열이면 다른 하나는 문자열로 변환된 다음 문자열이 연결됩니다!

 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" 또는 "undefine" 문자열을 얻은 다음 이를 연결합니다.

2. null 또는 undefine이 숫자에 추가된 경우 null 또는 undefine을 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

Javascript 객체 리터럴 이해(그래픽 튜토리얼)

위 내용은 JavaScript의 연산자 유형 변환(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!