一些JS操作符号JS的操作符那么多，有些是经常用的，有些可能很少使用，但是一旦不经常用，就容易忘记，即便我们不用，也要理

背景

JS的操作符那么多，有些是经常用的，有些可能很少使用，但是一旦不经常用，就容易忘记，即便我们不用，也要理解这些操作符的意思，这样助于我们看明白项目中罕见的操作符，并且灵活使用也是有助于提高编码效率与代码的简洁性

JS的操作符

挑选其中的用的比较少的或者是罕见的再复习一遍

1、指数操作符（**）

在ES7中新增了指数操作符，它的计算效果与Math.pow()一样

Math.pow(2,3); // 8 
2 ** 3; // 8

2、位操作符

现代计算机中数据都是以二进制形式存储的，即0、1两种状态，对二进制数据进行运算叫位运算

2.1 按位与操作符（&）

会对参加运算的两个数据按二进制进行与运算，即两位同时为1时，结果才为1，否则结果为0

场景：

判断奇偶

奇数偶数的二进制数的最末尾是不同的，奇数是1，偶数是0

// 常用的 
if(i % 2 ===0) 

// 新的 
if( (i & 1) ===0) 
// 5 & 1 → 0000 0101 & 0000 0001 = 0000 0001 = 1 末尾为1 结果为奇数

2.2 按位非操作符（~）

会对参加运算的数据按二进制进行取反运算，即将0变成1，1变成0

~ 1 = 0 
~ 0 = 1

场景：可以用于当变量值为0或者1，变量为0时，想要改变这个变量值为1，变量值为1时，想要改变这个变量值为0

2.3 按位异或操作符（^）

会对参加运算的两个数据按二进制位进行异或运算，即两个相应位相同为0，不同为1

场景：同样也适用于想要不停切换变量值从0变成1或者1变成0时候

let x = 1; 
let y = x ^ 0; 
let z = x ^ 1;

3、其他操作符

3.1 双位运算符（~~）

双位运算符相当于正数的Math.floor()<向下舍入并返回小于或等于给定数字的最大整数>和负数的Math.ceil()<四舍五入并返回大于或等于给定数字的较小整数>，即将小数转化为整数， 优势在于执行相同的操作运行速度更快

Math.floor(4.9)===4 // true 
~~4.9===4 // true 

Math.ceil(4.5) // 5 
Math.floor(4.5) // 4 
~~4.5 // 4 

Math.ceil(-4.5) //-4 
Math.floor(-4.5) //-5 
~~4.5 //4

还可以将字符串转换为数字

const str = '1234'
console.log(~~str) // 1234 

const str = '-1234'
console.log(~~str) // -1234

3.2 in 操作符

可以用来判断一个属性是否属于一个对象，返回值是一个布尔值；

const people = { name: "juejing", age:18 };
console.log("city" in people); // false
console.log("name" in people); // true

可以用来判断一个元素是否属于数组里的元素，这里与上边不一样的是：in 前面的变量代表的是数组的索引，所以虽然99存在数组中，但是数组不存在99这个索引

cost array = [1,2,4,99,"bb"];
console.log(99 in array); // false

还可以判断一个属性是否属于对象原型链的一部分，in 能检测到原型链上的属性

const people = { name: "juejing", age:18 };
Object.prototype.city="beijing";
pepople.birthday=undefined;

console.log("city" in people); // true
console.log("year" in people); // false
console.log("birthday" in people); // true 值为undefined的属性

let array = [1,2,3];
console.log("length" in array); // true

对比Object.hasOwnProperty()是用来判断指定对象自身是否含有某个属性的，不能检测到原型链上的属性

const people = { name: "juejing", age:18 };
Object.prototype.city="beijing";
pepople.birthday=undefined;

console.log(Object.prototype.hasOwnProperty.call(people,"city")); // false
console.log(Object.prototype.hasOwnProperty.call(people,"name")); // true
console.log(Object.prototype.hasOwnProperty.call(people,"nationality")); // false
console.log(Object.prototype.hasOwnProperty.call(people,"birthday")); // true 值为undefined的属性

3.3 delete 操作符

用于删除对象的某个属性或者数组元素，删除的是属性本身，不是属性指向的对象

📢📢📢且用了delete操作符后，并不是立刻释放这个属性的引用，只是把属性和这个对象解除绑定，只有当没有变量指向被删除属性的引用时，该属性才会被回收

📢📢📢使用delete删除数组元素后，数组的长度不会改变，只是被删除元素变成空

let obj = { a: 1, b: { c: 1 } };

var newObj=obj.b;
delete obj.a;
delete obj.b;
console.log(obj);  // {}
console.log(newObj); // {c: 1}

//使用delete删除元素后数组长度不变
let array = [1,2,3];
delete array[0]; // [empty,2,3]

📢📢📢delete操作只会在自身对象的属性上起作用，如果对象原型链上有一个同名的属性，那么自身属性被删除后，会使用对象原型链上的同名属性

const people = { name: "juejing", age:18 };
Object.prototype.name="shanghai";
delete people.name;
console.log(people.name); // shanghai

3.4 可选的链式操作符（ ?. ）

允许读取位于连接对象链深处的属性的值，不必验证链中的每个引用是否有效，避免了在引用为null或undefined的情况下报错

3.5 空值合并操作符（ ? ? ）

只针对如果某个属性值不为null和undefined时，就获取该属性值；如果为null和undefined时，取一个默认值

3.6 逻辑空值赋值操作符（ ? ?= ）

3.7 void操作符（ void ）

可以出现在任意类型的操作数之前执行操作数，会忽略操作数的返回值，返回一个undefined。

常用于HTML脚本中执行JS表达式，不需要返回表达式的计算结果。
对于a标签，不想发生跳转，就可以设置 href="javascript:void(0)"

3.8 数值分隔符（_）

ES12新增数值分隔符_，在数值之间提供分隔，易懂，Chrome已经提供了对数值分隔符的支持

let number = 100_0000_0000_0000; // 0太多了

3.9 私有方法/属性符号（#）

在一个类里面可以给属性/方法/getter/setter前面增加#私有标记的方式来标记私有

一些JS操作符号

背景