JS【详解】运算符/操作符 （解构运算符，对象操作符，in，void 操作符，typeof 运算符， instanceof 运算符，赋值运算符，比较运算符，逻辑运算符，三元运算符，运算符的优先级）

解构运算符

• 数组用 [ ]
• 对象用 { }

详见
https://blog.csdn.net/weixin_41192489/article/details/123073918

对象操作符

运算符	功能	例子
new	创建对象	new Object()
.	访问属性	obj.name
[]	访问属性	obj[‘name’]
delete	删除属性	delete obj.name
in	判断属性是否存在	prop in object

in 运算符

判断指定的属性是否在指定的对象或其原型链中，存在则返回 true，否则返回 false

prop in object

• prop 可为 字符串 或 symbol 类型的属性名，或 数组索引

// 数组中使用 in
let trees = new Array("redwood", "bay", "cedar", "oak", "maple");
3 in trees        // 返回true
6 in trees        // 返回false
"length" in trees // 返回true (length是一个数组属性)
Symbol.iterator in trees // 返回true (数组可迭代，只在ES2015+上有效)

// 内置对象
"PI" in Math          // 返回true

// 自定义对象
let mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar  // 返回true

继承的属性返回 true

"toString" in {}; // 返回true

delete 删除的属性， in 返回 false

let mycar = {make: "Honda", model: "Accord", year: 1998};
delete mycar.make;
"make" in mycar;  // 返回false

let trees = new Array("redwood", "bay", "cedar", "oak", "maple");
delete trees[3];
3 in trees; // 返回false

将一个属性的值赋值为 undefined，而没有删除它， in 返回 true。

let mycar = {make: "Honda", model: "Accord", year: 1998};
mycar.make = undefined;
"make" in mycar;  // 返回true

let trees = new Array("redwood", "bay", "cedar", "oak", "maple");
trees[3] = undefined;
3 in trees; // 返回true

void 操作符

用于返回一个表达式的值是 undefined 的结果。

使用场景：创建一个无任何跳转的超链接（死链）

<a href="javascript:void(0)">Click me</a>

typeof 运算符

适用于检测值类型（ null 除外 ）、函数和类的数据类型，对引用类型的数据只能得到 object

参数	返回值
数值	number
字符串	string
布尔型	boolean
undefined	undefined
null	object
Symbol 数据	symbol
NaN	number
Infinity	number
函数	function
class类	function
数组等对象	object

instanceof 运算符

判断一个对象是否是由某个指定的构造器函数所创建

> function Hero(){}
> var h = new Hero();
> var o = {};
> h instanceof Hero;
true

> h instanceof Object;
true

> o instanceof Object;
true

算术运算符

y=5

运算符	描述	例子	x 运算结果	y 运算结果	在线实例
+	加法	x=y+2	7	5	实例 »
-	减法	x=y-2	3	5	实例 »
*	乘法	x=y*2	10	5	实例 »
/	除法	x=y/2	2.5	5	实例 »
%	取模（余数）	x=y%2	1	5	实例 »
++	自增	x=++y	6	6	实例 »
		x=y++	5	6	实例 »
–	自减	x=–y	4	4	实例 »
		x=y–	5	4	实例 »

• 任何值和NaN做运算的结果都是NaN。
• 任何的值和字符串做加法运算，都会先转换为字符串，然后进行字符串拼接。
• 任何值做-、*、/运算时都会自动转换为Number。

result1 = true + 1;  // 2 = 1+ 1

result2 = true + false; // 1 = 1+ 0

result3 = 1 + null; // 1 = 1+ 0

result4 = 100 - '1' // 99

a是变量，而a++和++a是表达式

• a++的值等于原变量的值（a自增前的值）
• ++a的值等于新值 （a自增后的值）

实战范例： 假设用户输入345，怎么分别得到3、4、5这三个数呢？

• 得到3的方法：345 除以100，得到3.45然后取整，得到3。即：parseInt(345/100) 或 345/100%10
• 得到4的方法：345 除以100，余数是45，除以10，得到4.5，取整。即：parseInt(345 % 100 / 10)或345/10% 10
• 得到5的方法：345 除以10，余数就是5。即：345 % 10（即345/1 % 10）

赋值运算符

给定 x=10 和 y=5

运算符	例子	等同于	运算结果	在线实例
=	x=y	无同等写法	x=5	实例 »
+=	x+=y	x=x+y	x=15	实例 »
-=	x-=y	x=x-y	x=5	实例 »
*=	x*=y	x=x*y	x=50	实例 »
/=	x/=y	x=x/y	x=2	实例 »
%=	x%=y	x=x%y	x=0	实例 »

比较运算符

给定 x=5

运算符	描述	比较	返回值	实例
==	等于，比较前两边的操作数会被自动转换为相同的数据类型	x==8	false	实例 »
		x==5	true	实例 »
===	绝对等于（值和数据类型均相等），比较前两边的操作数不会发生数据类型转换	x===“5”	false	实例 »
		x===5	true	实例 »
