开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

1、算术运算符

运算符（操作符）

• 运算符可以用来对一个或多个操作数（值）进行运算
• 算术运算符：

• 加法运算符

• 减法运算符

• 乘法运算符 / 除法运算符 ** 幂运算 % 模运算，两个数相除取余数

• 注意：
• 算术运算时，除了字符串的加法， 其他运算的操作数是非数值时，都会转换为数值然后再运算

JS是一门弱类型语言，当进行运算时会通过自动的类型转换来完成运算

当任意一个值和字符串做加法运算时，它会先将其他值转换为字符串，

然后再做拼串的操作

可以利用这一特点来完成类型转换

可以通过为任意类型 + 一个空串的形式来将其转换为字符串

其原理和String()函数相同，但使用起来更加简洁

<script>
    let a = 1 + 1
    a = 10 - 5
    a = 2 * 4
    a = 10 / 5
    a = 10 / 0 // Infinity
    a = 10 ** 4
    a = 9 ** .5 // 开方
    a = 10 % 3
​
    a = 10 - '5' // 10 - 5
    a = 10 + true // 10 + 1
    a = 5 + null // 5 + 0
    a = 6 - undefined // 6 - NaN
​
    a = 'hello' + 'world'
    a = '1' + 2 // "1" + "2"
​
    a = true
    a = a + ''
    console.log(typeof a, a)
</script>

2、赋值运算符

赋值运算符用来将一个值赋值给一个变量
=
    - 将符号右侧的值赋值给左侧的变量
??=
    - 空赋值
    - 只有当变量的值为null或undefined时才会对变量进行赋值
+=
    - a += n 等价于 a = a + n
-=
    - a -= n 等价于 a = a - n
*=
    - a *= n 等价于 a = a * n
/=
    - a /= n 等价于 a = a / n
%=
    - a %= n 等价于 a = a % n
**=
    - a **= n 等价于 a = a ** n

<script>
    let a = 10
    a = 5 // 将右边的值 赋值 给左边的变量
    let b = a // 一个变量只有在=左边时才是变量，在=右边时它是值
​
    a = 66
    a = a + 11 // 大部分的运算符都不会改变变量的值，赋值运算符除外
​
    a = 5
    // a = a + 5 // 10
    a += 5 // 在a原来值的基础上增加5
​
    a = null
​
    a ??= 101
    console.log(a)
</script>

3、一元±

一元的±

+正号

• 不会改变数值的符号

-负号

• 可以对数值进行符号位取反

当我们对非数值类型进行正负运算时，会先将其转换为数值然后再运算

<script>
       let a = -10
       a = -a
       let b = '123'
       b = +b // b = Number(b)
       console.log(typeof b, b)
</script>

4、自增和自减

++ 自增运算符

• ++ 使用后会使得原来的变量立刻增加1
• 自增分为前自增(++a)和后自增(a++)
• 无论是++a还是a++都会使原变量立刻增加1
• 不同的是++a和a++所返回的值不同 a++ 是自增前的值 旧值 ++a 是自增后的值 新值

-- 自减运算符

• 使用后会使得原来的变量立刻减小1
• 自减分为前自减(--a)和后自减(a--)
• 无论是--a还是a--都会使原变量立刻减少1
• 不同的是--a和a--的值不同 --a 是新值 a-- 是旧值

<script>
    let a = 10
​
    // let b = a++
    // console.log("a++ =", b)
​
    let b = ++a
    // console.log("++a =", b)
    // console.log(a)
​
    let n = 5
    //           5 + 7 + 7
    let result = n++ + ++n + n
​
    // console.log(result)
    a = 5
​
    // console.log('--a', --a)
    console.log('a--', a--)  
    console.log(a)
</script>

5、逻辑运算符1

! 逻辑非 - ! 可以用来对一个值进行非运算 - 它可以对一个布尔值进行取反操作 true --> false false --> true - 如果对一个非布尔值进行取反，它会先将其转换为布尔值然后再取反 可以利用这个特点将其他类型转换为布尔值

    - 类型转换
          转换为字符串
          显式转换
            String()
          隐式转换
            + ""
            转换为数值
            显式转换
              Number()
            隐式转换
              +
            转换为布尔值
            显式转换
              Boolean()
            隐式转换
              !!

&& 逻辑与 || 逻辑或

<script>
    let a = true
    a = !a
​
    a = 123
​
    a = !!a
​
    console.log(typeof a, a)
</script>

6、逻辑运算符2

&& 逻辑与

- 可以对两个值进行与运算
    - 当&&左右都为true时，则返回true，否则返回false
    - 与运算是短路的与，如果第一个值为false，则不看第二个值
    - 与运算是找false的，如果找到false则直接返回，没有false才会返回true
    - 对于非布尔值进行与运算，它会转换为布尔值然后运算
        但是最终会返回原值
    - 如果第一个值为false，则直接返回第一个值
        如果第一个值为true，则返回第二个值

|| 逻辑或

- 可以对两个值进行或运算
    - 当||左右有true时，则返回true，否则返回false
    - 或运算也是短路的或，如果第一个值为true，则不看第二个值
    - 或运算是找true，如果找到true则直接返回，没有true才会返回false
    - 对于非布尔值或运算，它会转换为布尔值然后运算
        但是最终会返回原值
    - 如果第一个值为true，则返回第一个
        如果第一个值为false，则返回第二个

