运算符与表达式

运算符的基本概念

运算符是用于执行特定操作的符号或关键字。在JavaScript中，运算符可以操作一个或多个值（称为操作数）并返回结果。根据操作数的数量，运算符可以分为一元运算符、二元运算符和三元运算符。

// 一元运算符示例
let x = 5;
x++; // 一元运算符，操作一个操作数

// 二元运算符示例
let y = 10 + 20; // 二元运算符，操作两个操作数

// 三元运算符示例
let z = (x > y) ? x : y; // 三元运算符，操作三个操作数

算术运算符

算术运算符用于执行基本的数学运算。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.333...，除法
console.log(a % b);  // 1，取模（余数）
console.log(a ** b); // 1000，指数运算（ES2016新增）
console.log(++a);    // 11，前置递增
console.log(b--);    // 3，后置递减

赋值运算符

赋值运算符用于给变量赋值，还可以与其他运算符结合使用：

let c = 10; // 基本赋值

c += 5;  // 等同于 c = c + 5
c -= 3;  // 等同于 c = c - 3
c *= 2;  // 等同于 c = c * 2
c /= 4;  // 等同于 c = c / 4
c %= 3;  // 等同于 c = c % 3
c **= 2; // 等同于 c = c ** 2

比较运算符

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

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

逻辑运算符

逻辑运算符用于组合或反转布尔值：

let isTrue = true;
let isFalse = false;

console.log(isTrue && isFalse); // false，逻辑与
console.log(isTrue || isFalse); // true，逻辑或
console.log(!isTrue);           // false，逻辑非

// 短路求值示例
let result = isTrue && doSomething(); // 只有isTrue为true时才会执行doSomething()

位运算符

位运算符直接操作数值的二进制表示：

let d = 5;  // 二进制 0101
let e = 3;  // 二进制 0011

console.log(d & e);  // 1 (0001)，按位与
console.log(d | e);  // 7 (0111)，按位或
console.log(d ^ e);  // 6 (0110)，按位异或
console.log(~d);     // -6，按位非
console.log(d << 1); // 10 (1010)，左移
console.log(d >> 1); // 2 (0010)，有符号右移
console.log(d >>> 1);// 2 (0010)，无符号右移

条件（三元）运算符

条件运算符是JavaScript中唯一的三元运算符：

let age = 20;
let canVote = (age >= 18) ? "可以投票" : "不能投票";

// 等价于
if (age >= 18) {
    canVote = "可以投票";
} else {
    canVote = "不能投票";
}

类型运算符

JavaScript提供了检测变量类型的运算符：

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

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

运算符优先级

当表达式中有多个运算符时，JavaScript会按照优先级顺序计算：

let result = 5 + 3 * 2; // 11，不是16，因为乘法优先级高于加法

// 使用括号可以改变优先级
result = (5 + 3) * 2; // 16

常见运算符优先级从高到低：

1. 成员访问 .、[]、new（带参数列表）
2. 函数调用 ()、new（无参数列表）
3. 后置递增 ++、后置递减 --
4. 逻辑非 !、按位非 ~、一元加 +、一元减 -、前置递增 ++、前置递减 --、typeof、void、delete、await
5. 指数 **
6. 乘法 *、除法 /、取模 %
7. 加法 +、减法 -
8. 按位移位 <<、>>、>>>
9. 关系 <、<=、>、>=、in、instanceof
10. 相等 ==、!=、===、!==
11. 按位与 &
12. 按位异或 ^
13. 按位或 |
14. 逻辑与 &&
15. 逻辑或 ||
16. 条件（三元） ?:
17. 赋值 =、+=、-=等
18. 逗号 ,

表达式的基本概念

表达式是JavaScript中可以计算并产生值的代码片段。表达式可以包含变量、运算符、函数调用等：

// 简单表达式
10;                // 数字字面量
'hello';           // 字符串字面量
true;              // 布尔字面量
[1, 2, 3];         // 数组字面量
{name: 'Alice'};   // 对象字面量

// 复杂表达式
x + y * z;         // 算术表达式
age >= 18;         // 比较表达式
isValid && submit(); // 逻辑表达式

函数表达式

函数表达式定义了一个函数，可以赋值给变量或作为参数传递：

// 函数表达式
const square = function(x) {
    return x * x;
};

// 立即调用函数表达式(IIFE)
(function() {
    console.log('立即执行');
})();

// 箭头函数表达式
const add = (a, b) => a + b;

对象和数组表达式

对象和数组可以通过表达式创建：

// 对象表达式
let person = {
    name: 'Bob',
    age: 30,
    greet() {
        console.log(`Hello, I'm ${this.name}`);
    }
};

// 数组表达式
let numbers = [1, 2, 3, 4, 5];
let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

模板字符串表达式

模板字符串允许嵌入表达式：

let name = 'Alice';
let age = 25;

// 模板字符串表达式
let greeting = `Hello, my name is ${name} and I'm ${age} years old.`;

// 表达式可以包含运算
let message = `Next year I'll be ${age + 1}.`;

// 甚至可以包含函数调用
function double(x) {
    return x * 2;
}
let calculation = `Double of 5 is ${double(5)}.`;

解构赋值表达式

解构赋值允许从数组或对象中提取数据：

// 数组解构
let [first, second, third] = [1, 2, 3];

// 对象解构
let {firstName, lastName} = {firstName: 'John', lastName: 'Doe'};

// 解构时重命名
let {firstName: fn, lastName: ln} = {firstName: 'Jane', lastName: 'Smith'};

// 默认值
let [a = 1, b = 2] = [10]; // a=10, b=2
let {x = 0, y = 0} = {x: 5}; // x=5, y=0

展开和剩余运算符

展开运算符(...)可以将可迭代对象展开为多个元素，剩余运算符可以收集多个元素：

// 展开数组
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// 展开对象
let obj1 = {a: 1, b: 2};
let obj2 = {...obj1, c: 3}; // {a: 1, b: 2, c: 3}

// 函数参数中的剩余参数
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3, 4); // 10

// 解构中的剩余元素
let [first, ...rest] = [1, 2, 3, 4]; // first=1, rest=[2, 3, 4]

可选链运算符

可选链运算符(?.)可以安全地访问嵌套对象属性：

let user = {
    profile: {
        name: 'Alice',
        address: {
            city: 'New York'
        }
    }
};

// 传统方式需要多层检查
let city;
if (user && user.profile && user.profile.address) {
    city = user.profile.address.city;
}

// 使用可选链
city = user?.profile?.address?.city; // "New York"

// 访问不存在的属性
let zipCode = user?.profile?.address?.zipCode; // undefined，不会报错

// 方法调用
let result = user.profile?.getName?.(); // 如果getName存在则调用，否则返回undefined

空值合并运算符

空值合并运算符(??)提供了一种处理null或undefined的默认值方式：

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

let result1 = value1 ?? 'default'; // 'default'
let result2 = value2 ?? 'default'; // 'default'
let result3 = value3 ?? 'default'; // 0
let result4 = value4 ?? 'default'; // ''

// 与逻辑或(||)的区别
let orResult1 = value1 || 'default'; // 'default'
let orResult2 = value3 || 'default'; // 'default' (0是假值)
let orResult3 = value4 || 'default'; // 'default' (''是假值)

// 组合使用
let user = {
    settings: {
        theme: null
    }
};
let theme = user?.settings?.theme ?? 'light'; // 'light'