Javascript教程

Appearance

JavaScript 运算符 ​

运算符的概念 ​

运算符是用于执行操作的符号，例如算术运算、赋值运算、比较运算等。JavaScript 提供了多种类型的运算符。

算术运算符 ​

算术运算符用于执行算术运算：

运算符描述示例结果
+加法5 + 38
-减法5 - 32
*乘法5 * 315
/除法5 / 31.666...
%取模（余数）5 % 32
++自增let x = 5; x++x 变为 6
--自减let x = 5; x--x 变为 4

示例 ​

javascript
let a = 10;
let b = 3;

console.log(a + b); // 输出: 13
console.log(a - b); // 输出: 7
console.log(a * b); // 输出: 30
console.log(a / b); // 输出: 3.3333333333333335
console.log(a % b); // 输出: 1

// 自增和自减
let c = 5;
console.log(c++); // 输出: 5（先使用后自增）
console.log(c); // 输出: 6

let d = 5;
console.log(++d); // 输出: 6（先自增后使用）
console.log(d); // 输出: 6

赋值运算符 ​

赋值运算符用于给变量赋值：

| 运算符 | 描述 | 示例 | 等价于 | | ------ | -------------- | ---------- | ------------- | ---- | ------ | --- | | = | 简单赋值 | x = 5 | x = 5 | | += | 加赋值 | x += 5 | x = x + 5 | | -= | 减赋值 | x -= 5 | x = x - 5 | | *= | 乘赋值 | x *= 5 | x = x * 5 | | /= | 除赋值 | x /= 5 | x = x / 5 | | %= | 取模赋值 | x %= 5 | x = x % 5 | | **= | 幂赋值 | x **= 5 | x = x ** 5 | | <<= | 左移赋值 | x <<= 5 | x = x << 5 | | >>= | 右移赋值 | x >>= 5 | x = x >> 5 | | >>>= | 无符号右移赋值 | x >>>= 5 | x = x >>> 5 | | &= | 按位与赋值 | x &= 5 | x = x & 5 | | | = | 按位或赋值 | x | = 5 | x = x | 5 | | ^= | 按位异或赋值 | x ^= 5 | x = x ^ 5 |

示例 ​

javascript
let x = 10;

x += 5; // x = x + 5
console.log(x); // 输出: 15

x -= 3; // x = x - 3
console.log(x); // 输出: 12

x *= 2; // x = x * 2
console.log(x); // 输出: 24

x /= 4; // x = x / 4
console.log(x); // 输出: 6

x %= 5; // x = x % 5
console.log(x); // 输出: 1

比较运算符 ​

比较运算符用于比较两个值，返回布尔值：

运算符描述示例结果
==等于（值相等）5 == "5"true
===严格等于（值和类型都相等）5 === "5"false
!=不等于5 != "5"false
!==严格不等于5 !== "5"true
>大于5 > 3true
<小于5 < 3false
>=大于等于5 >= 5true
<=小于等于5 <= 3false

示例 ​

javascript
console.log(5 == "5"); // 输出: true（值相等）
console.log(5 === "5"); // 输出: false（类型不同）
console.log(5 != "5"); // 输出: false（值相等）
console.log(5 !== "5"); // 输出: true（类型不同）
console.log(5 > 3); // 输出: true
console.log(5 < 3); // 输出: false
console.log(5 >= 5); // 输出: true
console.log(5 <= 3); // 输出: false

逻辑运算符 ​

逻辑运算符用于执行逻辑运算：

| 运算符 | 描述 | 示例 | 结果 | | ------ | ------------- | --------------- | ------------ | ----- | --- | ------ | ------ | | && | 逻辑与（AND） | true && false | false | | | | | 逻辑或（OR） | true | | false | true | | ! | 逻辑非（NOT） | !true | false |

示例 ​

javascript
console.log(true && false); // 输出: false
console.log(true && true); // 输出: true
console.log(false && false); // 输出: false

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

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

