JavaScript 操作符与表达式

Hi, 我是布兰妮甜，编写流畅、愉悦用户体验的程序员。JavaScript 是一种功能强大且灵活的编程语言，广泛应用于前端和后端开发。它提供了一系列丰富的操作符和表达式来处理数据、执行逻辑判断以及控制程序流程。理解这些概念对于编写高效、可读性强的代码至关重要。下面将详细探讨JavaScript中的操作符与表达式。

文章目录

• • 一、操作符（Operators）
  • 二、表达式（Expressions）
  • 三、总结

一、操作符（Operators）

操作符是用来对一个或多个值（操作数）执行特定运算的符号。根据操作数的数量，可以将操作符分为三类：一元操作符（单个操作数）、二元操作符（两个操作数）和三元操作符（三个操作数）。JavaScript 中的操作符种类繁多，涵盖了算术、比较、逻辑等多个方面。

1. 算术操作符（Arithmetic Operators）

用于执行基本数学运算：

• + 加法
• - 减法
• * 乘法
• / 除法
• % 取模（返回两数相除后的余数）
• ** 幂运算（ES2016引入）

let sum = 5 + 3; // 加法
console.log(sum); // 输出: 8

let mod = 10 % 3; // 取模
console.log(mod); // 输出: 1

let power = 2 ** 3; // 幂运算
console.log(power); // 输出: 8

2. 比较操作符（Comparison Operators）

用来比较两个值，并返回一个布尔结果：

• == 相等性检查（不推荐使用，因为会发生类型转换）
• === 严格相等（推荐使用，不会发生类型转换）
• != 不相等
• !== 严格不相等
• <, >, <=, >= 大小比较

console.log(5 === "5"); // false, 因为类型不同
console.log(5 == "5");  // true, 发生了类型转换

console.log(5 > 3);     // true
console.log(5 <= 5);    // true

3. 逻辑操作符（Logical Operators）

用于组合多个条件表达式：

• && 逻辑与（所有条件都必须为真）
• || 逻辑或（任意条件为真即可）
• ! 逻辑非（取反）

let hasMoney = true;
let isShopOpen = true;

if (hasMoney && isShopOpen) {
  console.log("Let's go shopping!");
}

// 使用 || 和默认值
function getUserSetting(setting, defaultValue) {
  return setting !== undefined ? setting : defaultValue;
}
console.log(getUserSetting(undefined, "default")); // 输出: default

4. 赋值操作符（Assignment Operators）

不仅限于简单的赋值 (=)，还包括复合赋值操作符，如 +=, -=, *=,/=, %=, **= 等。

let x = 5;
x += 3; // 等价于 x = x + 3
console.log(x); // 输出: 8

x *= 2; // 等价于 x = x * 2
console.log(x); // 输出: 16

5. 条件（三元）操作符（Conditional (Ternary) Operator）

提供了一种简洁的方式来进行条件判断：

let age = 20;
let message = age >= 18 ? "Adult" : "Minor";
console.log(message); // 输出: Adult

6. 其他操作符

• 逗号操作符：可以在同一个表达式中执行多个操作。

  let a, b;
  a = (b = 5, b * 2); // b先被赋值为5，然后计算b * 2的结果给a
  console.log(a); // 输出: 10
  

• 位操作符：如按位与 (&)、按位或 (|) 和按位异或 (^) 等，主要用于低级别的数字操作。

  console.log(5 & 3); // 输出: 1
  console.log(5 | 3); // 输出: 7
  console.log(5 ^ 3); // 输出: 6
  

• typeof 操作符：返回一个表示操作数类型的字符串。

  console.log(typeof 42);      // "number"
  console.log(typeof "string"); // "string"
  console.log(typeof undefined); // "undefined"
  

• delete 操作符：用于删除对象的属性。

  let obj = { prop: 42 };
  delete obj.prop;
  console.log(obj); // {}
  

• in 操作符：检查某个属性是否存在于对象中。

  let person = { name: 'John', age: 30 };
  console.log('name' in person); // true
  console.log('address' in person); // false
  

• instanceof 操作符：用来检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

  function Animal() {}
  let cat = new Animal();
  console.log(cat instanceof Animal); // true
  

二、表达式（Expressions）

表达式是由操作符、变量、函数调用和字面量组成的语法结构，它们会计算出一个值。简单来说，表达式就是任何能够产生结果的东西。例如：

• 数字 42
• 字符串 "Hello"
• 变量引用 myVar
• 函数调用 myFunction()
• 运算 5 + 3

在JavaScript中，表达式可以作为语句的一部分出现，也可以单独作为一条语句。当表达式出现在赋值语句的右侧时，它的值会被赋予左侧的变量。

let result = 5 * 3; // 表达式 5 * 3 计算出的结果被赋给了变量 result
console.log(result); // 输出: 15

表达式的分类

• 简单表达式：由单一元素构成，如常量、变量或直接量。
• 复杂表达式：包含多个简单表达式通过操作符组合而成。

特殊表达式

• 立即执行函数表达式（IIFE）：匿名函数定义后立即被执行。

  (function() {
    console.log("This is an IIFE");
  })();
  

• 箭头函数表达式：ES6 引入的一种更简洁的函数定义方式。

  const add = (a, b) => a + b;
  console.log(add(2, 3)); // 输出: 5
  

• 模板字面量：允许嵌入表达式，使用反引号 ` 包围。

  let name = "Alice";
  console.log(`Hello, ${name}!`); // 输出: Hello, Alice!
  

三、总结

掌握JavaScript中的操作符和表达式是编写健壮代码的基础。熟练运用这些工具可以帮助开发者更有效地处理数据、构建复杂的逻辑流并提高代码的可读性和维护性。随着ECMAScript标准的不断演进，新的操作符和表达式形式也在持续加入到语言规范中，为开发者提供了更多的灵活性和便利性。

了解每个操作符的具体行为及其适用场景，可以使你写出更加精简且高效的代码。同时，正确地使用表达式可以让代码逻辑更加清晰易懂。希望这篇文章能帮助你更好地掌握JavaScript中的操作符与表达式。