js隐式类型转换

写作意图：今天无意间看到了一个面试题，当时很惊讶，我不知道考的知识点是什么，但是知识清楚的记得，之前好像是有这么回事，然后我赶紧去把代码，写在群里问大佬，

<script>
    console.log(false==0);
    console.log([]==[]);
    console.log([]===[]);
</script>

当时我就懵逼了，这什么鬼，等于号，是赋值，false可以转换为0，第一个输出true，第二个呢，第三个呢，我的问题不是纠结于两个等于和三个等于，之前看过一个文章解释过第三个等于是严格等于，如果二都不成立的情况，那三就直接false了。先不纠结这个了，然后前端大佬就告诉我，这个考的是js隐式转换，没有多问，我赶紧去百度了，这里看到了一个大佬的文章，看起来还不错，js隐式类型转换

• 隐式转换介绍
  在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算，这种无需程序员手动转换，而由编译器自动转换的方式就称为隐式转换。
  例如：

	if(1>'0'){
        console.log(true);
    }else{
        console.log(false);
    }
    // 此代码输出结果是true

这行代码在js中并不会报错，编译器在运算符时会先把右边的"0"转成数字0`然后在比较大小

• 隐式转换规则

1. 转成string类型： +（字符串连接符）
2. 转成number类型：++/–(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !=== (关系运算符)
3. 转成boolean类型：!（逻辑非运算符）

• 坑一：字符串连接符与算术运算符隐式转换规则混淆
  常见面试题如下：

   console.log(1+"true");
   console.log(1+true);
   console.log(1+undefined);
   console.log(1+null);

原理分析：

/*
此类问题的坑，将字符串连接符（+：只要加号两边有一边是字符串）与算术运算符（+：两边都是数字）的隐式转换搞混淆
1.字符串连接符+：会把其他数据类型调用String()方法转成字符串然后拼接
2.算术运算符+：会把其他数据类型调用Number()方法转成数字然后做加法计算
*/
//+是字符串连接符：String(1)+"true"="1true";
console.log(1+"true");
//+是算术运算符：1+Number(true)=1+1=2;
console.log(1+true);
//+号是算术运算符：1+Number(undefined)=1+NaN=NaN
console.log(1+undefined);
//+号是算术运算符：1+Number(null)=1+0=1
console.log(1+null);

• 坑二：关系运算符：会把其他数据类型转换成number之后再比较关系
  常见面试题：

   console.log("2">10);
   console.log("2">"10");
   console.log("abc">"b");
   console.log("abc">"aad");
   console.log(NaN==NaN);
   console.log(undefined==null);

原理分析

	/*
	*当关系运算符两边有一边是字符串的时候，会将其他数据类型使用Number()进行转换，然后比较关系
	*/
   console.log("2">10);//false Number('2')>10=2>10=false
 /*
   *当关系运算符两边都是字符串的时候，此时同时转成number然后比较关系，
   * 重点：此时并不是按照Number()的形式转换成数字，而是按照字符串对应得Unicode编码来转换成数字
   * 使用这个方法可以查看字符串得unicode编码：字符串.charCodeAt(字符下标，默认为0)
   * */
   console.log("2">"10");
   
   console.log("abc">"b");
   console.log("abc">"aad");
   console.log(NaN==NaN);
   console.log(undefined==null);

• 坑三：复杂数据类型在隐式转换时会先转成String，然后再转成Number运算
• 坑四：逻辑非隐式转换与关系运算符隐式转换搞混淆