JavaScript运算符与流程控制详解

1. JavaScript运算符详解

JavaScript中的运算符是构建逻辑的基础工具，它们可以用于赋值、比较、算术运算等操作。理解运算符的优先级和用法对于编写高效、可读的代码至关重要。

1.1 赋值运算符

赋值运算符用于给变量赋值，最基本的赋值运算符是等号（=）。它将其右侧的值赋给左侧的变量。

javascript复制let x = 10;  // 将10赋值给变量x

复合赋值运算符可以简化代码：

javascript复制x += 5;  // 等同于 x = x + 5
x *= 2;  // 等同于 x = x * 2

提示：复合赋值运算符不仅使代码更简洁，还能提高执行效率，因为减少了变量的重复计算。

1.2 比较运算符

比较运算符用于比较两个值，返回布尔值true或false。

javascript复制console.log(5 == '5');   // true，松散相等
console.log(5 === '5');  // false，严格相等

常见的比较运算符包括：

• == 松散相等（会进行类型转换）
• === 严格相等（不进行类型转换）
• != 松散不等
• !== 严格不等
• > 大于
• < 小于
• >= 大于等于
• <= 小于等于

注意：在大多数情况下，应该使用严格相等（===）而不是松散相等（==），以避免意外的类型转换导致的错误。

1.3 算术运算符

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

javascript复制let a = 10 + 5;  // 15
let b = 10 - 5;  // 5
let c = 10 * 5;  // 50
let d = 10 / 5;  // 2
let e = 10 % 3;  // 1，取余
let f = 2 ** 3;  // 8，指数运算

自增和自减运算符：

javascript复制let x = 5;
x++;  // x现在是6
x--;  // x现在是5

1.4 逻辑运算符

逻辑运算符用于布尔运算：

javascript复制true && false;  // false，逻辑与
true || false;  // true，逻辑或
!true;          // false，逻辑非

逻辑运算符的短路特性：

javascript复制false && console.log("不会执行");  // 短路，不会执行console.log
true || console.log("不会执行");   // 短路，不会执行console.log

2. 条件语句

条件语句允许程序根据不同的条件执行不同的代码块。

2.1 if语句

if语句是最基本的条件控制结构：

javascript复制if (condition) {
    // 条件为真时执行的代码
} else if (anotherCondition) {
    // 另一个条件为真时执行的代码
} else {
    // 所有条件都不满足时执行的代码
}

2.2 switch语句

switch语句用于多条件分支：

javascript复制switch(expression) {
    case value1:
        // 代码块1
        break;
    case value2:
        // 代码块2
        break;
    default:
        // 默认代码块
}

注意：每个case后面应该包含break语句，否则会继续执行下一个case（称为"fall-through"）。

3. 循环结构

循环结构允许重复执行代码块。

3.1 for循环

for循环是最常用的循环结构：

javascript复制for (let i = 0; i < 5; i++) {
    console.log(i);  // 输出0到4
}

3.2 while循环

while循环在条件为真时重复执行：

javascript复制let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

3.3 do...while循环

do...while循环至少执行一次：

javascript复制let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

3.4 for...of和for...in循环

for...of用于遍历可迭代对象（如数组）：

javascript复制const arr = [1, 2, 3];
for (const item of arr) {
    console.log(item);  // 输出1, 2, 3
}

for...in用于遍历对象的属性：

javascript复制const obj = {a: 1, b: 2};
for (const key in obj) {
    console.log(key, obj[key]);  // 输出"a 1", "b 2"
}

提示：for...in会遍历对象的所有可枚举属性，包括原型链上的属性，使用时需要注意。

4. 数组操作

数组是JavaScript中存储有序数据集合的对象。

4.1 数组创建和访问

javascript复制// 创建数组
const fruits = ['Apple', 'Banana', 'Orange'];

// 访问元素
console.log(fruits[0]);  // "Apple"

// 修改元素
fruits[1] = 'Pear';

4.2 常用数组方法

javascript复制// 添加/删除元素
fruits.push('Mango');     // 末尾添加
fruits.pop();             // 删除最后一个
fruits.unshift('Grape');  // 开头添加
fruits.shift();           // 删除第一个

// 查找元素
fruits.indexOf('Apple');  // 返回索引或-1
fruits.includes('Apple'); // 返回布尔值

// 遍历数组
fruits.forEach(function(item, index) {
    console.log(index, item);
});

// 映射新数组
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

// 过滤数组
const longFruits = fruits.filter(fruit => fruit.length > 5);

4.3 数组解构

ES6引入的解构赋值可以方便地从数组中提取值：

javascript复制const [first, second] = fruits;
console.log(first);   // "Apple"
console.log(second);  // "Banana"

5. 函数详解

函数是JavaScript中的基本构建块，用于封装可重用的代码。

5.1 函数声明和表达式

javascript复制// 函数声明
function greet(name) {
    return `Hello, ${name}!`;
}

// 函数表达式
const greet = function(name) {
    return `Hello, ${name}!`;
};

// 箭头函数
const greet = (name) => `Hello, ${name}!`;

5.2 函数参数

JavaScript函数参数非常灵活：

javascript复制function sum(a, b = 0) {  // 默认参数
    return a + b;
}

function logArgs(...args) {  // 剩余参数
    console.log(args);
}

5.3 高阶函数

函数可以作为参数传递或作为返回值：

javascript复制// 接受函数作为参数
function operate(a, b, operation) {
    return operation(a, b);
}

// 返回函数
function createMultiplier(factor) {
    return function(x) {
        return x * factor;
    };
}

5.4 闭包

闭包是JavaScript中强大的特性：

javascript复制function counter() {
    let count = 0;
    return function() {
        return ++count;
    };
}

const myCounter = counter();
console.log(myCounter());  // 1
console.log(myCounter());  // 2

注意：闭包会保留对外部变量的引用，可能导致内存泄漏，使用时需要注意。

6. 运算符优先级

理解运算符优先级对于编写正确的表达式至关重要：

javascript复制// 乘法优先级高于加法
let result = 2 + 3 * 4;  // 14，不是20

// 使用括号明确优先级
result = (2 + 3) * 4;  // 20

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

1. 成员访问 .、[]
2. 函数调用 ()
3. 一元运算符 ++、--、!、~
4. 乘除 *、/、%
5. 加减 +、-
6. 比较 <、<=、>、>=
7. 相等 ==、!=、===、!==
8. 逻辑与 &&
9. 逻辑或 ||
10. 条件（三元）运算符 ?:
11. 赋值 =、+=等

在实际开发中，当不确定优先级时，使用括号明确意图是最佳实践。