JavaScript 运算符详解

引言

在 JavaScript 编程中，运算符是用于对数据进行操作的特殊符号。通过使用运算符，我们可以实现各种计算、比较和逻辑判断等功能。JavaScript 中的运算符种类丰富，涵盖了算术、比较、逻辑、赋值等多个方面。下面将详细介绍各类运算符及其使用方法，并结合代码示例进行说明。

一、算术运算符

算术运算符主要用于执行基本的数学运算，如加、减、乘、除等。

1. 加法运算符（+）

加法运算符既可以用于数字相加，也可以用于字符串拼接。

// 数字相加
let num1 = 5;
let num2 = 3;
let sum = num1 + num2;
console.log(sum); // 输出: 8

// 字符串拼接
let str1 = 'Hello';
let str2 = ' World';
let combinedStr = str1 + str2;
console.log(combinedStr); // 输出: Hello World

2. 减法运算符（-）

减法运算符用于计算两个数字的差值。

let num3 = 10;
let num4 = 4;
let difference = num3 - num4;
console.log(difference); // 输出: 6

3. 乘法运算符（*）

乘法运算符用于计算两个数字的乘积。

let num5 = 6;
let num6 = 2;
let product = num5 * num6;
console.log(product); // 输出: 12

4. 除法运算符（/）

除法运算符用于计算两个数字的商。

let num7 = 15;
let num8 = 3;
let quotient = num7 / num8;
console.log(quotient); // 输出: 5

5. 取余运算符（%）

取余运算符用于计算两个数字相除后的余数。

let num9 = 10;
let num10 = 3;
let remainder = num9 % num10;
console.log(remainder); // 输出: 1

6. 自增运算符（++）

自增运算符用于将变量的值加 1，分为前置自增和后置自增。

let num11 = 5;
// 前置自增
let preIncrement = ++num11;
console.log(preIncrement); // 输出: 6
console.log(num11); // 输出: 6

let num12 = 5;
// 后置自增
let postIncrement = num12++;
console.log(postIncrement); // 输出: 5
console.log(num12); // 输出: 6

7. 自减运算符（--）

自减运算符用于将变量的值减 1，同样分为前置自减和后置自减。

let num13 = 8;
// 前置自减
let preDecrement = --num13;
console.log(preDecrement); // 输出: 7
console.log(num13); // 输出: 7

let num14 = 8;
// 后置自减
let postDecrement = num14--;
console.log(postDecrement); // 输出: 8
console.log(num14); // 输出: 7

二、比较运算符

比较运算符用于比较两个值的大小关系，返回一个布尔值（true 或 false）。

1. 等于运算符（==）

等于运算符比较两个值是否相等，会进行类型转换。

let a = 5;
let b = '5';
console.log(a == b); // 输出: true

2. 严格等于运算符（===）

严格等于运算符比较两个值是否相等，且要求类型也相同。

let c = 5;
let d = '5';
console.log(c === d); // 输出: false

3. 不等于运算符（!=）

不等于运算符比较两个值是否不相等，会进行类型转换。

let e = 5;
let f = '6';
console.log(e != f); // 输出: true

4. 严格不等于运算符（!==）

严格不等于运算符比较两个值是否不相等，且要求类型也不同。

let g = 5;
let h = '5';
console.log(g !== h); // 输出: true

5. 大于运算符（>）

大于运算符比较左边的值是否大于右边的值。

let i = 10;
let j = 5;
console.log(i > j); // 输出: true

6. 小于运算符（<）

小于运算符比较左边的值是否小于右边的值。

let k = 3;
let l = 8;
console.log(k < l); // 输出: true

7. 大于等于运算符（>=）

大于等于运算符比较左边的值是否大于或等于右边的值。

let m = 5;
let n = 5;
console.log(m >= n); // 输出: true

8. 小于等于运算符（<=）

小于等于运算符比较左边的值是否小于或等于右边的值。

let o = 2;
let p = 4;
console.log(o <= p); // 输出: true

三、逻辑运算符

逻辑运算符用于组合多个布尔值，进行逻辑判断。

1. 逻辑与运算符（&&）

逻辑与运算符只有当两个操作数都为 true 时，结果才为 true。

let isTrue1 = true;
let isTrue2 = true;
let isFalse = false;
console.log(isTrue1 && isTrue2); // 输出: true
console.log(isTrue1 && isFalse); // 输出: false

