js中操作符的易错点【2021.10.21】

一、先了解什么是短路运算

1.逻辑与（&）与短路与（&&）的区别

& 左边无论真假，右边都进行运算

&& 如果左边为真，右边参与运算，如果左边为假，那么右边不参与运算

如：第一个为true。第二个未事先声明，这是会报错的

那第一个为false，第二个未事先声明，这就不会报错了

2.逻辑或（|）与短路或（||）的区别

| 左边无论真假，右边都进行运算

|| 当左边未真，右边不参与运算

二、操作符中的易错题

例1：

let ostring ="helleWord";

let onulll =null;

console.log(ostring && onulll);//=>null

短路与（&&）是不一定返回布尔值的

就比如上面那个例子，只要有一个操作数为null，就返回null

展开点来讲，只要有一个为NaN，就返回NaN

只要有一个为undefined，就返回undefined

如果第一个操作数是对象，则返回第二个操作数

如果第二个为对象，则第一个为true

如果两个都是对象，返回第二个对象

例2：

let age = 29;

let anotherAge = -age + 2;

console.log(age);   =>28

console.log(anotherAge);  =>30

无论使用前缀递增还是前缀递减操作符，变量的值都会在语句被求值之前改变

例3：

let num = Infinity;

let num2 = "";

console.log(!num); //=>false

console.log(!num2); //=>true

逻辑非（！）先转换为布尔值再取反

也可以这样认为：！！等价于Boolean（）

例4：

let num3 = false;

let num4 = false;

let num5 = undefined;

let num6 = undefined;

let num7 = null;

let num8 = null;

let num10 = 0xf;

console.log(num3 || num4);//=>false

console.log(num5 || num6);//=>undefined

console.log(num7 || num8);//=>null

let result=(num3 || num9);//=>出错 num9 is not defined

let secend=(num10 || num9);//赋值成功

console.log(secend);//=>15

上面的例子告诉我们短路或（||）不一定返回布尔值，还可以返回null、undefined、甚至是出错，利用这个可以实现兼容。

例5：

typeof(messge);=>"object"

messge可能是null，可能是对象

let num = "0spa";

Number(num);//=>NaN

例6：

js的逻辑变量是区分大小写的

let luoJi =True;

console.log(luoJi && 55);//=> True is not defined

字符串是要加引号的""\''\``

如果不是字符串，那就当变量，变量未赋值就会报错

let s =False;

s++;//出错

例7：

对+连接符的理解

let num11 = "5";

let num12 = 5 + "5";

let num14 = +"5";一定要区分！

let num13 = 5 + num11;

console.log(num12);//=>55

console.log(typeof(num12));//string

console.log(num13);//=>55

console.log(5+num14);//=>10

document.write(typeof(num13));//string

let s1 = "5";

s1 = +s1;  // 值变成数值5

将一元加应用到非数值，则会执行与使用Number()转型函数一样的类型转换

而加号也是会拼接字符串的，如上面例子的55