>  기사  >  웹 프론트엔드  >  JS 유형 변환의 함정에 대해 논의해 보겠습니다.

JS 유형 변환의 함정에 대해 논의해 보겠습니다.

阿神
阿神원래의
2017-01-23 14:18:041176검색

왜 이런 말을 하는 걸까요?
이 말을 하게 된 계기가 된 한 인터뷰 질문이 있었습니다.
질문은 다음과 같습니다.

var bool = new Boolean(false);
if (bool) {
    alert('true');
} else {
    alert('false');
}

실행 결과가 참입니다! ! !
사실 형변환, 연산자 우선순위 이런게 다 가장 기본이에요.
코뿔소 책에 자세한 소개가 있습니다. 하지만 저는 Rhino 책의 처음 5장을 거의 읽지 않았습니다. . .
예를 들어 우선순위에 대해 많은 책에서는 "우선순위를 외울 필요는 없습니다. 확실하지 않으면 괄호만 추가하면 됩니다."
우리는 보통 코드를 작성할 때 이렇게 합니다.
그런데 현실은 어떤가요? 면접 시 이런 질문이 나오며 이에 대한 답변을 하게 됩니다. . .
이 질문의 의미를 잘 모르겠습니다. . .
불만은 여기서 그치겠습니다. 이 글은 "JS Definitive Guide" 49페이지의 표를 참고하여 타입 변환 문제를 해결해 보려고 합니다.
가짜 가치란 무엇인가요?
총 6개 :

0或+0、-0,NaN
""
false
undefined
null

위 순서는 기본형에 따라 정리하였습니다.
다른 건 없어요! ! 다음 형식이더라도:

Infinity
'0'、'false'、" "(空格字符)
任何引用类型:[],{},function(){}

if (a && b)를 이해하는 올바른 방법은 다음과 같습니다. a && b는 표현식을 평가한 다음 부울 유형으로 변환합니다. .
&&는 평가 후 꼭 Boolean 타입일 필요도 없고, 양쪽 모두 Boolean 값으로 변환해서 연산하는 것도 아닙니다.
예를 들어 2&&3의 결과는 3인데 이는 사실이 아닙니다.
그래서 if(a && b), 우리가 일반적으로 이해하는 "a와 b가 동시에 참인 경우"는 잘못된 설명 방식입니다.
기타 기본 유형은 기본적으로 예상대로 문자열로 변환됩니다 :

console.log("" + null);      // "null"
console.log("" + undefined); // "undefined"
console.log("" + false);     // "false"
console.log("" + true);      // "true"
console.log("" + 0);         // "0"
console.log("" + NaN);       // "NaN"
console.log("" + Infinity);  // "Infinity"

기타 기본 유형은 숫자로 변환됩니다 , 특수 메모리가 필요함:

console.log(+null);          // 0
console.log(+undefined);     // NaN
console.log(+false);         // 0
console.log(+true);          // 1
console.log(+"");            // 0
console.log(+'1');           // 1
console.log(+'1x');          // NaN

null인 경우 빈 문자는 0이고 정의되지 않음은 NaN입니다.
위에는 기본적인 타입 변환에 대해 명확하게 설명되어 있습니다.

참조 유형을 기본 유형으로 변환하는 방법을 살펴보겠습니다.
부울로 변환된 참조 유형, 항상 true
문자열로 변환된 참조 유형

1.优先调用toString方法(如果有),看其返回结果是否是原始类型,如果是,转化为字符串,返回。
2.否则,调用valueOf方法(如果有),看其返回结果是否是原始类型,如果是,转化为字符串,返回。
3.其他报错。

숫자로 변환된 참조 유형

1.优先调用valueOf方法(如果有),看其返回结果是否是基本类型,如果是,转化为数字,返回。
2.否则,调用toString方法(如果有),看其返回结果是否是基本类型,如果是,转化为数字,返回。
3.其他报错。

먼저 공통 참조 유형인 toString과 valueOf가 무엇을 반환하는지 살펴보겠습니다.

var a = {};
console.dir(a.toString());   // "[object Object]"
console.dir(a.valueOf());    // 对象本身
 
var b = [1, 2, 3];
console.dir(b.toString());   // "1,2,3"
console.dir(b.valueOf());    // 对象本身
 
var c = [[1],[2]];
console.dir(c.toString());   // "1,2"
console.dir(c.valueOf());    // 对象本身
 
var d = function() {return 2};
console.dir(d.toString());   // "function() {return 2}"
console.dir(d.valueOf());    // 对象本身

따라서 해당 문자열과 숫자로의 변환은 다음과 같습니다:

var a = {};
console.dir(a + "");         // "[object Object]"
console.dir(+a);             // NaN
 
var b = [1, 2, 3];
console.dir(b + "");         // "1,2,3"
console.dir(+b);             // NaN
 
var c = [[1],[2]];
console.dir(c + "");         // "1,2"
console.dir(+c);             // NaN
 
var d = function() {return 2};
console.dir(d + "");         // "function () {return 2}"
console.dir(+d);             // NaN

또 다른 오류 상황:

var a = {};
a.toString = function() {return {};}
console.log("" + a);         // 报错
console.log(+a)              // 报错

위의 유형 변환 규칙은 기본적으로 완료되었습니다.

마지막으로 악의 "=="에 대해 이야기해보겠습니다.
인터뷰 질문은 다음과 같습니다.

rree

사실이 나올 줄 알았습니다. 맙소사! 왜 거짓인가요?
하하. . .
이중 등호, 양쪽의 유형이 다른 경우 암시적 변환이 발생합니다. Rhino 책 75페이지에서는 이를 다음과 같이 요약합니다:

var a = false;
var b = undefined;
if (a == b) {
    alert('true');
} else {
    alert('false');
}

따라서

1,null和undefined,相等。
2,数字和字符串,转化为数字再比较。
3,如果有true或false,转换为1或0,再比较。
4,如果有引用类型,优先调用valueOf。
5,其余都不相等。

0 == false 항목 3에 따르면 true입니다.
3조에 따르면 "" == false가 true인 이유는 2조에 따르면 "" == 0이 됩니다.
Article 4의 또 다른 예:

console.log(undefined == false); // false
console.log(null == false);      // false
console.log(0 == false);         // true
console.log(NaN == false);       // false
console.log("" == false);        // true

위 결과는 다음과 같은 이유로 true입니다.
[[2]]의 valueOf는 기본 유형이 아닌 객체 자체입니다.
toString 호출을 시도한 결과는 '2'입니다.
그래서 '2'와 숫자 2의 비교가 됩니다. 제2조에 따르면 동등하다. WTF!!
마지막으로 "==="를 사용하면 이러한 문제가 해결됩니다.
이 글은 끝났습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.