提升JavaScript编程能力：运算符应用全攻略

一、算术运算符

// 基本算术运算
let a = 10, b = 3;

console.log(a + b);  // 13，加法
console.log(a - b);  // 7，减法
console.log(a * b);  // 30，乘法
console.log(a / b);  // 3.333...，除法
console.log(a % b);  // 1，取模(余数)
console.log(a ** b); // 1000，指数运算(ES6)

// 递增递减
let x = 5;
console.log(x++); // 5 (后置递增，先返回值再增加)
console.log(x);   // 6
console.log(++x); // 7 (前置递增，先增加再返回值)

二、 赋值运算符

let num = 10;

num += 5;  // 等同于 num = num + 5
console.log(num); // 15

num -= 3;  // 等同于 num = num - 3
console.log(num); // 12

num *= 2;  // 等同于 num = num * 2
console.log(num); // 24

num /= 4;  // 等同于 num = num / 4
console.log(num); // 6

num %= 5;  // 等同于 num = num % 5
console.log(num); // 1

num **= 3; // 等同于 num = num ** 3
console.log(num); // 1

三、比较运算符

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 <= 4);     // false

// 特殊比较
console.log(null == undefined);  // true
console.log(null === undefined); // false
console.log(NaN == NaN);         // false (NaN不等于任何值，包括它自己)

四、逻辑运算符

// 基本逻辑运算
console.log(true && false); // false (逻辑与)
console.log(true || false);  // true (逻辑或)
console.log(!true);          // false (逻辑非)

// 短路求值
let value = null;
let result = value || 'default';
console.log(result); // 'default'

let obj = { prop: 'value' };
console.log(obj && obj.prop); // 'value'
console.log(obj && obj.nonExist && obj.nonExist.prop); // undefined (不会报错)

// 空值合并运算符(ES2020)
let foo = null ?? 'default value';
console.log(foo); // 'default value'

五、位运算符

let x = 5, y = 3;

console.log(x & y);   // 1 (按位与: 0101 & 0011 = 0001)
console.log(x | y);   // 7 (按位或: 0101 | 0011 = 0111)
console.log(x ^ y);   // 6 (按位异或: 0101 ^ 0011 = 0110)
console.log(~x);      // -6 (按位非: ~0000...0101 = 1111...1010)
console.log(x << 1);  // 10 (左移: 0101 << 1 = 1010)
console.log(x >> 1);  // 2 (有符号右移: 0101 >> 1 = 0010)
console.log(x >>> 1); // 2 (无符号右移)

六、条件(三元)运算符

let age = 20;
let status = age >= 18 ? '成人' : '未成年';
console.log(status); // '成人'

// 嵌套三元
let grade = 85;
let result = grade >= 90 ? '优秀' :
             grade >= 80 ? '良好' :
             grade >= 60 ? '及格' : '不及格';
console.log(result); // '良好'

七、类型运算符

console.log(typeof 42);          // "number"
console.log(typeof 'hello');     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (历史遗留问题)
console.log(typeof []);          // "object"
console.log(typeof {});          // "object"
console.log(typeof function(){});// "function"

// instanceof 运算符
let arr = [];
console.log(arr instanceof Array);    // true
console.log(arr instanceof Object);   // true
console.log(arr instanceof Function); // false

八、对象属性相关运算符

// 可选链运算符(ES2020)
const user = {
  profile: {
    name: 'Alice',
    address: {
      city: 'New York'
    }
  }
};

console.log(user?.profile?.name); // 'Alice'
console.log(user?.profile?.age);  // undefined
console.log(user?.orders?.[0]);   // undefined
console.log(user?.sayHello?.());  // undefined

// 解构赋值
let [first, second] = [1, 2];
console.log(first, second); // 1 2

let { name, age } = { name: 'Bob', age: 30 };
console.log(name, age); // 'Bob' 30

// 展开运算符
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

九、逗号运算符

let z = (1, 2, 3);
console.log(z); // 3 (返回最后一个表达式的值)

function a() { console.log('a'); return 'a'; }
function b() { console.log('b'); return 'b'; }
function c() { console.log('c'); return 'c'; }

