JavaScript学习笔记—运算符

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

1. 算术运算符

+ 加法运算符
- 减法运算符
* 乘法运算符
/ 除法运算符
** 幂运算
% 模运算

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

let a = 1 + 1;
a = 10 - 5;
a = 2 * 4;
a = 10 / 5;
a = 10 / 3; // 3.333333335
a = 10 / 0; // Infinity
a = 10 ** 4; // 10000
a = 9 ** .5; // 开方 3
a = 10 % 2; // 0
a = 10 % 4; // 2
//JS是一门弱类型语言，当进行运算时会通过自动的类型转换来完成运算
a = 10 - "5"; // 10-5
a = 10 + true; // 10 + 1
a = 5 + null; // 5 + 0
a = 6 - undefined; // 6 - NaN
/*
当任意一个值和字符串做加法运算时，它会先将其他值转换为字符串，然后再做拼串的操作
可以利用这一特点来完成类型转换
  可以通过为任意类型 + 一个空串的形式来将其转换为字符串（其原理和String()函数相同，但使用起来更加简洁）
*/
a = "1" + 2; // "1" + "2"
a = true;
a = a + ""; // "true"

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

3. 一元运算符

+ 正号：不会改变数值的符号
- 负号：可以对数值进行符号位取反
当对非数值类型进行正负运算时，会先将其转换为数值然后再运算

let a = -10;
a = -a; // 10
let b = "123";
b = +b; // 123  等价于b = Number(b)
let c = +true; // 1
c = +""; // 0

4. 自增和自减运算符

• 自增运算符 ++
  • 会使原来的变量值立刻增加1
  • 自增分为前自增(++a)和后自增(a++)
  • 两者返回值不同
    • ++a是自增后的值->新值
    • a++是自增前的值->旧值
• 自减运算符 --
  • 会使原来的变量值立刻减小1
  • 自减分为前自减(--a)和后自减(a--)
  • 两者返回值不同
    • --a是自减后的值->新值
    • a--是自减前的值->旧值

let a = 10;
let b = a++;
console.log("b = " + b); // b = 10
console.log("a = " + a); // a = 11;
let n = 5;
// 5 + 7 + 7
let result = n++ + ++n + n;
console.log(result); // 19
 
a = 5;
console.log("--a", --a); // --a 4
console.log("a--", a--); // --a 5
console.log(a); // 4

5. 逻辑运算符

• 逻辑非 !

  • 可以用来对一个值进行非运算
  • 对布尔值取反操作
    • true --> false
    • false --> true
  • 如果对一个非布尔值取反，会先将其转换为布尔值然后再取反，可以利用这个特点将其他类型转换为布尔值
  • 类型转换
    • 转换为字符串
      • 显式转换：String()
      • 隐式转换：+ ""
    • 转换为数值
      • 显式转换：Number()
      • 隐式转换：+
    • 转换为布尔值
      • 显式转换：Boolean()
      • 隐式转换：!!

• 逻辑与 &&

  • 对两个值进行与运算
  • 当&&左右都为true时返回true，否则返回false
  • 对于非布尔值进行与运算，它会先转换为布尔值然后再运算，最终返回原值
  • 找false，如果第一个值为false，直接返回第一个值，如果第一个值为true，则返回第二个值

  换句话说，与运算返回第一个假值，如果没有假值就返回最后一个值

• 逻辑或 ||

  • 可以对两个值进行或运算
  • 当||左右其中一个为true时返回true，否则返回false
  • 对于非布尔值进行或运算，它会先转换为布尔值然后再运算，最终返回原值
  • 找true，如果第一个值为true返回第一个的值，如果第一个值为false，返回第二个的值

  换句话说，或运算将返回第一个真值，如果不存在真值，就返回该链的最后一个值

与运算和或运算区别就是，与运算返回第一个假值，而或运算返回第一个真值。

// 与运算
let result = true && true; // true
result = true && false; // false
result = false && true; // false
result = false && false; // false
true && alert(123); // alert会执行
false && alert(123); // alert不会执行
result = 1 && 2; // 2
result = 1 && 0; // 0
result = 0 && NaN; // 0
// 或运算
result = true || true; // true
result = true || false; // true
result = false || true; // true
result = false || false; // false
true || alert(123); // alert不会执行
false || alert(123); // alert会执行
result = 1 || 2; // 1
result = 1 || 0; // 1
result = "hello" || NaN; // "hello"
result = 0 || NaN; // NaN
result = NaN || 1; // 1

6. 关系运算符

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

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

注意：

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

let result = 10 > 5; // true
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 = 6
result = num > 5 && num < 10; // true

7. 相等运算符

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

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

8. 条件运算符

• 结构：条件表达式 ? 表达式1 : 表达式2
• 执行顺序
  • 执行时回西安对条件表达式进行求值判断
    • 如果结果为true，则执行表达式1
    • 如果结果为false，则执行表达式2

let a = 100;
let b = 20;
let max = a > b ? a : b; // 100

9. 空值合并运算符

• 这是一个最近添加到 JavaScript 的特性
• 如果第一个参数不是 null/undefined，则 ?? 返回第一个参数。否则，返回第二个参数。
• 出于安全原因，JavaScript 禁止将 ?? 运算符与 && 和 || 运算符一起使用，除非使用括号明确指定了优先级。

let x = 1 && 2 ?? 3; // Syntax error
let x = (1 && 2) ?? 3; // 正常工作了

总结

• 空值合并运算符 ?? 提供了一种从列表中选择第一个“已定义的”值的简便方式。
  它被用于为变量分配默认值：

// 当 height 的值为 null 或 undefined 时，将 height 的值设置为 100
height = height ?? 100;

• ?? 运算符的优先级非常低，仅略高于 ? 和 =，因此在表达式中使用它时请考虑添加括号。
• 如果没有明确添加括号，不能将其与 || 或 && 一起使用。