短路求值 ​

逻辑运算符具有短路求值的特性：

  • &&：如果第一个操作数为 false，则返回第一个操作数，不再计算第二个操作数
  • ||：如果第一个操作数为 true，则返回第一个操作数，不再计算第二个操作数
javascript
// && 短路
console.log(false && console.log("Hello")); // 输出: false，不会执行 console.log("Hello")
console.log(true && console.log("Hello")); // 输出: Hello，然后输出: undefined

// || 短路
console.log(true || console.log("Hello")); // 输出: true，不会执行 console.log("Hello")
console.log(false || console.log("Hello")); // 输出: Hello，然后输出: undefined

位运算符 ​

位运算符用于对二进制位进行操作：

| 运算符 | 描述 | 示例 | 结果（二进制） | 结果（十进制） | | ------ | ---------- | --------- | -------------------- | -------------- | ----- | ------------ | --- | | & | 按位与 | 5 & 3 | 0101 & 0011 = 0001 | 1 | | | | 按位或 | 5 | 3 | 0101 | 0011 = 0111 | 7 | | ^ | 按位异或 | 5 ^ 3 | 0101 ^ 0011 = 0110 | 6 | | ~ | 按位非 | ~5 | ~0101 = 1010 | -6 | | << | 左移 | 5 << 1 | 0101 << 1 = 1010 | 10 | | >> | 右移 | 5 >> 1 | 0101 >> 1 = 0010 | 2 | | >>> | 无符号右移 | 5 >>> 1 | 0101 >>> 1 = 0010 | 2 |

示例 ​

javascript
console.log(5 & 3); // 输出: 1
console.log(5 | 3); // 输出: 7
console.log(5 ^ 3); // 输出: 6
console.log(~5); // 输出: -6
console.log(5 << 1); // 输出: 10
console.log(5 >> 1); // 输出: 2
console.log(5 >>> 1); // 输出: 2

三元运算符 ​

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

javascript
条件 ? 值1 : 值2;

如果条件为 true，则返回值 1；否则返回值 2。

示例 ​

javascript
let age = 18;
let message = age >= 18 ? "You are an adult." : "You are a minor.";
console.log(message); // 输出: You are an adult.

let x = 10;
let y = 20;
let max = x > y ? x : y;
console.log(max); // 输出: 20

其他运算符 ​

1. 类型运算符 ​

  • typeof：返回变量的类型
  • instanceof：检查对象是否是指定构造函数的实例
javascript
console.log(typeof 5); // 输出: number
console.log(typeof "Hello"); // 输出: string
console.log(typeof true); // 输出: boolean
console.log(typeof {}); // 输出: object
console.log(typeof []); // 输出: object
console.log(typeof function () {}); // 输出: function

console.log([] instanceof Array); // 输出: true
console.log({} instanceof Object); // 输出: true
console.log(function () {} instanceof Function); // 输出: true

2. 成员运算符 ​

  • in：检查对象是否包含指定的属性
javascript
const person = { name: "John", age: 30 };
console.log("name" in person); // 输出: true
console.log("city" in person); // 输出: false

const fruits = ["apple", "banana", "orange"];
console.log(0 in fruits); // 输出: true（检查索引是否存在）
console.log("length" in fruits); // 输出: true（检查属性是否存在）

3. 可选链运算符（ES2020+） ​

  • ?.：如果对象存在，则访问其属性；否则返回 undefined
javascript
const person = { name: "John", address: { city: "New York" } };
console.log(person?.name); // 输出: John
console.log(person?.address?.city); // 输出: New York
console.log(person?.address?.zipCode); // 输出: undefined
console.log(person?.job?.title); // 输出: undefined

4. 空值合并运算符（ES2020+） ​

  • ??：如果左侧操作数为 null 或 undefined，则返回右侧操作数；否则返回左侧操作数
