사악한 쌍둥이를 두려워하지 마십시오 - Sitepoint

JavaScript 개발자 인 Douglas Crockford는 한 번 JavaScript 및

운영자를 피해야 할 "사악한 쌍둥이"라고 언급했습니다. 그러나 일단 당신이 그것들을 이해하면,이 연산자들은 그렇게 나쁘지 않으며 실제로 유용 할 수 있습니다. 이 기사는 와

를 탐구하고, 그들이 어떻게 작동하는지 설명하고 더 잘 이해하는 데 도움이됩니다. == 키 포인트 != == !=

기본 사항을 이해합니다. 및

JavaScript의 연산자는 본질적으로 악한 것이 아닙니다. 시제없이 직접 유형 및 값 비교에

및

를 사용하는시기를 배우십시오. 이는 더 명확하며 일반적으로 예상치 못한 결과를 피하는 것이 좋습니다. 유형이 동적으로 변경 될 수있는 값을 캐스트하거나 비교해야 할 때 및
• 를 사용하십시오. 캐스트 규칙을 배우십시오 : 및 비교 중에 JavaScript 캐스트 유형에 익숙하여 결과를보다 정확하게 예측하고 일반적인 함정을 피하십시오. == 실제 예를 탐구하십시오. 예제를 살펴보면 문자열을 숫자 나 객체를 숫자 또는 객체를 원래 값과 비교하여 이해를 통합하는 등 다양한 시나리오에서 및 가 실행되는지 확인하십시오. !=
두려워하지 말고 조심하십시오 :
• 와 는 무섭지 않지만 코드에서 효과적이고 안전하기 위해 JavaScript의 유형 캐스트 ​​규칙을 잘 이해해야합니다. 장소 상에서. === !== == 문제가 발생하고 != 연산자
• javaScript 언어에는 와 및 및 의 두 세트의 평등 연산자 세트가 포함되어 있습니다. 왜 평등 운영자가 두 세트가 있는지 이해하고 어떤 운영자를 사용할 상황이 많은 사람들에게 혼란의 원천이었습니다. 연산자는 이해하기 어렵지 않습니다. 두 피연산자 유형이 동일하고 값이 동일 할 때 == returns != 및
returns . 그러나 값이나 유형이 다를 때
• 는 , reture 를 반환합니다. 두 개의 피연산자 유형이 동일 할 때 연산자는 동일하게 행동합니다. 그러나 유형이 다를 때 JavaScript는 하나의 피연산자를 다른 유형으로 캐스트하여 비교 전에 오페라를 호환 가능하게합니다. 결과는 다음과 같이 종종 혼란 스럽습니다 == 가능한 부울 값이 두 가지만 있기 때문에 표현식 중 하나는 로 계산되어야한다고 생각할 수 있습니다. 그러나 모두 !=로 계산됩니다. 패스 관계 (A가 B와 같고 B와 같으면 C와 같다)가 적용되어야한다고 가정 할 때 추가적인 혼란이 발생합니다.

  "this_is_true" == false // false
  "this_is_true" == true  // false

  이 예제는

  가 트랜스 혜택이 부족하다는 것을 보여줍니다. 빈 문자열이 숫자 0과 같고 숫자 0이 문자 0으로 구성된 문자열과 같으면 빈 문자열은 0으로 구성된 문자열과 같아야합니다. 그러나 그것은 사실이 아닙니다. 피연산자를 또는 를 통해 비교할 때 호환되지 않는 유형이 발생하면 JavaScript는 한 유형을 다른 유형으로 시전하여 비교할 수 있습니다. 반대로, 및 ==를 사용할 때는 유형 캐스트를 수행하지 않습니다 (이는 성능이 약간 향상됩니다). 다른 유형으로 인해 는 항상 두 번째 예에서 ==를 반환합니다. JavaScript를 제어하는 ​​규칙을 이해하는 규칙을 이해하는 규칙을 이해하는 규칙을 이해하는 규칙을 이해하는 규칙은 JavaScript가 다른 유형으로 오페라를 캐스트하는 방법을 제어하여 두 개의 피연산자 유형을 적용하기 전에 두 개의 피연산자 유형이 호환되도록합니다. 및 를 사용하는 것이 더 나은시기를 결정하고 자신감을 갖습니다. 이 연산자 사용. 다음 섹션에서는 != 및 연산자와 함께 사용 된 캐스트 규칙을 살펴 보겠습니다. === !== === 및 false는 어떻게 작동합니까? == 및 !=가 어떻게 작동하는지 배우는 가장 좋은 방법은 ecmascript 언어 사양을 연구하는 것입니다. 이 섹션은 ECMAScript 262에 중점을 둡니다. 사양의 11.9 절은 평등 연산자를 소개합니다. 연산자는 구문 생산 == 및 에 나타납니다. (1 세대와 달리, 2 세대는 != 연산자를 피합니다.) 아래에 표시된 세대를 확인해 봅시다. == != 이 세대에 따르면, 동등한 표현은 관계 적 표현, 또는 관계 적 표현과 동일한 동일한 표현 또는 관계 적 표현과 동일하지 않은 동일한 표현입니다. (이 기사와 관련이없는 및 를 간과했습니다.) 섹션 11.9.1은

  의 작동 방식에 대한 다음 정보를 제공합니다.

  생산 공식 는 다음과 같이 계산됩니다 == != 를 계산 한 결과로 둡니다.

  ==를 로하자. != == !=를 계산 한 결과로 둡니다. EqualityExpression EqualityExpressionNoIn in를 로하자. EqualityExpression 추상 평등 비교를 수행 한 결과를 반환합니다. (11.9.3 참조)

  '' == 0   // true
  0 == '0' // true
  '' == '0' // false

  섹션 11.9.2는 ==의 작동 방식에 대한 유사한 정보를 제공합니다. != 생산 공식 ===는 다음과 같이 계산됩니다

  1. lref를 계산 한 결과로 둡니다. EqualityExpression
  2. 를 로하자. lval GetValue(lref)
  를 계산 한 결과로 둡니다.
  3. rref RelationalExpression를 로하자.
  4. 를 추상 평등 비교를 수행 한 결과 rval를 수행하십시오. (11.9.3 참조) GetValue(rref)
  if 가 인 경우 를 반환하십시오. 그렇지 않으면
  5. 를 반환하십시오. r rval != lval
  6. 및 r는 및 연산자의 왼쪽과 오른쪽에있는 참조입니다. 각 참조는 true 내부 함수로 전달되어 해당 값을 반환합니다. 및 false 작업의 핵심은 11.9.3 절에 주어진 추상 평등 비교 알고리즘에 의해 지정됩니다. true
  비교 , 여기서 와
  는 값이므로 또는 를 초래합니다. 이 비교는 다음과 같이 수행됩니다
  1. 가 가 와 동일하면 Type(x) Type(y) if 가 인 경우 를 반환하십시오.
     1. if 가 인 경우 를 반환하십시오. Type(x) Undefined if 가 이면 입니다 true if 가 인 경우 를 반환하십시오.
     2. if 가 인 경우 를 반환하십시오. Type(x) Null 및 true가 동일한 숫자 값이면 를 반환하십시오.
     3. 가 0이고 Type(x)가 -0 인 경우 Number.
        1. 가 -0이고 x가 0이면 NaN가 반환됩니다. false
        return .
        2. y NaN false 가 인 경우, 및
        가 정확히 동일한 문자 순서 (동일한 길이와 해당 위치의 동일한 문자) 인 경우 가 반환됩니다. 그렇지 않으면
        3. 를 반환하십시오. x y 가 라면 와 가 둘 다 true이면 라면 라면 반환하십시오. 그렇지 않으면
        를 반환하십시오.
        4. x if 및 y if 동일한 개체를 참조하십시오. 그렇지 않으면 true를 반환하십시오.
        5. x y 가 이고 true가 인 경우 를 반환하십시오. false
        가 이고
        가 인 경우 를 반환하십시오. Type(x) String 가 이고 x가 y 인 경우 비교 결과가 반환됩니다. true false 가 이고
     가
     4. 인 경우 비교 결과가 반환됩니다. Type(x) Boolean 가 인 경우 비교 결과 가 반환됩니다. x y 가 인 경우 비교 결과 가 반환됩니다. true false 가 true이고 false가 인 경우, 비교 결과가 반환됩니다.
     5. x 이고 이고 y가 true이면 비교 결과가 반환됩니다. false
     return .
  2. 1 단계 1 단계는이 알고리즘에서 실행될 때 동일합니다. 그것은 x가 null와 같고 y가 와 같음을 보여줍니다.또한 아무것도 NaN (비자), 두 개의 동일한 값이 같고, 0은 -0에 같고, 길이가 같은 길이를 가진 두 개의 문자열이 동일하고, true equals true, 는 false와 같고 동일한 객체에 대한 두 참조는 동일합니다. 2 단계와 3 단계는 false가 를 반환하는 이유를 보여줍니다. JavaScript는 이러한 값이 동일하다고 간주합니다. 4 단계부터 시작하여 알고리즘이 흥미로워집니다. 이 단계는 null != undefined와 false이고 두 번째 피연산자가 Number 인 경우, 두 번째 피연산자는 의 내부 함수를 통해 String로 변환됩니다. 표현 는 재귀를 의미합니다. 5 단계는 4 단계와 같지만 첫 번째 피연산자는 Number 유형을 가지며 String 유형으로 변환해야합니다. 6 단계 및 7은 부울 피연산자를 ToNumber() 유형으로 변환하고 재귀 적으로 변환합니다. 다른 피연산자가 부울 인 경우 다음 에이 알고리즘이 실행될 때 Number로 변환됩니다. 성능의 관점에서 볼 때 두 가지 오페라가 부울 유형인지 두 가지 재귀 단계를 피할 수 있습니다. 9 단계는 피연산자의 유형이 x == ToNumber(y) 인 경우 피연산자가 String 내부 함수를 통해 원래 값으로 변환되고 알고리즘이 재귀 적으로 변환됨을 보여줍니다. 마지막으로, 알고리즘은 두 피연산자가 동일하지 않다고 생각하고 10 단계에서 Number를 반환합니다. 상세하지만 추상 평등 비교 알고리즘은 이해하기 쉽습니다. 그러나 알고리즘을 완전히 이해하기 위해 내부 작업을 노출 해야하는 내부 함수 Number 및 Number 쌍을 참조합니다. 함수는 매개 변수를 Object로 변환하고 섹션 9.3에 설명되어 있습니다. 다음 목록은 가능한 비 언어 매개 변수와 동등한 반환 값을 요약합니다.
     매개 변수가
     • 인 경우 Undefined를 반환하십시오. NaN 매개 변수가 인 경우 0을 반환합니다.
     매개 변수가 부울 값
     • 인 경우 1을 반환하십시오. 매개 변수가 부울 값 Null 인 경우 0을 반환하십시오.
     매개 변수 유형이 인 경우 입력 매개 변수가 반환됩니다 - 변환 없음.
     • 매개 변수의 유형이 true 인 경우 섹션 9.3.1“문자열 유형의 톤”이 적용됩니다. 구문으로 표시된 문자열 매개 변수에 해당하는 값을 반환합니다. 매개 변수가 표시된 구문과 일치하지 않으면 false를 반환하십시오. 예를 들어, "xyz"매개 변수는 를 유발합니다. 또한 매개 변수 "29"는 29의 수익을 초래합니다.
     • 매개 변수 유형이 인 경우 다음 단계를 적용하십시오. Number
     를 로하자.
     • String return . NaN NaN
     • Object 함수는 입력 매개 변수와 옵션
       매개 변수를 허용합니다. 입력 매개 변수는 비 객체 유형으로 변환됩니다. 객체를 여러 원시 유형으로 변환 할 수있는 경우
       1. primValue 프롬프트를 사용하여 선호하는 유형을 바이어스하십시오. 변환은 다음과 같이 수행됩니다 ToPrimitive(输入参数, 提示Number) 입력 매개 변수가
       인 경우 입력 매개 변수 ()가 반환됩니다 - 변환 없음.
       2. 입력 매개 변수가 ToNumber(primValue) 인 경우 입력 매개 변수 ()가 반환됩니다 - 변환 없음.
       입력 매개 변수 유형이 인 경우 입력 매개 변수를 반환합니다.
       입력 매개 변수 유형이 인 경우 입력 매개 변수를 반환합니다.
     입력 매개 변수 유형이 인 경우 입력 매개 변수를 반환합니다.
     입력 매개 변수의 유형이

     인 경우 입력 매개 변수에 해당하는 기본값이 반환됩니다. 오브젝트의 ToPrimitive() 내부 메소드를 호출하고 옵션 PreferredType 프롬프트를 전달하여 객체의 기본값을 검색하십시오. ToPrimitive()의 동작은 모든 기본 ECMAScript 객체에 대해 8.12.8 절에 정의됩니다. PreferredType

     이 섹션에서는 많은 이론을 소개합니다. 다음 섹션에서는
     및
     1. 와 관련된 다양한 표현을 제공하고 점차 알고리즘 단계를 완료함으로써 연습을 할 것입니다. Undefined Undefined 사악한 쌍둥이를 이해하십시오
     2. 이제 우리는 ecmascript 사양에 따라 Null와 Null가 어떻게 작동하는지 이해 했으므로 이러한 운영자와 관련된 다양한 표현을 탐색 하여이 지식을 활용하겠습니다. 우리는 이러한 표현을 평가하는 방법을 살펴보고 왜 그들이
     또는
     3. 인지 알아낼 것입니다. 첫 번째 예에서는 기사의 시작 부분 근처에 소개 된 다음 표현 쌍을 고려하십시오. Boolean 추상 평등 비교 알고리즘을 따르려면 다음 단계에 따라 이러한 표현식을 평가하십시오.
        유형이 다르기 때문에 1 단계를 건너 뜁니다.
        1. 는 "문자열"을 반환하고 또는 typeof "this_is_true"는 "부울"을 반환합니다. typeof false 피연산자 유형과 일치하지 않기 때문에 적용 할 수없는 2 ~ 6 단계를 건너 뜁니다. 그러나 오른쪽 매개 변수에는 유형 typeof true가 있으므로 7 단계는 적용됩니다. 표현식은
        및 로 변환됩니다.
        2. > 반환 0, Boolean는 1을 반환하며, 이는 각각 "this_is_true" == ToNumber(false) 및 로 표현식을 단순화합니다. 현재 알고리즘은 재귀 적으로. "this_is_true" == ToNumber(true) 피연산자 유형과 일치하지 않기 때문에 적용 할 수없는 단계 1에서 4 단계를 건너 뜁니다. 그러나 왼쪽 피연산자의 유형은
        이고 오른쪽 피연산자의 유형은
        3. 이기 때문에 5 단계는 적용됩니다. 표현식은 ToNumber(false) 및 로 변환됩니다. ToNumber(true) returns 는 각각 "this_is_true" == 0 및 "this_is_true" == 1로 표현식을 단순화합니다. 현재 알고리즘은 재귀 적으로.
        4. , 0 및 1의 유형은 모두 String이기 때문에 1 단계로 이동하십시오. 적용 할 수없는 단계 1.A 및 1.B를 건너 뜁니다. 그러나 1.c. i는 왼쪽 피연산자가 Number이기 때문에 적용됩니다. 알고리즘은 각각의 원래 표현식의 값으로 ToNumber("this_is_true") == 0 (ToNumber("this_is_true") == 1 자체를 포함하여 다른 것과 같지 않습니다)를 반환하고 재귀를 완전히 종료하기 위해 스택을 역 추적합니다.
        5. 내 두 번째 예 ( "Galaxy Wandering Guide"에서의 삶의 의미에 대한 설명을 바탕으로) 숫자를 로 숫자로 비교하고 ToNumber("this_is_true") : NaN를 반환합니다. NaN == 0 다음 단계는 JavaScript가 추상 평등 비교 알고리즘을 사용하여 표현의 값으로 NaN == 1를 얻는 방법을 보여줍니다.
           피연산자 유형과 일치하지 않기 때문에 적용되지 않는 1 ~ 8 단계를 건너 뜁니다. 그러나 왼쪽 피연산자의 유형은
           1. 이고 오른쪽 피연산자의 유형은 Object이기 때문에 9 단계는 적용됩니다. 표현식은 Number로 변환됩니다. ToPrimitive(lifeAnswer) == 42
           프롬프트없이
           2. 내부 메소드를 호출하십시오. ECMAScript 262 사양의 섹션 8.12.8에 따르면 ToPrimitive()는 메소드를 호출하여 "42"를 반환합니다. 표현식은 lifeAnswer로 변환되고 알고리즘은 재귀입니다. [[DefaultValue]] 피연산자 유형과 일치하지 않기 때문에 적용 할 수없는 단계 1에서 4 단계를 건너 뜁니다. 그러나 왼쪽 피연산자의 유형은 [[DefaultValue]]이고 오른쪽 피연산자의 유형은 toString()이기 때문에 5 단계는 적용됩니다. 표현식은 "42" == 42로 변환됩니다.
           3. > 42를 반환하고 표현은 로 변환됩니다. 알고리즘은 1.C.III 단계를 재발하고 실행합니다. 숫자는 동일하기 때문에 String는 반복적으로 반환되고 확장됩니다. Number ToNumber("42") == 42 마지막 예제에서, 다음 시퀀스가 ​​왜 트랜 시력을 나타내지 않는지 알아 봅시다.
           다음 단계는 JavaScript가 추상 평등 비교 알고리즘을 사용하여
           4. 의 값을 얻는 방법을 보여줍니다. ToNumber("42") 42 == 42 는 5 단계를 실행하여 를 생성하고 로 변환되고 알고리즘은 재귀 적으로 변환됩니다. (사양의 섹션 9.3.1은 true Stringnumericliteral ::: [empty]의 mv [수학적 값] [수학적 값]이 0입니다. 다시 말하면, 빈 문자열의 값은 0입니다.)
           는 1 단계를 실행합니다.

           다음 단계는 JavaScript가 추상 평등 비교 알고리즘을 사용하여 true의 값으로 false : 를 얻는 방법을 보여줍니다.

           는 4 단계를 실행하고

           "this_is_true" == false // false
           "this_is_true" == true  // false

           로 변환되고 알고리즘은 재귀 적으로 변환됩니다.

           는 1 단계를 실행합니다. true '' == 0 마지막으로, JavaScript는 추상 평등 비교 알고리즘에서 1.D를 수행하여 를 얻습니다. 두 줄의 길이는 길이가 다르기 때문에 (0 및 1),

           를 반환합니다.
           1. 결론 ToNumber('') == 0 0 == 0 왜 와 를 사용해야하는지 궁금 할 것입니다. 결국, 이전의 예는 이들 연산자가 유형 주조 및 재귀로 인해 및 연산자보다 느릴 수 있음을 보여 주었다. 어떤 경우에는 장점이 없기 때문에 및
           를 사용하고 싶을 수도 있습니다. 다음 예를 고려하십시오 :

           "this_is_true" == false // false
           "this_is_true" == true  // false

           연산자는 typeof 값을 반환합니다. 값은 다른 는 만큼 효율적입니다. 어쩌면 String를 만난 적이없는 JavaScript 초보자는 그러한 코드가 더 명확해질 것입니다. 마찬가지로 다음 코드 스 니펫에는 유형 주조가 필요하지 않습니다 (두 피연산자의 유형은 )이므로 는 String : 만큼 효율적입니다. String 이 예제는 ==와 ===가 주조가 필요하지 않은 비교에 적합하다는 것을 보여줍니다. 피연산자 유형이 다르면 === 및 Number가 예상치 못한 값보다는 !=를 반환하기 때문에 가장 좋은 선택입니다 (예 : !== returns

           ). 피연산자 유형이 동일하다면

           '' == 0   // true
           0 == '0' // true
           '' == '0' // false

           및 를 사용하지 않을 이유가 없습니다. 어쩌면 악한 쌍둥이를 두려워하는 것을 멈출 때가되었을 것입니다. 일단 당신이 그들을 이해하면, 그들은 덜 악합니다. == JavaScript 평등 및 비교 연산자 (FAQS)를위한 FAQ JavaScript에서 !=와 ===의 차이점은 무엇입니까? !== JavaScript에서 및 false 및 false == ""는 비교 연산자입니다. 그러나 값을 비교하는 방식이 다릅니다. 연산자 (느슨한 평등 연산자라고도 함)는 비교 전에 유형 주조를 수행합니다. 즉, 두 가지 다른 유형의 값을 비교하면 JavaScript가 비교를 수행하기 전에 한 유형으로 다른 유형을 변환하려고합니다. 반면, 연산자 (엄격한 평등 연산자라고 함)는 유형 주조를 수행하지 않습니다. 값과 유형을 동시에 비교하므로 두 값 유형이 다르면 JavaScript는 동등하지 않은 것으로 간주됩니다. true javaScript에서 == 대신 !=를 사용해야하는 이유는 무엇입니까?
           는 일반적으로 JavaScript에서

           대신 를 사용하는 것이 좋습니다. 엄격한 비교를 제공하기 때문에 유형 캐스트를 수행하지 않고 값 및 유형에 대한 검사를 수행하지 않습니다. 이것은 다른 유형의 값을 비교할 때 예상치 못한 결과를 피하는 데 도움이 될 수 있습니다. 예를 들어, 를 사용할 때 JavaScript는 비교 전에 유형을 변환하기 때문에 숫자 0 및 빈 문자열 ""동일을 고려합니다. 그러나 를 사용하면 다른 유형이 있기 때문에 불평등 한 것으로 간주됩니다.

           JavaScript에서 유형 캐스트는 무엇입니까?

           JavaScript로 캐스트 된 유형은 값을 한 데이터 유형에서 다른 데이터 유형으로 자동 또는 암시 적으로 변환하는 것을 나타냅니다. 이는 운영자가 다른 유형의 피연산자에 사용되거나 일부 유형이 필요한 경우 발생합니다. 예를 들어, 느슨한 평등 연산자 ()를 사용할 때 JavaScript는 비교하기 전에 피연산자를 일반 유형으로 변환하려고 시도합니다. == JavaScript는 객체 비교를 어떻게 처리합니까?

           javaScript에서 객체는 값이 아닌 참조로 비교됩니다. 즉, 두 객체의 속성과 값이 정확히 동일한 경우에도 메모리의 다른 객체를 참조하기 때문에 동일하게 간주되지 않습니다. 객체가 동등한 것으로 간주되는 유일한 경우는 정확히 동일한 객체를 지칭하는 것입니다.

           JavaScript에서

           와

           의 차이점은 무엇입니까?

           == 및 !=는 JavaScript의 비교 연산자입니다.

           운영자는 두 피연산자의 값이 동일인지 확인하고 필요한 경우 유형 캐스트를 수행합니다. 반면, 운영자는 두 피연산자의 값이 동일하지 않은지 확인하고 필요한 경우 유형 캐스트를 수행합니다.

           JavaScript에서 ==와 !=의 차이점은 무엇입니까? == != 및

           는 JavaScript의 비교 연산자입니다.

           운영자는 값과 유형을 모두 고려하여 두 피연산자의 값이 동일인지 확인합니다. 반면, === 운영자는 값과 유형을 모두 고려하여 두 피연산자의 값이 동일하지 않은지 확인합니다. !== JavaScript에서 두 배열을 비교하는 방법은 무엇입니까?

           JavaScript에서 배열은 값이 아닌 참조에 비해 객체입니다. 이것은 두 배열이 동일한 순서로 동일한 요소를 포함하더라도 메모리의 다른 객체를 참조하기 때문에 동일하게 간주되지 않음을 의미합니다. 콘텐츠 별 두 배열을 비교하려면 각 요소를 개별적으로 비교해야합니다.

           javaScript는 ===와 !==의 비교를 어떻게 처리합니까? === JavaScript에서 및 !== 및

           는 둘 다 결 측값을 나타 내기 때문에 느슨하게 동일하다고 간주됩니다 (). 그러나 그들은 다른 유형이기 때문에 엄격하게 같지 않습니다 ().

           JavaScript에서 비교 연산자의 우선 순위는 얼마입니까?

           JavaScript에서 비교 연산자는 우선 순위가 동일합니다. 왼쪽에서 오른쪽으로 계산됩니다. 그러나 산술 및 비트 연산자보다 우선 순위가 낮지 만 논리 연산자보다 높다는 점에 유의해야합니다.

           JavaScript의 문자열이있는 비교 연산자를 사용할 수 있습니까?

           예, JavaScript의 문자열이있는 비교 연산자를 사용할 수 있습니다. JavaScript는 문자열을 비교할 때 어휘 (사전) 순서를 사용합니다. 그러나 대문자는 ASCII 값이 작기 때문에 소문자보다 "작은"것으로 간주됩니다.

위 내용은 사악한 쌍둥이를 두려워하지 마십시오 - Sitepoint의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!