let res = (a(), b(), c());
console.log(res); // 依次输出'a','b','c'，最后res的值为'c'

十、空值合并运算符 (??)

let value1 = null;
let value2 = undefined;
let value3 = 0;
let value4 = '';

console.log(value1 ?? 'default'); // 'default'
console.log(value2 ?? 'default'); // 'default'
console.log(value3 ?? 'default'); // 0 (不是null/undefined)
console.log(value4 ?? 'default'); // '' (不是null/undefined)

// 与逻辑或(||)的区别
console.log(value3 || 'default'); // 'default' (|| 会检查所有假值)
console.log(value4 || 'default'); // 'default' (|| 会检查所有假值)

十一、逻辑赋值运算符(||=、&&=、??=)

// 逻辑或赋值 (||=)
let a = false;
a ||= 'default'; // 等同于 a = a || 'default'
console.log(a); // 'default'

// 逻辑与赋值 (&&=)
let b = 'hello';
b &&= 'world'; // 等同于 b = b && 'world'
console.log(b); // 'world'

// 空值合并赋值 (??=)
let c = null;
c ??= 'default'; // 等同于 c = c ?? 'default'
console.log(c); // 'default'

十二、void 运算符

console.log(void 0); // undefined
console.log(void(1 + 1)); // undefined

// 常见用途：立即执行函数表达式
void function iife() {
  console.log('IIFE executed');
}();

// 防止链接跳转
<a href="javascript:void(0)" onclick="doSomething()">Click me</a>

十三、new 运算符

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const john = new Person('John', 30);
console.log(john); // Person { name: 'John', age: 30 }

// 使用 new 创建内置对象实例
const date = new Date();
console.log(date); // 当前日期时间

// 使用 new.target 检测是否通过 new 调用
function Foo() {
  if (!new.target) {
    throw new Error('Foo must be called with new');
  }
}

十四、delete 运算符

const obj = { a: 1, b: 2, c: 3 };

console.log(obj.a); // 1
delete obj.a;       // 删除属性a
console.log(obj.a); // undefined

// 不能删除变量或函数
let x = 5;
delete x; // false (严格模式下会报错)
console.log(x); // 5

function fn() {}
delete fn; // false
console.log(fn); // [Function: fn]

// 删除数组元素（会留下空位）
const arr = [1, 2, 3];
delete arr[1];
console.log(arr); // [1, empty, 3]
console.log(arr.length); // 3

十五、in 运算符

const car = { make: 'Toyota', model: 'Camry' };

console.log('make' in car); // true
console.log('toString' in car); // true (继承自原型链)

// 检查数组索引
const colors = ['red', 'green', 'blue'];
console.log(0 in colors); // true
console.log(3 in colors); // false

// 与 hasOwnProperty 的区别
console.log(car.hasOwnProperty('make')); // true
console.log(car.hasOwnProperty('toString')); // false

十六、安全赋值运算符 (实验性提案)

1.基础用法：替代 try-catch

//传统方式需要多层 try-catch 处理异步操作
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const json = await response.json();
    return json;
  } catch (error) {
    console.error('Fetch failed:', error);
  }
}

//使用 ?= 运算符后
async function fetchData() {
  const [err, response] ?= await fetch('/api/data');
  if (err) {
    console.error('Fetch failed:', err);
    return;
  }
  const [parseErr, json] ?= await response.json();
  if (parseErr) {
    console.error('Parse failed:', parseErr);
    return;
  }
  return json;
}

2.递归处理嵌套对象

const obj = {
  [Symbol.result]() {
    return [null, {
      data: {
        [Symbol.result]() {
          return [new Error('Nested error'), null];
        }
      }
    }];
  }
};

const [err, data] ?= obj;
console.log(err); // Error('Nested error')

3.结合 Promise 的链式操作

async function processUser() {
  const [fetchErr, user] ?= await fetch('/api/user');
  if (fetchErr) return handleError(fetchErr);

  const [validateErr, validUser] ?= validateUser(user);
  if (validateErr) return handleError(validateErr);

  const [saveErr] ?= await saveUser(validUser);
  if (saveErr) return handleError(saveErr);

  return 'User processed successfully';
}