JavaScript常见运算符

Rsquo
175 阅读4分钟

1. 运算符/运算元

1.1 运算符

  • 常见的运算符：加号 +、乘号 *、减号 - 、除号 /

  • 计算机最基本的操作就是执行运算，执行运算时就需要使用运算符来操作：

    • 比如 console.log(20 + 30); + 号就是一个运算符
    • 比如 console.log(20 * 30); * 号也是一个运算符

  • JavaScript按照使用场景的不同将运算符分成了很多种类型：

    • 算术运算符 / 赋值运算符 / 关系(比较)运算符 / 逻辑运算符

1.2 运算元

  • 运算元 —— 运算符应用的对象

    • 比如说乘法运算 5 * 2，有两个运算元，左运算元 5 和右运算元 2

  • 如果一个运算符对应的只有一个运算元，那么它是一元运算符

    • 比如说一元负号运算符（unary negation）-，它的作用是对数字进行正负转换

  • 如果一个运算符拥有两个运算元，那么它是二元运算符

    • 比如 2 + 3

2. 算术运算符

  • 算术运算符用在数学表达式中, 是对数据进行计算的符号，使用方式和数学中一致

    算术运算符.png

  • 取余运算符是 % ，尽管它看起来很像百分数，但实际并无关联

    • a % b 的结果是 a 整除 b 的 余数

  • 求幂运算 a ** b 将 a 提升至 a 的 b 次幂。（ES7中的语法，也叫做ES2016）

    • 在数学中将其表示为 a的b次方
    // %: 取余操作
var num = 20
var result2 = num % 8
console.log(result2) // 4

// **: 2**3 2的三次方
console.log(2 ** 4) // 16
console.log(Math.pow(2, 4)) // 16

3. 赋值运算符

  • = 其实是一个运算符，被称之为 赋值（ assignments ）运算符

    • 语句 x = value 将值 value 写入 x 然后返回 x

  • 链式赋值（Chaining assignments）

    • 链式赋值从右到左进行计算，所有变量共用一个值
    // = 赋值运算符
var num = 123

// 链式赋值
var num1 = num2 = num3 = 321
console.log(num1, num2, num3) // 321 321 321

  • 原地修改：对一个变量做运算，并将新的结果存储在同一个变量中

    原地修改.png

    var num = 100
// num = num + 10
num += 10
// num = num * 10
num *= 10
num **= 2
console.log(num) // 1210000

4. 自增/自减

  • ++ / --

    • 自增 ++ 将变量加1

    • 自减 -- 将变量减1

    • 自增/自减只能应用于变量

      • 将其应用于数值（比如 5++）则会报错

      var currentIndex = 5

// 方法一:
// currentIndex = currentIndex + 1

// // 方法二:
// currentIndex += 1

// 方法三: 自增
currentIndex++
console.log(currentIndex) // 6

// 自减
// currentIndex -= 1
currentIndex--
console.log(currentIndex) // 5

  • 位置

    • 运算符 ++ 和 -- 可以置于变量前，也可以置于变量后

      • 当运算符置于变量后，被称为“后置形式”（postfix form）：counter++。

      • 当运算符置于变量前，被称为“前置形式”（prefix form）：++counter。

      • 两者都做同一件事：将变量 counter 与 1 相加。

    • 前置形式和后置形式的区别

      • 只有使用 ++/-- 的返回值时才能看到区别

      • 如果自增/自减的值不会被使用，那么两者形式没有区别

      • 如果想要对变量进行自增操作，并且需要立刻使用自增后的值，那么需要使用前置形式

      • 前置形式返回一个新的值，但后置返回原来的值

      var currentIndex = 5
// 自己自增或者自减是没有区别
// ++currentIndex
// console.log(currentIndex) // 6
// --currentIndex
// console.log(currentIndex) // 5

// 自增和自减表达式本身又在其他的表达式中, 那就有区别
// var result1 = 100 + currentIndex++
// console.log(currentIndex) // 6
// console.log("result1:" + result1) // 105

// var result2 = 100 + ++currentIndex
// console.log(currentIndex) // 6
// console.log("result2:" + result2) // 106

// 一般写法，下面的阅读性更好
currIndex++
var result = 100 + currentIndex
console.log(currentIndex) // 6
console.log("result:" + result) // 106

5. 运算符的优先级

  • 推荐查阅：MDN文档

  • 部分表格截图 运算符优先级.png

6. 比较运算符

  • 用于比较大小的运算符

    • 大于 / 小于：a > b，a < b
    • 大于等于 / 小于等于：a >= b，a <= b
    • 检查两个值的相等：a == b，请注意双等号 == 表示相等性检查，而单等号 a = b 表示赋值
    • 检查两个值不相等：不相等在数学中的符号是 ≠，但在 JavaScript 中写成 a != b。

  • 比较运算符的结果都是Boolean类型的

    比较运算符.png

7. ==和===的区别

  • 普通的相等性检查 == 存在一个问题，它不能区分 0 和 false，或者空字符串和 false这类运算

    • 因为在比较不同类型的值时，处于判断符号 == 两侧的值会先被转化为数字，而空字符串和 false 转化后它们都为数字 0

  • 如果需要区分 0 和 false，就需要严格相等运算符 ===

    • 严格相等运算符 === 在进行比较时不会做任何的类型转换

    • 如果 a 和 b 属于不同的数据类型，那么 a === b 不会做任何的类型转换而立刻返回 false

  • “不相等”符号 != 类似，“严格不相等”表示为 !==

  • 区别：

    • == : 在类型不相同的情况, 会对运算元进行隐式的转换
      • 大部分情况下, 都是转成数字类型 toNumber()
      • 对象类型相对比较特殊(null), 一般返回false
    • === : 先比较类型, 类型不一致, 直接返回false
      • 严格相等
avatar
文章
阅读
粉丝