ES5入门 — 运算符

叁歲伎倆 2022-05-01 13:52 193阅读 0赞

> 上一篇我们简单介绍了JS的引入、变量、数据类型。接下来，我们就来了解一下JS当中的运算符。

### = 赋值运算符 ###

在声明变量的时候，我们已经提到过 **=** 在JS当中是赋值运算。

// = 在这里是 赋值运算
    var a = 10；
    var b = 20；
    
    // 如果是表达式,会将表达式的值(结果),赋值给变量
    var c = 10 + 20;
    复制代码

### 算术运算符 ###

加 +
    减 -
    乘 *
    除 /
    取余 %
    复制代码

我们一个个来看，探寻其中的奥秘。（讲真和小学数学四则运算没什么差别，不过只是涉及了一些数据类型转换）

#### 加 + ####

1.  如果操作数都是**数字**，则执行常规加法运算。
2.  如果有一个数为NaN，则计算结果为NaN。
3.  Infinity + Infinity = Infinity； (-Infinity) + (-Infinity) = -Infinity； Infinity + (-Infinity) = NaN；
4.  如果两个都为**字符串**，则拼接字符串。
5.  如果一个为数字，一个为字符串，会先将数字转换为String类型，再拼接字符串。

// 拼接字符串
    var a = 'hello';
    var b = 'world';
    console.log(a + b) // 输出 'helloworld'
    console.log(a + 2019) // 输出 'hello2019'
    复制代码

#### 减 - ####

1.  如果操作数都是数字，则执行常规的减法运算。
2.  如果有一个数为NaN，则计算结果为NaN。
3.  Infinity - Infinity = NaN； (-Infinity) - (-Infinity) = NaN
4.  Infinity - (-Infinity) = Infinity； -Infinity - Infinity = -Infinity；
5.  如果一为数字，一个为字符串，会先将字符串转换为Number类型，再执行减法运算。

#### 乘 \* ####

1.  如果操作数都为数字，则执行常规的乘法运算，如果结果超出JS数字范围，返回Infinity或者-Infinity。
2.  NaN 参与乘法运算，结果为NaN。
3.  Infinity \* 0 = NaN；
4.  Infinity与非0操作数运算时，结果返回Infinity或者-Infinity。取决于有符号操作数的符号。
5.  Infinity \* Infinity，结果是Infinity。
6.  如果有一个操作数不是数值，那么在参与运算前会先对其执行Number()转换为数值类型，再计算。

#### 除 / ####

1.  如果操作数都是数值，则执行常规的除法运算，如果结果超过JS数值范围，则返回Infinity或者-Infinity
2.  NaN参与除法运算，则结果返回NaN
3.  Infinity / Infinity，结果为NaN
4.  0 / 0， 结果为NaN
5.  如果是非0的有限数被0除（即非0数 / 0），则结果是Infinity或者-Infinity，取决于有符号操作数的符号。
6.  如果是Infinity被任何非0整数值除（即Infinity / 非0整数），则结果是Infinity或者-Infinity
7.  如果有一个操作数不是数值，那么在参与运算前会先对操作数执行Number()将其转化为数值，再应用上面的规则。

#### 取余 % ####

1.  如果操作数都是数值，则执行常规的取余运算。
2.  如果被除数是无穷大值，而除数是有限大值，结果为NaN。
3.  如果被除数是有限大值，除数是0，结果为NaN。
4.  被除数是0，结果为0
5.  如果有一个操作数不是数值，那么在参与运算前会先对操作数执行Number()将其转化为数值，再应用上面的规则。

#### 括号 () ####

1.  有括号,先算括号里边的数。（是不是想到了童年被数学老师配的恐惧！）

#### \++ 和 -- ####

1.  变量++； 后++ , 先取值再加1 , 表达式的结果(值)是 变量+1 之前的值 ,但是此时 变量 已被 加1
2.  \++变量； 先++ , 先加1再取值 , 表达式的结果(值)是 变量+1 之后的值
3.  功能(常用) : 都实现变量的 自动加1(只是表达式结果不一样而已 ,并不影响实现变量加1)
4.  \-- 同理

### 比较（关系）运算符 ###

> 大于
    < 小于
    >= 大于等于
    <= 小于等于
    == 等于 
    != 不等于 (==的反面)
    === 严格等于 
    !== 严格不等于(===的反面)
    复制代码

**返回值（计算结果）为 true（关系成立） 或 false（关系不成立）**

**比较规则（隐式转换）**

1.  都是数值，正常比较。
2.  都是字符串，比较对应的字符编码值。
3.  一个是数值，则将另一个操作数转化为一个数值，然后进行数值比较。
4.  如果一个是布尔值，那么先将其转化为数值，再进行比较。
5.  如果一个是对象，则调用这个对象的valueOf()方法，再按照上面规则比较；如果对象没有valueOf()方法，那么调用toString()方法，再按规则进行比较。
6.  不能连用。例如 1 <= num <= 5 会存在语法错误。
7.  === 会先比较数据类型,类型不一致,则返回 false。== 数据类型不一致时，会进行隐式转换。

### 逻辑运算符 ###

&& 与   都真才真
    || 或   一个真，即为真
    !  非   取反
    复制代码

逻辑运算符常用于布尔（逻辑）值之间; 当操作数都是布尔值时，返回值也是布尔值。 不过实际上 **&&和||返回的是一个特定的操作数的值** ，所以当它用于非布尔值的时候，返回值就可能是非布尔值。

**换种说法来讲，逻辑运算符返回的其实是其中的操作数**。

#### 逻辑运算规则 ####

**逻辑与 &&**

示例：exp1 && exp2

**解析：** 如果 exp1 能被转换为 false，则返回 exp1；如果exp1 能被转换为 true，则返回 exp2。

**逻辑或 ||**

示例：exp1 || exp2

**解析：** 如果 exp1 能被转换为 false，则返回 exp2；如果exp1 能被转换为 true，则返回 exp1。

**逻辑非 !**

示例：!exp

**解析：** 如果 exp 能转换为true，则返回false。

**能被转换为false的值有null, 0, NaN, 空字符串("")和undefined。**

var a5 = "Cat" && "Dog";    // Dog
    var a6 = false && "Cat";    // false
    var a7 = "Cat" && false;    // false
    
    var o5 = "Cat" || "Dog";    // Cat
    var o6 = false || "Cat";    // Cat
    var o7 = "Cat" || false;    // Cat
    
    var n1 = !true;  // false
    var n2 = !false; // true
    var n3 = !"Cat"; // false
    复制代码

#### 短路求值 ####

*  false && anything // 被短路求值为false（遇到false就返回）
 *  true || anything // 被短路求值为true（遇到true就返回）
 *  也就是说 上述 anything 部分并不会进行求值。

### 条件（三元）运算符 ###

JavaScript中唯一需要三个操作数的运算符。运算的结果根据给定条件在两个值中取其一。语法为：

条件 ? 值1 : 值2
    复制代码

**如果条件为真，则结果取 值1。否则为 值2。你能够在任何允许使用标准运算符的地方使用条件运算符。**

var status = (age >= 18) ? "adult" : "minor";
    // 当当 age 大于等于18的时候，将“adult”赋值给 status；否则将“minor”赋值给 status。
    复制代码

### 结语 ###

到这里，我们已经了解了JS当中常见的运算符，当然除此之外，还有其他的一些运算符，随着我们对JS涉猎越来越多，我们肯定会有机会接触到，到时候请发挥你的自学能力，尽情的去查阅文档，毕竟学习能力才是第一生产力。

转载于:https://juejin.im/post/5cbea9d66fb9a032106bce0a