JS中的一元操作符

Posted 2020-12-02 sukiy

• 表达式
• 一元操作符
• 优先级
• 结合性
• 运算顺序

 

表达式是什么？

---

就是JS 中的一个短语，解释器遇到这个短语以后会把对它进行计算，得到一个结果参与运算，我们把这种要参与到运算中的各种各样的短语称为表达式。实际上，JS 的代码就是由表达式和操作符构成的，可以说除了操作符以外的基本都是表达式。

例如：a + 1；这行代码中，加号左边的a和右边的1都是表达式，而加号是操作符。

 

表达式的分类（大概可以分成6类）

---

1， 原始表达式（4种）：常量、变量、直接量、关键字

• 常量：那些不会改变的量。其实在JS中大部分东西都是可以改变的，如果我们想要让一个东西保持不变，例如关于圆的计算中的PI，可以把它设成常量；常量通常会使用大写字母，或者用下划线来表示；

  const PI = 3.14;
  PI = 3;  // 修改常量的值会报错

• 变量：可以随时发生变化；（这个与JS的基础数据类型不可变不是一码事）

  var a = 1;
  a = 2;  // 给变量a重新赋值

• 直接量：数字、字符串、正则表达式；如：1 + 1； 这里1就是一个直接量；
• 关键字：所有关键字都是表达式；

 

2， 初始化表达式：

• var obj = {name: ‘suki};
• var arr = [1, 2, 3];

 

3， 函数定义表达式: function foo() {}

4， 函数调用表达式：foo();

5， 属性访问表达式：obj.name; obj[name];

6， 对象创建表达式： new Foo();

 

一元操作符

---

只可以操作一个表达式的符号，共有9个；

 

一元加

---

• 对数字进行一元加操作，结果返回数字本身，要注意对负数进行一元加操作结果还是负数啦，不要以为会得到整数；
• 对布尔类型进行一元加操作，true的话返回1，false返回0;
• 对null进行一元加操作，返0；
• 对undefined进行一元加操作，返回NaN；
• 对字符串进行一元加操作，有两种结果，如果字符串由纯数字构成的话，返回1，如果不是则返回NaN；
• 对对象进行一元加操作，也有两种结果，一是返回数字，二是返回NaN；操作过程中首先会调用valueOf方法，如果得不到数字结果，就调用toString方法，再对得到的字符串进行一元加操作；

用途：将表达式转换成数字；

 

一元减

---

• 对数字使用：返回数字的负数；
• 对其他数据类型使用：首先尝试把表达式转换成数字，再取负数；

  var b = false;
  -b;  // -0

首先将false转换成数字得到0，然后取0的负数得到-0，在 JS 中 +0 === -0； // true；

 

前置递增、递减操作符

---

解释器首先会对表达式进行加一或减一的操作，然后再让表达式参与到后面的运算中；

var num1 = 2;
var num2 = 20;
--num 1 + num2;  // 1 + 20

 

后置递增、递减操作符

---

先让表达式参与运算，再对表达式进行加一或减一的操作；平常后置递增、递减操作符用得比较多一点；

var num1 = 2;
var num2 = 20;
num 1-- + num2;  // 2 + 20
num1;  // 1

 

var age = 21;
++age;  // 22
// 如果操作数是数字的话，这两者写法是一样的
age = age + 1;  // 22

但如果涉及到字符串表达式，情况就不一样了

var name = ‘suki’;
++name;  // NaN
// 只要有一个操作数是字符串，加号就会变成字符串连接符
name = name + 1;  // ‘suki1’

 

优先级

---

就像在数学表达式里，先算乘除再算加减， 因为乘除的优先级比加减高；

 

属性访问 > 一元操作符 > 乘除 > 加减 > 比较 > 相等 > 与运算 > 或运算 > 三目运算 ＞ 赋值运算

 

不用记那么多，只要记住下面三点就好了：

• 属性访问表达式拥有最高优先级；
• 赋值运算（＝）具有最低优先级（其实比等号更低的是逗号，但平常逗号不会参与到运算中）；
• 在所有运算符中，一元运算符拥有最高优先级；

 

var a = 3;
++a == 3; // false;

因为相等（==）的优先级比递增操作符（一元操作符）要低，所以会先计算++a，得到4，再计算4==3，返回false；

 

结合性

---

当一行代码中存在多个运算符，而且这些运算符的优先级相等时，那要怎么计算？这就引出了结合性的问题了；

• 左结合
• 右结合

其实就是从左边开始算还是从右边开始算的问题；

所有一元操作符、三目运算符和赋值运算符都是右结合，其他的操作符都是左结合；

!a++；

如果是从左往右运算，!a先得到一个布尔类型，(!a)++最后得到一个数字类型；

如果是从右往左运算，a++先得到一个数字类型，!(a++)后得到一个布尔类型；

逻辑非（!）和递增操作符（++）都是一元运算符，当两个一元运算符同时存在于一行代码中时，从右往左运算，所以最后会得到一个布尔类型的结果；

 

x = a ? b : c ? d : e ? f : g；

三目运算符也是右结合的，从右向左运算，相当于

x = a ? b : (c ? d : (e ? f : g))；

 

var a = b = c = d;

连等赋值，也是从右向左运算，先取d的值，把它赋给c，再把c的值赋给b，再把b的值赋给a；

 

运算顺序

---

当表达式里还包含表达式时怎么处理？

a = 1;
b = a +++ a;
console.log(a, b);  // 2 3

这种情况JS永远是从左向右运行；

1. 首先JS会先计算b，得到b;
2. 再计算a++，得到结果1,但是这个过程结束后a的值变成了2;
3. 第三步计算后面的a，得到2;
4. 第四步计算1+2，得到3;
5. 把3赋值给b;

 

var a = 1;
b = a ++ + ++ a;  // 4

1. 先算a++，得到1，这时a的值变成了2；
2. 再算++a，得到3；
3. 1+3得到4；
4. 把4赋值给b；

 

一元加、一元减、递增操作符、递减操作符

---

这四个操作符对所有数据类型都有效；

• 一元加、一元减其实就是将任何数据类型转换成数字类型（因为所有数据类型都可以被转换成数字）；
• 递增操作符、递减操作符把任何数据类型先转换成数字，然后再进行加一或减一的操作；

 

但对小数进行递减操作的时候得到的结果可能会与想象中的不一样

var a = 1.1;
--a;  // 0.10000000000000009

所以一定要先把小数转换成整数再计算，得到结果再转换回小数；

 

按位非

---

只需知道一点，对一个数字进行按位非运算，就是取负值再减一；例如对10进行按位非运算得到结果是-11；

 

按位与

---

可以用来判断数字的奇偶性；

function even_or_odd(number) {
    return (number & 1) ? "Odd" : "Even";
}

• 奇数转换成二进制最后一位是1，所以和1进行按位与运算会返回1；
• 偶数转换成二进制最后一位是0，所以和1进行按位与运算会返回0；

 

逻辑非

---

把任何数据类型转换成布尔类型，再取反；

 

字符形式的一元操作符

---

typeof： 可以用括号把它要操作的表达式括起来，但不要误以为它是函数，括号只是方便让人看出运算逻辑而已；

void： 无论表达式是什么，都是返回一个undefined；

delete： 用于删除对象的属性；

instanceof： 用来判断对象的构造函数，但其实并不可靠，用得不多；

 

 

 

 

 

————整理自沙翼老师的前端音频教程#陪你读书#（喜马拉雅）