웹 프론트엔드 JS 튜토리얼 JavaScript에서 비교 연산자의 암시적 유형 변환 소개(예제 포함)

JavaScript에서 비교 연산자의 암시적 유형 변환 소개(예제 포함)

Mar 25, 2019 pm 02:26 PM
html5 javascript

이 기사에서는 JavaScript의 비교 연산자의 암시적 유형 변환에 대해 소개합니다(예제 포함). 필요한 친구가 참고할 수 있기를 바랍니다.

코드에서 '==' 및 '==='를 자주 볼 것이라고 생각합니다. 그런데 비교 연산자와 암시적 변환을 실제로 이해하셨나요? 오늘 비교 연산자를 다시 이해해 볼까요?

일치 연산자====

설명: 엄격한 일치, 유형 변환 없음, 데이터 유형과 값이 정확히 동일해야 합니다.

先判断类型,如果类型不是同一类型的话直接为false;

1 对于基本数据类型(值类型): Number,String,Boolean,Null和Undefined:两边的值要一致,才相等
      console.log(null === null)   // true
      console.log(undefined === undefined)  // true
   注意: NaN: 不会等于任何数,包括它自己
   console.log(NaN === NaN)  // false 

2 对于复杂数据类型(引用类型): Object,Array,Function等:两边的引用地址如果一致的话,是相等的
     arr1 = [1,2,3];
     arr2 = arr1;
     console.log(arr1 === arr2)   // true
로그인 후 복사

동등 연산자==

비엄격 일치: 유형 변환은 가능하지만 전제 조건 총 5가지 조건이 있습니다
(다음 코드에서는 x == y를 예로 사용합니다)

x와 y는 모두 null이거나 정의되지 않습니다.
규칙: 암시적 유형 변환이 없으며 무조건 true를 반환합니다.

console.log ( null == undefined );//true
console.log ( null == null );//true
console.log ( undefined == undefined );//true
로그인 후 복사

x 또는 y is NaN: NaN은 어떤 숫자와도 같지 않습니다
규칙: 암시적 유형 변환이 없으며 무조건 false를 반환합니다

console.log ( NaN == NaN );//false
로그인 후 복사

x 및 y는 문자열, 부울, 숫자
규칙: 암시적 유형 변환이 있는 경우 숫자가 아닌 데이터 유형이 변환됩니다. number

console.log ( 1 == true );//true    (1) 1 == Number(true)
console.log ( 1 == "true" );//false   (1) 1 == Number('true')
console.log ( 1 == ! "true" );//false  (1) 1 == !Boolean('true')  (2) 1 == !true  (3) 1 == false  (4)1 == Number(false)
console.log ( 0 == ! "true" );//true
console.log(true == 'true') // false
로그인 후 복사

x로 변환 또는 y는 복합 데이터 유형입니다: 복합 데이터 유형의 원래 값을 먼저 얻은 다음 왼쪽과 비교합니다
복합 데이터 유형의 원래 값: 먼저 valueOf 메서드를 호출한 다음 toString 메서드를 호출합니다.
valueOf: 일반적으로 기본적으로 반환됩니다. Self
Array toString: 기본적으로 조인 메서드가 호출되어 각 요소를 연결하고 연결된 문자열이 반환됩니다.

console.log ( [].toString () );//空字符串
console.log ( {}.toString () );//[object Object]
注意:  空数组的toString()方法会得到空字符串,
      而空对象的toString()方法会得到字符串[object Object] (注意第一个小写o,第二个大写O哟)

console.log ( [ 1, 2, 3 ].valueOf().toString());//‘1,2,3’
console.log ( [ 1, 2, 3 ] == "1,2,3" );//true  (1)[1,2,3].toString() == '1,2,3'  (2)'1,2,3' == '1,2,3'
console.log({} == '[object Object]');//true
로그인 후 복사

x와 y는 둘 다입니다. 복잡한 데이터 유형:
규칙은 주소만 비교합니다. 주소가 일치하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

var arr1 = [10,20,30];
var arr2 = [10,20,30];
var arr3 = arr1;//将arr1的地址拷贝给arr3
       
console.log ( arr1 == arr2 );//虽然arr1与arr2中的数据是一样,但是它们两个不同的地址
console.log ( arr3 == arr1 );//true  两者地址是一样
       
console.log ( [] == [] );//false
console.log ( {} == {} );//false
로그인 후 복사

전형적인 인터뷰 질문

注意:八种情况转boolean得到false: 0 -0 NaN undefined null '' false document.all()

console.log([] == 0); //true 
  // 分析:(1) [].valueOf().toString() == 0  (2) Number('') == 0  (3) false == 0  (4) 0 == 0
console.log(![] == 0); //true
  // 分析: 逻辑非优先级高于关系运算符 ![] = false (空数组转布尔值得到true)
        
console.log([] == []); //false
// [] 与右边逻辑非表达式结果比较
//(1) [] == !Boolean([])   (2) [] == !true  (3)[] == false  (4) [].toString() == false  (5)'' == false   (6)Number('0') == Number(false)
console.log([] == ![]); //true

onsole.log({} == {}); //false
// {} 与右边逻辑非表达式结果比较
//(1){} == !{} (2){} == !true  (3){} == false  (4){}.toString() == false  (5)'[object Object]' == false  (6)Number('[object Object]') == false
console.log({} == !{}); //false
로그인 후 복사

비정상적인 인터뷰 질문

 var  a = ???
  if(a == 1 && a == 2 && a == 3 ){
      console.log(1)
  }

//如何完善a,使其正确打印1


//答案
var a = {
  i : 0,    //声明一个属性i
    valueOf:function ( ) {
     return ++a.i;    //每调用一次,让对象a的i属性自增一次并且返回
    }
 }
 if (a == 1 && a == 2 && a == 3){  //每一次运算时都会调用一次a的valueOf()方法
  console.log ( "1" );
 }
로그인 후 복사

이 기사는 여기서 끝났습니다. 콘텐츠를 보려면 PHP 중국어 웹사이트의 JavaScript Video Tutorial 칼럼을 주목하세요!

위 내용은 JavaScript에서 비교 연산자의 암시적 유형 변환 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML에서 텍스트 이동 HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 온클릭 버튼 HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles