【JS】JavaScript 运算符、流程控制、数组操作

Doris893

791人浏览 · 2025-11-22 10:05:00

Doris893 · 2025-11-22 10:05:00 发布

一、运算符

1.1 算术运算符

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

// 基本算术运算
console.log(10 + 5);   // 15 - 加法
console.log(10 - 5);   // 5  - 减法
console.log(10 * 5);   // 50 - 乘法
console.log(10 / 5);   // 2  - 除法
console.log(10 % 3);   // 1  - 取余（求模）

// 取模运算的应用场景：判断数字是否能被整除
console.log(4 % 2);    // 0 - 能被2整除
console.log(5 % 2);    // 1 - 不能被2整除

// 计算失败返回 NaN
console.log('hello' - 5);  // NaN
console.log('hello' * 2);  // NaN
console.log('hello' + 2);  // "hello2" - 字符串拼接

1.2 赋值运算符

对变量进行赋值的运算符：

let num = 10;

// 基本赋值
num = 5;

// 复合赋值运算符
num += 5;   // 等价于 num = num + 5
num -= 3;   // 等价于 num = num - 3
num *= 2;   // 等价于 num = num * 2
num /= 4;   // 等价于 num = num / 4
num %= 3;   // 等价于 num = num % 3

console.log(num); // 输出最终结果

1.3 自增/自减运算符

用于对变量自身进行加1或减1操作：

let count = 5;

// 自增运算符
count++;    // 后置自增，先使用后增加
++count;    // 前置自增，先增加后使用

// 自减运算符
count--;    // 后置自减，先使用后减少
--count;    // 前置自减，先减少后使用

// 实际应用中的区别
let a = 5;
let b = a++;    // b = 5, a = 6

let x = 5;
let y = ++x;    // y = 6, x = 6

1.4 比较运算符

比较两个值的大小或是否相等，返回布尔值：

// 大小比较
console.log(5 > 3);    // true
console.log(5 < 3);    // false
console.log(5 >= 5);   // true
console.log(5 <= 3);   // false

// 相等性比较
console.log(5 == '5');     // true - 宽松相等（值相等）
console.log(5 === '5');    // false - 严格相等（值和类型都相等）
console.log(5 != '5');     // false
console.log(5 !== '5');    // true

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

1.5 逻辑运算符

用于组合多个布尔表达式：

// 逻辑与 (&&) - 一假则假
console.log(true && true);     // true
console.log(true && false);    // false
console.log(3 > 2 && 5 < 8);  // true

// 逻辑或 (||) - 一真则真
console.log(true || false);    // true
console.log(false || false);   // false

// 逻辑非 (!) - 取反
console.log(!true);    // false
console.log(!false);   // true

// 组合使用
let age = 18;
let hasLicense = true;
console.log(age >= 18 && hasLicense);  // true - 可以开车

1.6 运算符优先级

运算符的执行顺序（从高到低）：

// 优先级示例
let result = 5 + 3 * 2;        // 11，不是16
let logicalResult = true || false && false;  // true

// 常用优先级顺序：
// 1. 小括号 ()
// 2. 一元运算符 ! ++ --
// 3. 算术运算符 * / % + -
// 4. 比较运算符 > < >= <=
// 5. 相等运算符 == != === !==
// 6. 逻辑与 &&
// 7. 逻辑或 ||
// 8. 赋值运算符 = += -= 等

二、流程控制语句

2.1 表达式与语句的区别

表达式：可以被求值的代码，会返回一个值
语句：执行操作的代码，不一定返回值

// 表达式示例
5 + 3
x > 5
'hello'

// 语句示例
if (x > 5) { }
for (let i = 0; i < 5; i++) { }

2.2 分支语句

2.2.1 if 单分支语句

// 基本语法
if (条件表达式) {
    // 条件为真时执行的代码
}

// 示例
let score = 85;
if (score >= 60) {
    console.log('考试及格');
}

2.2.2 if-else 双分支语句

// 基本语法
if (条件表达式) {
    // 条件为真时执行
} else {
    // 条件为假时执行
}

// 示例：用户登录验证
let username = prompt('请输入用户名：');
let password = prompt('请输入密码：');

if (username === 'admin' && password === '123456') {
    alert('登录成功！');
} else {
    alert('用户名或密码错误！');
}

2.2.3 if-else if 多分支语句

// 基本语法
if (条件1) {
    // 条件1为真时执行
} else if (条件2) {
    // 条件2为真时执行
} else {
    // 所有条件都为假时执行
}

// 示例：成绩等级判断
let score = +prompt('请输入成绩：');

if (score >= 90) {
    alert('优秀');
} else if (score >= 70) {
    alert('良好');
} else if (score >= 60) {
    alert('及格');
} else {
    alert('不及格');
}

2.2.4 三元运算符

适用于简单的双分支情况：

// 语法：条件 ? 表达式1 : 表达式2
let age = 18;
let message = age >= 18 ? '成年人' : '未成年人';

// 示例：数字补0
let num = prompt('请输入数字：');
num = num < 10 ? '0' + num : num;
alert(num);

2.2.5 switch 语句

适用于等值判断的多分支情况：

// 基本语法
switch (表达式) {
    case 值1:
        // 代码1
        break;
    case 值2:
        // 代码2
        break;
    default:
        // 默认代码
}

// 示例：星期判断
let day = +prompt('请输入星期数字(1-7)：');
switch (day) {
    case 1:
        console.log('星期一');
        break;
    case 2:
        console.log('星期二');
        break;
    case 3:
        console.log('星期三');
        break;
    default:
        console.log('其他日期');
}

2.2.6 if 与 switch 的区别

特性	if 语句	switch 语句
适用场景	范围判断、复杂条件	等值判断
效率	分支少时效率高	分支多时效率高
语法	灵活	结构清晰
数据类型	任意类型	主要处理确定值

2.3 循环语句

2.3.1 for 循环（重点）

// 基本语法
for (起始值; 终止条件; 变化量) {
    // 循环体
}

// 示例：打印1-5
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

// 循环三要素
let sum = 0;
for (let i = 1; i <= 100; i++) {  // i=1:起始值; i<=100:终止条件; i++:变化量
    sum += i;
}
console.log('1-100的和：', sum);

2.3.2 while 循环

// 基本语法
while (条件表达式) {
    // 循环体
}

// 示例
let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

// 不明确循环次数时使用
let userInput;
while (userInput !== 'quit') {
    userInput = prompt('输入"quit"退出：');
}

2.3.3 循环控制语句

// break - 终止整个循环
for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        break;  // 当i等于3时退出循环
    }
    console.log(i);  // 输出：1, 2
}

// continue - 跳过本次循环
for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;  // 当i等于3时跳过本次循环
    }
    console.log(i);  // 输出：1, 2, 4, 5
}

2.3.4 无限循环

// while(true) 方式
while (true) {
    let answer = prompt('你爱我吗？');
    if (answer === '爱') {
        break;
    }
}

// for(;;) 方式
for (;;) {
    let answer = prompt('你爱我吗？');
    if (answer === '爱') {
        break;
    }
}

2.3.5 for 与 while 的选择

for 循环：适合已知循环次数的场景
while 循环：适合未知循环次数的场景

2.4 循环嵌套

// 外层循环控制行
for (let i = 1; i <= 5; i++) {
    // 内层循环控制列
    for (let j = 1; j <= i; j++) {
        document.write('★');
    }
    document.write('<br>');
}

// 九九乘法表
for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= i; j++) {
        document.write(`${j} × ${i} = ${j * i}&nbsp;&nbsp;`);
    }
    document.write('<br>');
}

2.5 断点调试

用于调试代码的执行过程：

按 F12 打开开发者工具
选择 Sources 面板
找到对应的 JavaScript 文件
在代码行号上点击设置断点
刷新页面观察代码执行

三、数组

3.1 数组的基本概念

数组是一种可以按顺序保存多个数据的数据类型。

