js中相等比较的原理、逻辑运算符&&与||、逗号运算符（详解）

我会带着你远行 2022-10-27 01:33 191阅读 0赞

# js中相等比较的原理、逻辑运算符&&与||、逗号运算符（详解） #

看下面的代码

console.log(
         12 == '12',     //true 12 == 12
         0 == '',        //true 0==0
         1 == true,      //true 1==1
         2 == false,     //false 2==0
         'true'==true,   //false NaN==1 
         ' '==false,     //true 0==0
     );
    
     console.log(
         undefined == 0,     //false
         undefined == '',    //false
         undefined == false, //false
         undefined == undefined, //true
         null == 0,          //false
         null == '',         //false
         null == false,      //false
         null == undefined   //true
     );
    
     console.log(
         [1]==1, //true '1'==1 1==1
         []==0,  //true ''==0 0==0
         [1]==true,  //true '1'==true 1==1
         [1,'a',3] == '1,a,3', //true '1,a,3'=='1,a,3'
         [] == undefined, //false
         { a:1}==1,   //false '[object Object]'==1 NaN==1
         [null]==null,   //false
     );
    
     console.log(
         []==[],
         { }=={ }
     )
    
     var fn1=function(){ 
         return 1;
     }
     var fn2=function(){ 
         return 1;
     }
    
     var fn3=fn1;
    
     console.log(fn1==fn2);	//false
     console.log(fn1==fn3);	//true

**下面总结一下：  
相等比较**

1.  不同类型的原始类型数据，把所有的数据转成数字后进行对比
2.  null与undefined除了它们自己与自己、自己与对方相等，与其它的任何数据都不相等
3.  对象与原始类型数据比较时，把对象转成原始值，再进行比较
4.  对象与对象类型比较时，比较的是他们的引用地址，除非引用地址相同，否则都不相等

**总结：**  
1、原始类型对比，转成数字对比  
2、对象类型对比，把对象转成字符串，然后看对方的类型，如果不一样，都转成数字对比。对象与对象比较，比较引用地址  
3、null与undefined，自己与自己、自己与对方相等。与其它任何数据都不相等

# 逻辑运算符 &&与|| #

## &&（and） ##

以下代码都是有关于&&的操作

console.log('bella' && 2+1);    //3
    console.log(![] && '你好');     //false
    
    var n1 = 1;
    n1-1&&(n1+=5);
    console.log(n1);    //1
    
    function fn1(){ 
        console.log('啦啦啦');
    }
    n1==1&&fn1();//会输出啦啦啦
    
    
    console.log(true&&'lallal'&&(3-2)&&'abc'&&true&&(2+2));//4

最后一行代码。因为&&（2+2）前面的代码都为true，所以就取到最后一个

**最后总结 假前真后**

*  只要‘&&’前面是false，不管‘&&’后面是true还是false，结果都将返回‘&&’前面的值
 *  只要‘&&’前面是true，不管‘&&’后面是true还是false，结果都将返回‘&&’后面的值

## ||（or） ##

以下是关于||运算符的使用

console.log('lallaa'||2+1);//lallaa
    
    var n2= 1;
     n2-1||(n2+=5);
     console.log(n2)
    
     function fn3(text){ 
         text=text||'lala';
         console.log(text);
     }
     fn3('fufu');

**最后总结：真前假后**

*  只要‘||’前面为false，不管‘||’后面是false还是true，都返回‘||’后面的值。
 *  只要‘||’前面为true，不管‘||’后面是true还是false，都返回‘||’前面的值。

# 逗号运算符 #

以下代码是有关于逗号运算符的使用

console.log(1,2,3);     //1,2,3
    console.log((1,2,3))    //3---(1,2,3)是一个表达式
    
    alert(1,2,3);       //alert一个1
    alert((1,2,3));     //alert 一个3

这里有一个坑

> 因为a在声明b的时候++了，并且b是一个表达式，所以输出11和30

var a = 10;
    var  b = (a++,20,30);
    console.log(a,b);//11 30 
    
    a+=3;
    b+=4;
    console.log(a,b);//14 34

> for（；表达式1，表达式2；） 则以条件2为主。  
> for（；表达式1&表达式2；） 则以先达到条件的表达式为主。  
> for（；表达式1|表达式2；） 则以后达到条件的表达式为主 。

这就解释了为什么k输出为18

for(var i =0,j=0,k;i<6,j<10;i++,j++){ 
        k = j+i;//9+9
    }
    console.log(k);//18

**交换两个变量的两个方法**  
第二个方法用的极为巧妙  
因为\[0\]相当于去下标为0的数组，就使得a与b交换数据

{ 
        let a = 10;
        let b = 20;
        //第一种方法
        let c;
        c = a;
        a = b;
        b = c;
        console.log(a,b)
    
        //第二种方法
        a = [b][b=a,0]
        //解题过程如下
        a =[20][b=10,0];
        a = [20][0]     //[0]就相当于取下标为0的数组
        a = 20
    
    }

下面的代码也是用到了逗号运算符，因为return只会return一个值，所以就会return最后一个  
并且这个代码也有坑，一不小心就会出错，因为fn（）函数是在console.log里面的最后一个调用的，所以第一个console输出a和b的值还是原来的值。

var a = 10, b = 20;
    function fn(){ 
        return a++,b++,10;
    }
    
    console.log(a,b,fn());  //10 20 10---这里有个坑，因为是先输出a和b在调用fn（），
    //所以a和b还是原来的值
    console.log(a,b,fn());  //11 21 10
    var c = fn();
    console.log(a,b,c);   //13 23 10

本节内容虽然看似不起眼，但却是很多人都会入坑的一部分。