神奇的运算符

这是我参与新手入门的第二篇文章

前言

大家好，又见面了，这次我给大家谈一谈我在前端工作中，对运算符的一些理解. 在开始之前，先介绍一下什么是运算元. 运算元——运算符应用的对象。比如说乘法运算1*2，有两个运算元：左运算元1和右运算元2. 而中间的*号就是运算符了，拥有两个运算元的运算符就是二元运算符，那么什么是一元运算符、什么是三元运算符就不用多说了吧, 好了，废号不多说，下面我们进入正题

一元运算符

++、-- 运算符

这类运算符使用频率大多在函数内或者for循环中。比如

const arr = [1];
for(let i = 0; i < arr.length; i++) {}
复制代码

另外++,--放在运算元的前面和后边都是有区别的。 下面看一道经常会问到的面试题:

let variable = 0;
console.log(variable++);
console.log(++variable);
console.log(--variable);
console.log(variable--);
console.log(variable)
复制代码

答案是: 0, 2, 1, 1, 0.
放在后边的++运算符，是会对本身的变量进行操作后再执行计算赋值，放在前面的++才会先计算赋值后，对该变量再进行操作, 知道了这层关系，就很好理解了。

let variable = 0;
console.log(variable++); // ++在后边，所以先对原来的变量进行操作，也就是console. 原来的值是0. 
console.log(++variable); // ++在前面，所以会先计算. 这时候variable已经是1了，再进行计算后，就是2
console.log(--variable); // 按上面的逻辑，这里就是1
console.log(variable--); // 按上面的逻辑，这里还是1
console.log(variable)    // 最后经过上一层--计算，这是就是0了.
复制代码

- 负号运算符

它的作用就是对数字进行正负转换

let variable = 1;
let otherVariable = -variable
console.log(otherVariable) // -1
复制代码

~按位非运算符

作用是将每位二进制取反. 它的使用场景，目前我在项目中主要是数组中查找是否存在某一个值的时候会用到.

const variable = 1
const arr = [1, 2, 3]
if (arr.indexOf(variable) > -1) { console.log('存在') } // 一般我们是这样判断的
if (~arr.indexOf(variable)) { console.log('存在') } // 但是我们知道按位非运算符的原理后，我们这可以这样简写, 
复制代码

因为如果它不存在的话，则返回的是-1, 那么~-1就是0了， 0相当于是false, 则不会走到if代码块里边去. 相反它就可以走到if代码块里边了.

delete运算符

delete运算符用于删除对象的某一个属性, 比如

let obj = { name: 'nancy', age: 25 }
const returnValue = delete obj.age
console.log(obj) // { name: 'nancy' }
console.log(returnValue) // true
复制代码

删除对象，返回值是true,即使删除对象中不存在的属性，也会返回true
值得玩味的一点是，如果对象原型链上如果也存在同名的属性的话，那么删除了该对象的这个属性之后，再访问这个属性，访问的就是原型链上的属性了.

function person () { this.name = 'bob' }
person.prototype.name = 'nancy'
var man = new person()
console.log(man.name) // bob
delete man.name
console.log(man.name) // nancy
复制代码

二元运算符

||和&&运算符

它一般用在if判断语句中，除了if语句外，我在项目中用到它最多的地方应该是用它做一个短路. 比如

let money = getMoney() || 0
复制代码

如果getMoney方法拿到的是一个空值的话，则给一个默认值0
&&运算符的话也是类似的一个场景,比如写vue中

this.$refs.table && this.$refs.table.initData()
复制代码

我们可以用&&去做一个判空操作，这样的话，就可以少些一个if判断了,代码看起来更简洁一点

??运算符

它是ES2020引入的一个新的运算符和||在一些时候用法相似。 比如

let name = hello ?? 'hello world'
复制代码

如果hello是null或者undefined的话，则name取到的是hello world,如果我们用||语句的话，如果hello是空字符串或者0,或者false的话，则也会取到hello world

其他二元运算符

==和===

console.log(0 == false) // true
console.log(0 === false) // false
复制代码

%运算符

项目中用它最多的地方就是去判断奇偶了

let isOdd = num % 2 === 0
复制代码

+,-,*,/,+=,-=,*=,/=,%= 加减乘除这些运算符，这个就没啥好说了.

**幂运算符

console.log(2**3) // 8
复制代码

位运算符

位运算符说实话，我不太熟，之前在看vue-next的源码的时候，有看到里边在做一些编译优化的时候，用做对一些内容做的标记.

三元运算符

let pi = zuo ? die : live // 不作不会死，皮一下很开心. 哈哈哈
复制代码

好了，天色已晚，今天就先复习到这里了。 下次见~ ?