2. 逻辑或运算符（||）

逻辑或运算符只要有一个操作数为 true，结果就为 true。

console.log(isTrue1 || isFalse); // 输出: true
console.log(isFalse || isFalse); // 输出: false

3. 逻辑非运算符（!）

逻辑非运算符用于取反操作，将 true 变为 false，将 false 变为 true。

console.log(!isTrue1); // 输出: false
console.log(!isFalse); // 输出: true

四、赋值运算符

赋值运算符用于将一个值赋给一个变量。

1. 基本赋值运算符（=）

基本赋值运算符将右边的值赋给左边的变量。

let x = 10;
console.log(x); // 输出: 10

2. 复合赋值运算符

复合赋值运算符结合了算术运算和赋值操作。

let y = 5;
// 加法赋值
y += 3; // 相当于 y = y + 3
console.log(y); // 输出: 8

let z = 10;
// 减法赋值
z -= 4; // 相当于 z = z - 4
console.log(z); // 输出: 6

let w = 2;
// 乘法赋值
w *= 5; // 相当于 w = w * 5
console.log(w); // 输出: 10

let u = 12;
// 除法赋值
u /= 3; // 相当于 u = u / 3
console.log(u); // 输出: 4

let v = 15;
// 取余赋值
v %= 4; // 相当于 v = v % 4
console.log(v); // 输出: 3

五、位运算符

位运算符用于对整数的二进制位进行操作。

1. 按位与运算符（&）

按位与运算符对两个操作数的对应二进制位进行与运算。

let num15 = 5; // 二进制: 0101
let num16 = 3; // 二进制: 0011
let bitwiseAnd = num15 & num16; // 二进制: 0001
console.log(bitwiseAnd); // 输出: 1

2. 按位或运算符（|）

按位或运算符对两个操作数的对应二进制位进行或运算。

let bitwiseOr = num15 | num16; // 二进制: 0111
console.log(bitwiseOr); // 输出: 7

3. 按位异或运算符（^）

按位异或运算符对两个操作数的对应二进制位进行异或运算。

let bitwiseXor = num15 ^ num16; // 二进制: 0110
console.log(bitwiseXor); // 输出: 6

4. 按位取反运算符（~）

按位取反运算符对操作数的每一个二进制位取反。

let num17 = 5; // 二进制: 0101
let bitwiseNot = ~num17; // 二进制: 1010（补码形式）
console.log(bitwiseNot); // 输出: -6

5. 左移运算符（<<）

左移运算符将操作数的二进制位向左移动指定的位数。

let num18 = 5; // 二进制: 0101
let leftShift = num18 << 2; // 二进制: 010100
console.log(leftShift); // 输出: 20

6. 右移运算符（>>）

右移运算符将操作数的二进制位向右移动指定的位数，符号位保持不变。

let num19 = 20; // 二进制: 010100
let rightShift = num19 >> 2; // 二进制: 000101
console.log(rightShift); // 输出: 5

7. 无符号右移运算符（>>>）

无符号右移运算符将操作数的二进制位向右移动指定的位数，左边补 0。

let num20 = -20; 
let unsignedRightShift = num20 >>> 2; 
console.log(unsignedRightShift); 

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

条件运算符是 JavaScript 中唯一的三元运算符，用于根据条件的真假返回不同的值。

let age = 18;
let message = age >= 18 ? '成年人' : '未成年人';
console.log(message); // 输出: 成年人

七、逗号运算符

逗号运算符用于在一条语句中执行多个表达式，并返回最后一个表达式的值。

let result = (1 + 2, 3 + 4, 5 + 6);
console.log(result); // 输出: 11

八、typeof 运算符

typeof 运算符用于返回一个表示数据类型的字符串。

let num21 = 10;
let str3 = 'hello';
let bool3 = true;
console.log(typeof num21); // 输出: number
console.log(typeof str3); // 输出: string
console.log(typeof bool3); // 输出: boolean

总结

JavaScript 中的运算符丰富多样，每种运算符都有其特定的用途和功能。掌握这些运算符的使用方法，能够帮助我们更高效地编写代码，实现各种复杂的功能。在实际开发中，要根据具体的需求选择合适的运算符，并注意运算符的优先级和结合性，以避免出现错误。