JavaScript 的运算符们

360 阅读4分钟

运算符

简介

运算符的分类

按功能可分为: 算术运算符, 位运算符, 关系运算符, 逻辑运算符 按参与运算的操作数的个数分为: 单目运算, 双目运算, 三目运算

运算符的优先级和结合性

* / % 优先级要高于 + - (小学教的用上错不了)

算术运算符

什么是算数运算符

+ - * / %

算术运算符的注意点

  1. 加法运算的注意点

    • 任何非数值类型的数据在参与加法运算之前, 都会被自动的转换成数值类型之后, 再参与运算
    • 任何数据和 NaN 进行运算, 结果都是 NaN
    • 任何数据和字符串相加, 都会被先转换成字符串之后再运算
  2. 减法运算的注意点

    • 任何非数值类型的数据在参与加法运算之前, 都会被自动的转换成数值类型之后, 再参与运算
    • 任何数据和NaN进行运算, 结果都是NaN
    • 任何数据和字符串相减, 都会先把字符串转换成数值类型之后再运算
  3. 乘法和除法运算的注意点

    • 和减法运算的注意点一模一样

      let a = 5;
      let b = 2;
      let c = a/b;
      console.log(c); // 2.5 
      
  4. **取模(取余)**运算注意点 格式: m%n = 余数

    • 如果m>n的, 那么就正常取余
    • 如果m<n的, 那么结果就是m
    • 如果n是0, 那么结果就是 NaN
    • 取余运算结果的正负性, 取决于 m 而不是 n

赋值运算符

1.什么是赋值运算符? 赋值运算符就是将等号右边的值存储到等号左边的变量中

  • 简单类型的赋值运算符

  • 复杂类型的赋值运算符 += -= *= /= %=

赋值运算符的优先级和结合性

  • 赋值运算符的优先级低于算数运算符
  • 赋值运算符的结合性是右结合性(从右至左的计算)
  • 赋值运算符的左边只能放变量, 不能放常量

自增自减运算符

  1. 什么是自增自减运算符?
    • 自增运算符: ++
    • 自减运算符: --
  2. 自增自减运算符的作用
    • 自增运算符: 对一个变量中保存的数据进行 +1 操作
    • 自减运算符: 对一个变量中保存的数据进行 -1 操作
  3. 自增和自减写在变量的前面和后面的区别?
    • 写在变量的后面, 表示变量先参与其它的运算, 然后再自增或者自减
    • 写在变量的前面, 表示变量先自增或者自减, 然后再参与其它的运算

注意点:

  1. 自增自减运算符只能出现在变量的前面或者后面, 不能出现在常量或者表达式的前面或者后面

  2. 什么是表达式? 表达式就是用运算符连接在一起有意义有结果的语句

    • 1 + 1; 表达式
    • a * 5; 表达式
  3. 在企业开发中自增自减运算符最好单独出现, 不要出现在表达式中

    --666; // 错误的写法
    (1 + 1)++; // 错误的写法
    let res = a++ + b; // 不推荐的写法
    let res = a + b;
    a++; // line3 拆为 line4 和 line5 才是友善的代码
    
  4. 小结:

    // 朴素写法 vs 复杂类型的赋值运算 vs 自增
    let num = 1;
    // num = num + 1;
    // num += 1;
    // num++;
    

关系运算符

简介

  1. 什么是关系运算符 > < >= <= == != === !==
  2. 关系运算符的返回值是布尔值, 要么是 true, 要么是 false
  • 如果关系成立, 就返回 true
  • 如果关系不成立, 就返回 false

注意点:

  1. 对于非数值类型的数据, 会先转换成数值类型, 再进行判断
  2. 对于关系运算符来说, 任何数据和 NaN 进行比较, 返回值是 false
  3. 如果参与比较的是字符串类型, 那么不会转换成数值类型再比较, 而是直接比较字符对应的 Unicode 编码
  4. 特殊比较的结果

双等与三等

=== 和 !== 会同时判断取值和数据类型

== != 只会判断取值

结合性与优先级

关系运算符都是左结合性 (从左至右的运算)

关系运算符中 > < >= <= 的优先级高于 == != === !==

逻辑运算符

什么是逻辑运算符? (名称?格式?返回值?特点?) (这个的非布尔值返回值把我搞懵逼过)

  • 逻辑与: && 格式: 条件表达式A && 条件表达式B 返回值: true false (还能是数字呢, 逻辑或同理) 特点: 一假则假
  • 逻辑或: || 格式: 条件表达式A || 条件表达式B 返回值: true false 特点: 一真则真
  • 逻辑非: ! 格式: !条件表达式 返回值: true false 特点: 真变假, 假变真

逻辑运算符的优先级和结合性

​ 逻辑运算符的结合性是左结合性(从左至右的运算)

​ 在逻辑运算中 && 的优先级高于 ||

注意点:

  1. 在逻辑运算中如果不是布尔类型, 那么会先转换成布尔类型, 再参与其它的运算
  2. 在逻辑与运算中, 如果参与运算的不是布尔类型, 返回值有一个特点 格式: 条件A && 条件B 如果条件A 不成立, 那么就返回条件A 如果条件A 成立, 无论条件B 是否成立, 都会返回条件B
  3. 在逻辑或运算中, 如果参与运算的不是布尔类型, 返回值有一个特点 格式: 条件A || 条件B 如果条件A 成立, 那么就返回条件A 如果条件A 不成立, 无论条件B 是否成立, 都会返回条件B
  4. 在逻辑与运算中,有一个逻辑短路现象 格式: 条件A && 条件B 由于逻辑与运算的规则是一假则假, 所以只要条件A 是假, 那么条件B 就不会运算
  5. 在逻辑或运算中,有一个逻辑短路现象 格式: 条件A || 条件B 由于逻辑或运算的规则是一真则真, 所以只要条件A 是真, 那么条件B 就不会运算

逗号运算符

在JavaScript中逗号运算符一般用于简化代码

逗号运算符优先级和结合性

  • 逗号运算符的结合性是左结合性(从左至右的运算)
  • 逗号运算符的优先级是所有运算符中最低

逗号运算符也是一个运算符, 所以也有运算符结果

  • 逗号运算符的运算符结果就是最后一个表达式的结果

  • 表达式1, 表达式2, 表达式3, ...;

    let res = ((1 + 1), (2 + 2), (3 + 3));
    console.log(res); // 6
    // 注意这里不加外面的大括号会报错, 话说这写法蛮清奇的
    

三目运算符

什么是三目运算符? 三目运算符又称之为条件运算符

三目运算符格式

  • 条件表达式 ? 结果A : 结果B;
  • 在三目运算符中当条件为真的时候, 就会返回结果A
  • 在三目运算符中当条件为假的时候, 就会返回结果B

注意点:

  • 在三目运算符中 ? 和 : 不能单独出现, 要么一起出现, 要么一起不出现

扩展运算符

什么是扩展运算符? 起到折叠或展开元素的作用 (这里元素指的是变量或常量或占位符)

扩展运算符格式

  • ...

作用:

  • 把多出来的参数打包 (只能放最后) (运算符在左边)
  • 拼接数组时展开数组 (不需要放最后) (运算符在右边)
  • 将传递给函数的所有多出来的实参打包到一个数组中 (运算符在右边)