JS入门 — 运算符

thewall
439 阅读6分钟

上一篇我们简单介绍了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涉猎越来越多，我们肯定会有机会接触到，到时候请发挥你的自学能力，尽情的去查阅文档，毕竟学习能力才是第一生产力。

avatar
文章
阅读
粉丝