JavaScript运算符与表达式详解

运算符基础概念

在JavaScript中，运算符是用于执行特定操作的符号或关键字。它们可以处理各种数据类型，包括数字、字符串、布尔值等。表达式则是由运算符和操作数组成的代码片段，表达式经过计算会产生一个值。例如，3 + 5 就是一个表达式，其中 + 是运算符，3 和 5 是操作数，这个表达式最终的计算结果是 8。

算术运算符

1. 加法运算符（+）
   • 用于数字相加。例如：

let num1 = 5;
let num2 = 3;
let sum = num1 + num2;
console.log(sum); 

- 当用于字符串时，会进行字符串拼接。例如：

let str1 = "Hello";
let str2 = " World";
let result = str1 + str2;
console.log(result); 

2. 减法运算符（-）
   • 只能用于数字相减。例如：

let num3 = 10;
let num4 = 4;
let difference = num3 - num4;
console.log(difference); 

3. 乘法运算符（*）
   • 用于数字相乘。例如：

let num5 = 6;
let num6 = 2;
let product = num5 * num6;
console.log(product); 

4. 除法运算符（/）
   • 用于数字相除。例如：

let num7 = 15;
let num8 = 3;
let quotient = num7 / num8;
console.log(quotient); 

5. 取模运算符（%）
   • 计算两个数相除的余数。例如：

let num9 = 17;
let num10 = 5;
let remainder = num9 % num10;
console.log(remainder); 

6. 自增运算符（++）
   • 分为前置自增（++x）和后置自增（x++）。前置自增先将变量的值加1，然后返回加1后的值；后置自增先返回变量原来的值，然后再将变量的值加1。例如：

let num11 = 5;
let result1 = ++num11;
console.log(result1); 
console.log(num11); 

let num12 = 5;
let result2 = num12++;
console.log(result2); 
console.log(num12); 

7. 自减运算符（--）
   • 同样分为前置自减（--x）和后置自减（x--）。前置自减先将变量的值减1，然后返回减1后的值；后置自减先返回变量原来的值，然后再将变量的值减1。例如：

let num13 = 8;
let result3 = --num13;
console.log(result3); 
console.log(num13); 

let num14 = 8;
let result4 = num14--;
console.log(result4); 
console.log(num14); 

赋值运算符

1. 基本赋值运算符（=）
   • 将右边的值赋给左边的变量。例如：

let num15 = 10;

2. 复合赋值运算符
   • 加法赋值运算符（+=）：将变量自身与右边的值相加，并将结果赋给该变量。例如：

let num16 = 5;
num16 += 3;
console.log(num16); 

- **减法赋值运算符（-=）**：将变量自身与右边的值相减，并将结果赋给该变量。例如：

let num17 = 10;
num17 -= 4;
console.log(num17); 

- **乘法赋值运算符（*=）**：将变量自身与右边的值相乘，并将结果赋给该变量。例如：

let num18 = 3;
num18 *= 2;
console.log(num18); 

- **除法赋值运算符（/=）**：将变量自身与右边的值相除，并将结果赋给该变量。例如：

let num19 = 15;
num19 /= 3;
console.log(num19); 

- **取模赋值运算符（%=）**：将变量自身与右边的值进行取模运算，并将结果赋给该变量。例如：

let num20 = 17;
num20 %= 5;
console.log(num20); 

比较运算符

1. 相等运算符（==）
   • 比较两个值是否相等，会进行类型转换。例如：

console.log(5 == "5"); 

2. 严格相等运算符（===）
   • 比较两个值是否相等，不会进行类型转换，要求值和类型都相同。例如：

console.log(5 === "5"); 

3. 不相等运算符（!=）
   • 比较两个值是否不相等，会进行类型转换。例如：

console.log(5 != "3"); 

4. 严格不相等运算符（!==）
   • 比较两个值是否不相等，不会进行类型转换，只要值或类型有一个不同就返回 true。例如：

console.log(5!== "5"); 

5. 大于运算符（>）
   • 比较左边的值是否大于右边的值。例如：

console.log(10 > 5); 

6. 小于运算符（<）
   • 比较左边的值是否小于右边的值。例如：

console.log(3 < 7); 

7. 大于等于运算符（>=）
   • 比较左边的值是否大于或等于右边的值。例如：

console.log(10 >= 10); 

8. 小于等于运算符（<=）
   • 比较左边的值是否小于或等于右边的值。例如：

