JavaScript 运算符与表达式深度解析

一、算术与比较运算符

基础运算符

JavaScript 提供标准的算术运算符：

let x = 10, y = 3;
console.log(x + y);  // 13
console.log(x % y);  // 1 (取余)
console.log(2 ** 3); // 8 (指数)

比较运算符的特殊性

console.log(5 == '5');   // true (类型转换)
console.log(5 === '5');  // false (严格比较)
console.log(NaN === NaN); // false (特殊案例)

实践建议：

• 始终使用 === 避免隐式类型转换问题
• 浮点数比较使用容差范围：Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON

二、解构赋值的艺术

数组解构

const [first, , third] = [1, 2, 3];
console.log(first); // 1
console.log(third); // 3

// 交换变量
let a = 1, b = 2;
[a, b] = [b, a];

对象解构进阶

const user = {
  id: 123,
  name: 'Alice',
  address: {
    city: 'Shanghai'
  }
};

const {
  name: userName,
  address: { city }
} = user;

console.log(userName); // 'Alice'
console.log(city);     // 'Shanghai'

实践建议：

• 函数返回多个值时优先使用对象解构
• 嵌套解构时添加默认值避免Cannot read property错误

三、可选链与空值合并

可选链操作符(?.)

const obj = { a: { b: 42 } };
console.log(obj?.a?.b); // 42
console.log(obj?.x?.y); // undefined (不报错)

// 函数调用保护
const func = null;
func?.(); // 安全调用

空值合并运算符(??)

const config = {
  timeout: 0,
  title: null
};

console.log(config.timeout ?? 100); // 0 (非null/undefined)
console.log(config.title ?? 'Untitled'); // 'Untitled'

实践建议：

• 替代&&链式判断时注意0和''也是有效值的情况
• 与逻辑或||的区别在于??仅过滤null/undefined

四、逻辑运算符的妙用

短路求值特性

// 默认值设置
const port = process.env.PORT || 3000;

// 条件执行
isValid && submitForm();

// 对象属性保护
const name = user && user.name;

实践模式

// 替代简单的if-else
const userType = age > 18 ? 'adult' : 'child';

// 链式取值
const value = obj1.prop || obj2.prop || defaultValue;

五、运算符优先级陷阱

常见优先级问题：

console.log(5 > 4 > 3); // false (等价于 (5>4)>3 → true>3)
console.log(2 + 3 * 5); // 17 (乘法优先)

记忆技巧：

1. 成员访问.和函数调用()最高
2. 一元运算符!、++次之
3. 乘除优于加减
4. 比较运算符优于逻辑运算符

六、类型转换机制

显式转换

String(123);      // "123"
Number("42");     // 42
Boolean(0);       // false

隐式转换场景

1 + "2";          // "12"
"3" * "4";        // 12
[] + {};          // "[object Object]"

调试技巧：

console.log({} + []); // 0 (浏览器控制台与Node.js结果不同)

七、实践案例：配置合并

const defaults = {
  duration: 100,
  speed: 'medium',
  onComplete: null
};

function animate(options) {
  const config = {
    ...defaults,
    ...options,
    speed: options?.speed ?? defaults.speed
  };
  
  console.log(config);
}

animate({ duration: 200 }); 
// 输出: {duration: 200, speed: "medium", onComplete: null}

总结对比表

掌握运算符的细节能显著提升代码质量和排查效率，建议通过ESLint规则约束容易出错的用法。