<script>
    let result = true && true // true
    result = true && false // false
    result = false && true // false
    result = false && false // false
​
    // true && alert(123) // 第一个值为true，alert会执行
    false && alert(123) // 第一个值为false，alert不会执行
​
    //       true && true  -> true
    result = 1 && 2 // 2 
    //       true && false -> false
    result = 1 && 0 // 0
    //       false && false -> false 
    result = 0 && NaN // 0
​
​
    result = true || false // true
    result = false || true // true
    result = true || true // true
    result = false || false // false
​
    // false || alert(123) // 第一个值为false，alert会执行
    true || alert(123) // 第一个值为true，alert不会执行
​
    result = 1 || 2 // 1
    result = "hello" || NaN // "hello"
    result = NaN || 1 // 1
    result = NaN || null // null
    console.log(result)
</script>

7、关系运算符1

关系运算符

• 关系运算符用来检查两个值之间的关系是否成立 成立返回true，不成立返回false

用来检查左值是否大于右值

/>=

• 用来检查左值是否大于或等于右值 <
• 用来检查左值是否小于右值 <=
• 用来检查左值是否小于或等于右值

注意： 当对非数值进行关系运算时，它会先将前转换为数值然后再比较 当关系运算符的两端是两个字符串，它不会将字符串转换为数值， 而是逐位的比较字符的Unicode编码 利用这个特点可以对字符串按照字母排序 注意比较两个字符串格式的数字时一定要进行类型转换

<script>
    let result = 10 > 5 // true
    result = 5 > 5 // false
    result = 5 >= 5 // true
​
    result = 5 < "10" // true
    result = "1" > false // true
​
    result = "a" < "b" // true
    result = "z" < "f" // false
    result = "abc" < "b" // true
​
    result = "12" < "2" // true
    result = +"12" < "2" // false
​
    // 检查num是否在5和10之间
    let num = 4
    // result = 5 < num < 10 // 错误的写法
    result = num > 5 && num < 10
    console.log(result)
</script>

8、相等运算符

==

• 相等运算符，用来比较两个值是否相等
• 使用相等运算符比较两个不同类型的值时， 它会将其转换为相同的类型（通常转换为数值）然后再比较 类型转换后值相同也会返回true
• null和undefined进行相等比较时会返回true
• NaN不和任何值相等，包括它自身

===

• 全等运算符，用来比较两个值是否全等
• 它不会进行自动的类型转换，如果两个值的类型不同直接返回false
• null和undefined进行全等比较时会返回false

!=

• 不等，用来检查两个值是否不相等
• 会自动的进行类型转换

!==

• 不全等，比较两个值是否不全等
• 不和自动的类型转换

    <script>
​
        let result = 1 == 1 // true
        result = 1 == 2 // false
        result = 1 == '1' // true
        result = true == "1" // true
​
        result = null == undefined // true
        result = NaN == NaN // false
​
        result = 1 === "1" // false
        result = null === undefined // false
​
        result = 1 != 1 // false
        result = 1 != "1" // false
        result = 1 !== "1" // true
        console.log(result)
    </script>

9、条件运算符

条件运算符

条件表达式 ? 表达式1 : 表达式2

• 执行顺序：

条件运算符在执行时，会先对条件表达式进行求值判断，

如果结果为true，则执行表达式1

如果结果为false，则执行表达式2

    <script>
        // false ? alert(1) : alert(2)
        let a = 100
        let b = 200
        // a > b ? alert('a大！') : alert("b大！")
        let max = a > b ? a : b
        // alert(max)
    </script>

10、运算符的优先级

和数学一样，JS中的运算符也有优先级，比如先乘除和加减。

可以通过优先级的表格来查询运算符的优先级

developer.mozilla.org/en-US/docs/…

• 在表格中位置越靠上的优先级越高，优先级越高越先执行，优先级一样自左向右执行

优先级我们不需要记忆，甚至表格都不需要看

因为()拥有最高的优先级，使用运算符时，如果遇到拿不准的，可以直接通过()来改变优先级即可

    <script>
        let a = 1 + 2 * 3 // 7
        a = (1 && 2) || 3
        console.log(a)
    </script>

拓展：JS特殊运算符

11.1 数字转化：单目运算符 +

单目运算符 + 作用于数字无效，结果不变。但是可以用来转化非数字类型为数字，等效于 Number()。

let x = false;
let y = "";
let z = "123.4";
console.log(+x); // 0
console.log(+y); // 0
console.log(+z); // 123.4

用于非数字型之间的数学运算，很简洁：

let a = "12";
let b = "24";
console.log(+a + +b); // 36

11.2 逗号运算符 ,

逗号运算符能让我们处理多个语句，使用 , 将它们分开。每个语句都运行了，但是只有最后的语句的结果会被返回。

let a = (3 + 4, 5 + 6);
console.log(a); // 11

11.3 布尔值转换符 !!

两个相邻的非逻辑运算符组成的 !!，可以将一个值转换为对应的布尔值。等效于 Boolean()。

console.log(!!"0"); // true
console.log(!!0); // false
console.log(!!undefined); //false
console.log(!!"aaa"); // true

11.4 空值合并运算符 ??

我们将值既不是 null 也不是 undefined 的表达式定义为已定义的值（defined）。即：??。

a ?? b 结果为：

• 若 a 已定义，则结果为 a
• 若 a 不是已定义的，则结果为 b

等价于：

(a !== null && a !== undefined) ? a : b;