javascript
console.log(null ?? "default"); // 输出: default
console.log(undefined ?? "default"); // 输出: default
console.log(false ?? "default"); // 输出: false
console.log(0 ?? "default"); // 输出: 0
console.log("" ?? "default"); // 输出: ""

5. 指数运算符（ES2016+） ​

  • **：计算幂
javascript
console.log(2 ** 3); // 输出: 8（2 的 3 次方）
console.log(3 ** 2); // 输出: 9（3 的 2 次方）
console.log(10 ** 0); // 输出: 1（任何数的 0 次方都是 1）

运算符的优先级 ​

运算符的优先级决定了表达式中运算的执行顺序。优先级高的运算符会先执行。

| 优先级 | 运算符 | 结合性 | | ------ | ----------------------------------------------------------------------- | -------- | -------- | -------- | | 1 | () | 从左到右 | | 2 | ** | 从右到左 | | 3 | ++, --, !, ~, typeof, void, delete | 从右到左 | | 4 | *, /, % | 从左到右 | | 5 | +, - | 从左到右 | | 6 | <<, >>, >>> | 从左到右 | | 7 | <, <=, >, >=, in, instanceof | 从左到右 | | 8 | ==, !=, ===, !== | 从左到右 | | 9 | & | 从左到右 | | 10 | ^ | 从左到右 | | 11 | | | 从左到右 | | 12 | && | 从左到右 | | 13 | | | | 从左到右 | | 14 | ?? | 从左到右 | | 15 | ?: | 从右到左 | | 16 | =, +=, -=, *=, /=, %=, **=, <<=, >>=, >>>=, &=, | =, ^= | 从右到左 | | 17 | , | 从左到右 |

示例 ​

javascript
// 优先级：* 高于 +
console.log(5 + 3 * 2); // 输出: 11（先计算 3 * 2，再计算 5 + 6）

// 使用括号改变优先级
console.log((5 + 3) * 2); // 输出: 16（先计算 5 + 3，再计算 8 * 2）

// 优先级：++ 高于 +
let x = 5;
console.log(x++ + 2); // 输出: 7（先使用 x 的值 5，再自增为 6）

// 优先级：&& 高于 ||
console.log(true || (false && false)); // 输出: true（先计算 false && false，再计算 true || false）

运算符的最佳实践 ​

1. 使用严格相等运算符 ​

使用 === 和 !== 而不是 == 和 !=，以避免类型转换导致的意外结果：

javascript
// 好的做法
console.log(5 === "5"); // 输出: false（类型不同）

// 不好的做法
console.log(5 == "5"); // 输出: true（类型转换）

2. 使用括号提高可读性 ​

对于复杂的表达式，使用括号来提高可读性，即使括号不是必需的：

javascript
// 好的做法
let result = (a + b) * (c - d);

// 不好的做法
let result = a + b * c - d;

3. 合理使用三元运算符 ​

对于简单的条件表达式，使用三元运算符可以使代码更简洁：

javascript
// 好的做法
let max = x > y ? x : y;

// 不好的做法（过于复杂）
let result = condition1
  ? value1
  : condition2
  ? value2
  : condition3
  ? value3
  : value4;

4. 注意赋值运算符的优先级 ​

赋值运算符的优先级较低，所以在复杂表达式中要注意：

javascript
// 好的做法
let x = (y + z) * 2;

// 不好的做法（可能导致意外结果）
let x = y + z * 2;

5. 注意逻辑运算符的短路求值 ​

利用逻辑运算符的短路求值特性，可以编写更简洁的代码：

javascript
// 好的做法
let name = user?.name || "Guest";

// 不好的做法
let name = user && user.name ? user.name : "Guest";

小结 ​

JavaScript 提供了丰富的运算符，用于执行各种操作。理解运算符的类型、用法和优先级，是学习 JavaScript 的基础。在实际开发中，应该根据具体需求选择合适的运算符，并遵循最佳实践，以编写清晰、高效的代码。

Copyright © 2025-2026 京公网安备 11010102000001号 京ICP备2024078128号-1