!=	不等于，比较前两边的操作数会被自动转换为相同的数据类型	x!=8	true	实例 »
!==	不绝对等于（值或数据类型有一个不相等，或两个都不相等），比较前两边的操作数不会发生数据类型转换	x!==“5”	true	实例 »
		x!==5	false	实例 »
>	大于	x>8	false	实例 »
<	小于	x<8	true	实例 »
>=	大于或等于	x>=8	false	实例 »
<=	小于或等于	x<=8	true	实例 »

• 任何值和NaN做任何比较都是false。
• NaN不和任何值相等，包括他本身。

== 会将不同类型的东西，转为相同类型进行比较（大部分情况下，都是转换为数字）。例如：

console.log("6" == 6);     // 打印结果：true。这里的字符串"6"会先转换为数字6，然后再进行比较
console.log(true == "1");   // 打印结果：true
console.log(0 == -0);       // 打印结果：true
console.log(null == 0);   // 打印结果：false

===全等不会做类型转换

严格相等运算符不适用的场景：

NaN===NaN //false
-0===+0 //true
-0===0 //true
0===+0 //true

此时可以使用 ES6 的 Object.is 实现

Object.is()

ES6 新增语法

用于比较两个值是否相等，大部分行为和 === 一致，除以下特殊情况：

Object.is(NaN, NaN); // true
Object.is(-0, +0); // false
Object.is(-0, 0); // false

注意， 0 与 +0 的比较，两者是相同的。

Object.is(0, +0); // true  -- 与 === 相同

比较规则

https://blog.csdn.net/weixin_41192489/article/details/116736255

逻辑运算符

给定 x=6 y=3

运算符	功能	例子
||	或	(x == 5 || y == 5) 结果为 false
&&	且	(x < 10 && y > 1) 结果为 true
!	非	!(x==y) 结果为 true

• && 为短路的与，如果第一个值为false，则不会执行第二个值

    //第一个值为true，会检查第二个值
    true && alert("看我出不出来！！");  // 可以弹出 alert 框

    //第一个值为false，不会检查第二个值
    false && alert("看我出不出来！！"); // 不会弹出 alert 框

• 两个非布尔值的 && 运算

  • 如果第一个值为true，则必然返回第二个值

    '2'&&'3'  得到 '3'
    

  • 如果第一个值为false，则直接返回第一个值

    ''&&'3'  得到 ''
    '0'&&'3'  得到 '3' ，特别说明，此处'0'转换为布尔值后是true，不是false
    

• || 为短路的或，如果第一个值为true，则不会执行第二个值

• 两个非布尔值的 || 运算

  • 如果第一个值为true，则直接返回第一个值

    '1'||'3'  得到'1'
    

  • 如果第一个值为false，则返回第二个值

     ''||'3'  得到'3'
    

    此现象常用于给变量指定默认值，如：当a有值时，将a赋值给b，否则b为10

    let a;
    let b = a || 10; // 此时 b 会被赋值为 10
    

    此种技巧简单而优雅，但以下情况除外：当a为虚值时，b无法得到a的值

    let a = 0;
    let b = a || 10; // 此时 b 还是 10
    

• 对非布尔值进行逻辑运算，则会先将其转换为布尔值，然后再操作。

  var a = 10;
  a = !a;  //此时a的数据类型为布尔类型，值为false
  

【实战】容错处理【重要】

当成功调用一个接口后，返回的数据为 result 对象。这个时候，我们用变量 a 来接收 result 里的图片资源。通常的写法是这样的：

if (result.resultCode === 0) {
    let a = result && result.data && result.data.imgUrl || 'http://img.smyhvae.com/20160401_01.jpg';
}

上方代码的意思是，获取返回结果中的result.data.imgUrl这个图片资源；如果返回结果中没有 result.data.imgUrl 这个字段，就用 http://img.smyhvae.com/20160401_01.jpg 作为兜底图片。

条件运算符(三元运算符)

条件表达式 ? 条件表达式结果为true时的值 ： 条件表达式结果为false时的值

voteable=(age<18)?"年龄太小":"年龄已达到";

如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后再运算。

位运算符

https://blog.csdn.net/web_green/article/details/136687142

运算符的优先级

优先级由高到低：

• .、[]、new
• ++、--
• !、~、+（单目）、-（单目）、typeof、void、delete
• %、*、/
• +（双目）、-（双目）
• <<、>>、>>>
• <、<=、>、>=
• == 、!== 、===
• &
• ^ (位运算中的异或运算符)
• |
• &&
• ||
• ?:
• =、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=
• ,

() 不属于运算符，但可用于提升运算的优先级（被() 包裹的内容，会优先计算，从最内层的 () 开始计算，逐层展开）

'早上好，'+ (obj['name'+(1+2)] + '同学')

1. 计算 (1+2)
2. 计算 ['name'+(1+2)]
3. 计算 obj['name'+(1+2)]
4. 计算 (obj['name'+(1+2)] + '同学')
5. 计算 '早上好，'+ (obj['name'+(1+2)] + '同学')