console.log(5 <= 8); 

逻辑运算符

1. 逻辑与运算符（&&）
   • 只有当两个操作数都为 true 时，结果才为 true。如果第一个操作数为 false，则不会再判断第二个操作数。例如：

let condition1 = true;
let condition2 = false;
console.log(condition1 && condition2); 

let num21 = 5;
console.log(num21 > 3 && num21 < 10); 

2. 逻辑或运算符（||）
   • 只要两个操作数中有一个为 true，结果就为 true。如果第一个操作数为 true，则不会再判断第二个操作数。例如：

let condition3 = true;
let condition4 = false;
console.log(condition3 || condition4); 

let num22 = 3;
console.log(num22 > 5 || num22 < 10); 

3. 逻辑非运算符（!）
   • 对操作数进行取反，true 变为 false，false 变为 true。例如：

let condition5 = true;
console.log(!condition5); 

let num23 = 7;
console.log(!(num23 > 10)); 

位运算符

1. 按位与运算符（&）
   • 对两个操作数的每一位进行与运算，只有当对应位都为1时，结果位才为1。例如：

let num24 = 5; 
let num25 = 3; 
let result5 = num24 & num25;
console.log(result5); 

2. 按位或运算符（|）
   • 对两个操作数的每一位进行或运算，只要对应位有一个为1，结果位就为1。例如：

let num26 = 5; 
let num27 = 3; 
let result6 = num26 | num27;
console.log(result6); 

3. 按位异或运算符（^）
   • 对两个操作数的每一位进行异或运算，当对应位不同时，结果位为1。例如：

let num28 = 5; 
let num29 = 3; 
let result7 = num28 ^ num29;
console.log(result7); 

4. 按位非运算符（~）
   • 对操作数的每一位进行取反，1变为0，0变为1。例如：

let num30 = 5; 
let result8 = ~num30;
console.log(result8); 

5. 左移运算符（<<）
   • 将操作数的二进制表示向左移动指定的位数，右边用0填充。例如：

let num31 = 5; 
let result9 = num31 << 2;
console.log(result9); 

6. 右移运算符（>>）
   • 将操作数的二进制表示向右移动指定的位数，左边用符号位填充（正数用0，负数用1）。例如：

let num32 = 10; 
let result10 = num32 >> 2;
console.log(result10); 

7. 无符号右移运算符（>>>）
   • 将操作数的二进制表示向右移动指定的位数，左边用0填充，不考虑符号位。例如：

let num33 = -10; 
let result11 = num33 >>> 2;
console.log(result11); 

条件运算符（三元运算符）

1. 语法：condition? expression1 : expression2
   • 如果 condition 为 true，则返回 expression1 的值；如果 condition 为 false，则返回 expression2 的值。例如：

let age = 18;
let message = age >= 18? "成年人" : "未成年人";
console.log(message); 

逗号运算符

1. 作用：用于在一条语句中执行多个操作，从左到右依次计算表达式，最后返回最后一个表达式的值。例如：

let result12 = (1 + 2, 3 + 4);
console.log(result12); 

let num34 = 5;
let result13 = (num34 = num34 + 1, num34 * 2);
console.log(result13); 

运算符优先级

JavaScript中的运算符具有不同的优先级，优先级高的运算符会先执行。例如，乘法和除法的优先级高于加法和减法。以下是大致的优先级顺序（从高到低）：

1. 括号：() 可以改变运算顺序，括号内的表达式先计算。例如：(3 + 5) * 2 先计算 3 + 5，再乘以 2。
2. 一元运算符：如 ++、--、!、~ 等。例如：!true 先对 true 取反。
3. 算术运算符：*、/、% 优先级高于 +、-。例如：3 + 5 * 2 先计算 5 * 2，再加上 3。
4. 位运算符：按位与（&）、按位或（|）等，具体优先级关系较为复杂，可参考文档。
5. 比较运算符：>、<、>=、<=、==、!=、===、!== 等。
6. 逻辑运算符：&& 优先级高于 ||。例如：true && false || true 先计算 true && false，再与 true 进行 || 运算。
7. 条件运算符：? :。
8. 赋值运算符：=、+=、-= 等。
9. 逗号运算符：,。

表达式的类型和值