// 数组声明
let emptyArray = [];  // 空数组
let fruits = ['苹果', '香蕉', '橙子'];  // 字符串数组
let numbers = [1, 2, 3, 4, 5];  // 数字数组
let mixed = [1, 'hello', true, null];  // 混合类型数组

// 使用构造函数声明
let arr = new Array(1, 2, 3);

3.2 数组的访问与操作

let fruits = ['苹果', '香蕉', '橙子'];

// 访问数组 - 查
console.log(fruits[0]);  // "苹果"
console.log(fruits[2]);  // "橙子"

// 修改数组 - 改
fruits[1] = '葡萄';
console.log(fruits);  // ["苹果", "葡萄", "橙子"]

// 数组长度
console.log(fruits.length);  // 3

3.3 数组的遍历

let numbers = [10, 20, 30, 40, 50];

// for 循环遍历
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

// 数组求和
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}
console.log('总和：', sum);

// 求平均值
let average = sum / numbers.length;
console.log('平均值：', average);

// 求最大值和最小值
let max = numbers[0];
let min = numbers[0];
for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > max) {
        max = numbers[i];
    }
    if (numbers[i] < min) {
        min = numbers[i];
    }
}
console.log('最大值：', max, '最小值：', min);

3.4 数组操作方法

let arr = ['苹果', '香蕉'];

// 增
arr.push('橙子');        // 末尾添加：['苹果', '香蕉', '橙子']
arr.unshift('葡萄');     // 开头添加：['葡萄', '苹果', '香蕉', '橙子']

// 删
arr.pop();              // 删除末尾：['葡萄', '苹果', '香蕉']
arr.shift();            // 删除开头：['苹果', '香蕉']
arr.splice(1, 1);       // 从索引1删除1个元素：['苹果']

// 数组筛选示例
let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = [];
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        evenNumbers.push(numbers[i]);
    }
}
console.log(evenNumbers);  // [2, 4, 6]

// 数组去0
let data = [1, 0, 2, 0, 3, 0];
let cleanData = [];
for (let i = 0; i < data.length; i++) {
    if (data[i] !== 0) {
        cleanData.push(data[i]);
    }
}
console.log(cleanData);  // [1, 2, 3]

3.5 数组应用案例

// 渲染柱形图
let data = [50, 80, 120, 90, 60];
for (let i = 0; i < data.length; i++) {
    document.write(`<div style="height: ${data[i]}px; width: 50px; background: blue; margin: 5px;"></div>`);
}

// 冒泡排序
let numbers = [5, 3, 8, 1, 2];
for (let i = 0; i < numbers.length - 1; i++) {
    for (let j = 0; j < numbers.length - 1 - i; j++) {
        if (numbers[j] > numbers[j + 1]) {
            // 交换位置
            let temp = numbers[j];
            numbers[j] = numbers[j + 1];
            numbers[j + 1] = temp;
        }
    }
}
console.log(numbers);  // [1, 2, 3, 5, 8]

四、综合案例 - ATM取款机

// ATM机系统
let balance = 1000;  // 初始余额

while (true) {
    let choice = +prompt(`
请选择操作：
1. 存款
2. 取款
3. 查询余额
4. 退出
    `);
    
    if (choice === 4) {
        break;  // 退出系统
    }
    
    switch (choice) {
        case 1:
            // 存款
            let deposit = +prompt('请输入存款金额：');
            if (deposit > 0) {
                balance += deposit;
                alert(`存款成功！当前余额：${balance}元`);
            } else {
                alert('存款金额必须大于0！');
            }
            break;
            
        case 2:
            // 取款
            let withdraw = +prompt('请输入取款金额：');
            if (withdraw > 0 && withdraw <= balance) {
                balance -= withdraw;
                alert(`取款成功！当前余额：${balance}元`);
            } else if (withdraw > balance) {
                alert('余额不足！');
            } else {
                alert('取款金额必须大于0！');
            }
            break;
            
        case 3:
            // 查询余额
            alert(`当前余额：${balance}元`);
            break;
            
        default:
            alert('请输入有效的选项！');
    }
}

alert('感谢使用ATM系统，再见！');