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

展开运算符...…rest对象解构constuser{name:Tom,age:20,sex:male}const{name,...rest}user console.log(name)// Tomconsole.log(rest)// {age:20, sex:male}数组解构constarr[1,2,3,4]const[a,b,...rest]arr console.log(rest)// [3,4]函数参数剩余参数functionsum(first,...others){console.log(others)// [2,3,4]}sum(1,2,3,4)替代老旧arguments得到真实数组❌ 错误写法const[...rest,last]arr// Rest 不能放前面...数组展开consta[1,2]constb[...a,3,4]console.log(b)// [1,2,3,4]// 复制数组浅拷贝constcopy[...a]对象展开constobj1{x:1}constobj2{...obj1,y:2}// {x:1, y:2}// 合并、覆盖属性constobj3{...obj2,x:99}// {x:99, y:2}函数传参constnums[10,20,30]Math.max(...nums)// Math.max(10,20,30)常见实用场景数组去重[...new Set(arr)]对象合并、属性覆盖不修改原数据实现新增/删除属性函数不定参数接收解构运算符数组用[ ]对象用{ }详见https://blog.csdn.net/weixin_41192489/article/details/123073918对象操作符运算符功能例子new创建对象new Object().访问属性obj.name?.可选访问属性obj.name[]访问属性obj[‘name’]delete删除属性delete obj.namein判断属性是否存在prop in object?.可用于安全地链式访问对象的深层属性letme{name:张三,age:18}// me.job.content 会报错 Uncaught TypeError: Cannot read property content of undefinedconsole.log(me?.job?.content)// undefinedin 运算符判断指定的属性是否在指定的对象或其原型链中存在则返回 true否则返回 falseprop in objectprop 可为 字符串 或 symbol 类型的属性名或 数组索引// 数组中使用 inlettreesnewArray(redwood,bay,cedar,oak,maple);3intrees// 返回true6intrees// 返回falselengthintrees// 返回true (length是一个数组属性)Symbol.iteratorintrees// 返回true (数组可迭代只在ES2015上有效)// 内置对象PIinMath// 返回true// 自定义对象letmycar{make:Honda,model:Accord,year:1998};makeinmycar// 返回true继承的属性返回 truetoStringin{};// 返回truedelete 删除的属性 in 返回 falseletmycar{make:Honda,model:Accord,year:1998};deletemycar.make;makeinmycar;// 返回falselettreesnewArray(redwood,bay,cedar,oak,maple);deletetrees[3];3intrees;// 返回false将一个属性的值赋值为 undefined而没有删除它 in 返回 true。letmycar{make:Honda,model:Accord,year:1998};mycar.makeundefined;makeinmycar;// 返回truelettreesnewArray(redwood,bay,cedar,oak,maple);trees[3]undefined;3intrees;// 返回truevoid 操作符用于返回一个表达式的值是 undefined 的结果。使用场景创建一个无任何跳转的超链接死链ahrefjavascript:void(0)Click me/atypeof 运算符适用于检测值类型 null 除外 、函数和类的数据类型对引用类型的数据只能得到 object参数返回值数值number字符串string布尔型booleanundefinedundefinednullobjectSymbol 数据symbolNaNnumberInfinitynumber函数functionclass类function数组等对象objectinstanceof 运算符判断一个对象是否是由某个指定的构造器函数所创建functionHero(){}varhnewHero();varo{};hinstanceofHero;truehinstanceofObject;trueoinstanceofObject;true算术运算符y5运算符描述例子x 运算结果y 运算结果在线实例加法xy275实例 »-减法xy-235实例 »*乘法xy*2105实例 »/除法xy/22.55实例 »%取模余数xy%215实例 »自增xy66实例 »xy56实例 »–自减x–y44实例 »xy–54实例 »任何值和NaN做运算的结果都是NaN。任何的值和字符串做加法运算都会先转换为字符串然后进行字符串拼接。任何值做-、*、/运算时都会自动转换为Number。result1true1;// 2 1 1result2truefalse;// 1 1 0result31null;// 1 1 0result4100-1// 99a是变量而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赋值运算符给定x10和y5运算符例子等同于运算结果在线实例xy无同等写法x5实例 »xyxxyx15实例 »-x-yxx-yx5实例 »*x*yxx*yx50实例 »/x/yxx/yx2实例 »%x%yxx%yx0实例 »??x??yxx??yx10仅当 x 为 null 或 undefined 时将 y 赋值给 x其他如 x||y 即 xx||y xy 即 xxy比较运算符给定 x5运算符描述比较返回值实例等于比较前两边的操作数会被自动转换为相同的数据类型x8false实例 »x5true实例 »绝对等于值和数据类型均相等比较前两边的操作数不会发生数据类型转换x“5”false实例 »x5true实例 »!不等于比较前两边的操作数会被自动转换为相同的数据类型x!8true实例 »!不绝对等于值或数据类型有一个不相等或两个都不相等比较前两边的操作数不会发生数据类型转换x!“5”true实例 »x!5false实例 »大于x8false实例 »小于x8true实例 »大于或等于x8false实例 »小于或等于x8true实例 »任何值和NaN做任何比较都是false。NaN不和任何值相等包括他本身。 会将不同类型的东西转为相同类型进行比较大部分情况下都是转换为数字。例如console.log(66);// 打印结果true。这里的字符串6会先转换为数字6然后再进行比较console.log(true1);// 打印结果trueconsole.log(0-0);// 打印结果trueconsole.log(null0);// 打印结果false全等不会做类型转换严格相等运算符不适用的场景NaNNaN//false-00//true-00//true00//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逻辑运算符给定 x6 y3运算符功能例子||或(x 5 || y 5) 结果为 false且(x 10 y 1) 结果为 true!非!(xy) 结果为 true??空值合并校验null??1 结果为 1undefined??1 结果为 1‘’??1 结果为 ‘’??为空值合并校验当??前的值为 null 或 undefined 时则返回??后的值否则返回??前的值。为短路的与如果第一个值为false则不会执行第二个值//第一个值为true会检查第二个值truealert(看我出不出来);// 可以弹出 alert 框//第一个值为false不会检查第二个值falsealert(看我出不出来);// 不会弹出 alert 框两个非布尔值的 运算如果第一个值为true则必然返回第二个值23得到3如果第一个值为false则直接返回第一个值3得到03得到3特别说明此处0转换为布尔值后是true不是false||为短路的或如果第一个值为true则不会执行第二个值两个非布尔值的 || 运算如果第一个值为true则直接返回第一个值1||3得到1如果第一个值为false则返回第二个值||3得到3此现象常用于给变量指定默认值如当a有值时将a赋值给b否则b为10leta;letba||10;// 此时 b 会被赋值为 10此种技巧简单而优雅但以下情况除外当a为虚值时b无法得到a的值leta0;letba||10;// 此时 b 还是 10对非布尔值进行逻辑运算则会先将其转换为布尔值然后再操作。vara10;a!a;//此时a的数据类型为布尔类型值为false【实战】容错处理【重要】当成功调用一个接口后返回的数据为 result 对象。这个时候我们用变量 a 来接收 result 里的图片资源。通常的写法是这样的if(result.resultCode0){letaresultresult.dataresult.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(age18)?年龄太小:年龄已达到;如果条件的表达式的求值结果是一个非布尔值会将其转换为布尔值然后再运算。位运算符https://blog.csdn.net/web_green/article/details/136687142运算符的优先级优先级由高到低.、[]、new、--!、~、单目、-单目、typeof、void、delete%、*、/双目、-双目、、、、、、!、^ (位运算中的异或运算符)|||?:、、-、*、/、%、、、、、^、|,()不属于运算符但可用于提升运算的优先级被()包裹的内容会优先计算从最内层的()开始计算逐层展开早上好(obj[name(12)]同学)计算(12)计算[name(12)]计算obj[name(12)]计算(obj[name(12)] 同学)计算早上好 (obj[name(12)] 同学)