1. 算术表达式：如 3 + 5，结果为数字类型，值为 8。
2. 比较表达式：如 5 > 3，结果为布尔类型，值为 true。
3. 逻辑表达式：如 true && false，结果为布尔类型，值为 false。
4. 赋值表达式：如 let num = 5，num 变量被赋值为 5，整个表达式的值为 5。

表达式的副作用

某些运算符或表达式在计算值的同时，可能会产生副作用。例如自增和自减运算符，不仅会返回一个值，还会改变变量本身的值。例如：

let num35 = 5;
let result14 = num35++;
console.log(result14); 
console.log(num35); 

这里 num35++ 表达式返回 5，但同时 num35 的值变为了 6。在编写代码时，要注意这些副作用可能带来的影响，尤其是在复杂的表达式中。

运算符与数据类型转换

1. 算术运算符与类型转换
   • 当不同类型的数据进行算术运算时，JavaScript会进行隐式类型转换。例如，字符串与数字相加时，字符串会被转换为数字（如果可以转换的话）。例如：

let result15 = 5 + "3"; 

- 如果字符串不能转换为有效数字，则结果为字符串拼接。例如：

let result16 = 5 + "abc"; 

2. 比较运算符与类型转换
   • 相等运算符（==）会进行类型转换，而严格相等运算符（===）不会。例如：

console.log(5 == "5"); 
console.log(5 === "5"); 

- 比较不同类型的数据时，`>`、`<` 等运算符也会进行类型转换。例如，字符串与数字比较时，字符串会被转换为数字。例如：

console.log("10" > 5); 

3. 逻辑运算符与类型转换
   • 逻辑与（&&）和逻辑或（||）运算符在判断操作数时，会将非布尔类型的值转换为布尔值。例如：

console.log(5 && "hello"); 
console.log(0 || "world"); 

特殊值在运算符中的表现

1. null 和 undefined
   • 在算术运算中，null 会被转换为 0，undefined 会被转换为 NaN。例如：

console.log(null + 5); 
console.log(undefined + 3); 

- 在比较运算中，`null` 和 `undefined` 相等（使用 `==`），但不严格相等（使用 `===`）。例如：

console.log(null == undefined); 
console.log(null === undefined); 

2. NaN
   • NaN 与任何值（包括它自身）进行比较都返回 false。例如：

console.log(NaN == NaN); 

- 在算术运算中，只要有一个操作数是 `NaN`，结果就是 `NaN`。例如：

console.log(5 + NaN); 

3. Infinity 和 -Infinity
   • Infinity 表示正无穷大，-Infinity 表示负无穷大。例如，正数除以 0 会得到 Infinity，负数除以 0 会得到 -Infinity。

console.log(5 / 0); 
console.log(-5 / 0); 

- 在比较运算中，`Infinity` 大于任何有限数，`-Infinity` 小于任何有限数。例如：

console.log(Infinity > 1000); 
console.log(-Infinity < -100); 

运算符在不同场景下的应用

1. 循环中的应用
   • 自增和自减运算符常用于循环中控制循环变量。例如，在 for 循环中：

for (let i = 0; i < 5; i++) {
    console.log(i); 
}

2. 条件判断中的应用
   • 比较运算符和逻辑运算符常用于条件判断语句中。例如，在 if - else 语句中：

let num36 = 10;
if (num36 > 5 && num36 < 15) {
    console.log("符合条件");
} else {
    console.log("不符合条件");
}

3. 函数参数和返回值中的应用
   • 表达式可以作为函数的参数传递，也可以作为函数的返回值。例如：

function add(a, b) {
    return a + b;
}
let result17 = add(3, 5);
console.log(result17); 

运算符的兼容性

在不同的JavaScript环境（如浏览器、Node.js等）中，大多数运算符的行为是一致的。但在一些老旧的浏览器中，可能存在兼容性问题。例如，在某些早期版本的IE浏览器中，对某些复杂的表达式或新的运算符（如ES6引入的一些运算符）可能支持不佳。为了确保代码的兼容性，可以使用工具如Babel来将现代JavaScript代码转换为兼容旧环境的代码。

总结

JavaScript的运算符和表达式是编写代码的基础，深入理解它们的特性、优先级、类型转换以及在不同场景下的应用，对于编写高效、正确的JavaScript代码至关重要。无论是简单的算术运算，还是复杂的逻辑判断和位操作，运算符都起着不可或缺的作用。通过不断实践和深入学习，可以更好地掌握这些知识，提升编程能力。