Introduction to implicit type conversion of comparison operators in JavaScript (with examples)

This article brings you an introduction to implicit type conversion of comparison operators in JavaScript (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

I believe you often see '==' and '===' in your code, but do you really understand comparison operators and the implicit conversions therein? Let's re-understand comparison operators today .

Congruence operator===

Description: Strict matching, no type conversion, the data type and value must be exactly the same

先判断类型,如果类型不是同一类型的话直接为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

Equality operator==

Non-strict matching: Type conversion is possible, but there are five situations with preconditions
(The following code uses x == y as an example)

x and y are both null or undefined:
Rules: No implicit type conversion, return true unconditionally

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

x or y is NaN: NaN is not equal to any number
Rules: No implicit type conversion, return unconditionally false

console.log ( NaN == NaN );//false

x and y are string, boolean, number
Rules: There is implicit type conversion, which will convert data that is not number type into 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 or y is Complex data type: The original value of the complex data type will be obtained first and then left compared
The original value of the complex data type: First call the valueOf method, and then call the toString method
valueOf: generally returns itself by default
Array toString: By default, the join method will be called to splice each element and the spliced ​​string will be returned.

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 and y are both complex data types:
The rule only compares addresses, and returns true if the addresses are consistent, otherwise Return 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

Classic Interview Questions

注意:八种情况转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

Abnormal Interview Questions

 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" );
 }

This article has ended here. For more other exciting content, you can pay attention to the PHP Chinese website The JavaScript video tutorial column!

The above is the detailed content of Introduction to implicit type conversion of comparison operators in JavaScript (with examples). For more information, please follow other related articles on the PHP Chinese website!