JavaScript 基础语法中篇：运算符、条件、循环与数组详解

1.2 赋值与复合赋值运算符

=是最基础的赋值运算符。而复合赋值运算符将算术运算符和赋值结合，能简化代码书写，包括 +=、-=、*=、/=、%=。

// 基础赋值
var num = 10;
console.log(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 %= 2; // 等价于 num = num % 2
console.log(num); // 0

1.3 自增自减运算符

++（自增）和 --（自减）用于将变量的值加 1 或减 1。分为前置和后置两种形式，单独使用时效果一致，但参与运算时有区别：前置是先修改变量值再运算，后置是先运算再修改变量值。

// 单独使用，前置和后置效果一致
var a = 5;
a++; console.log(a); // 6
++a; console.log(a); // 7
a--; console.log(a); // 6
--a; console.log(a); // 5

// 参与运算，前置和后置有区别
var b = 5;
console.log(b++ + 2); // 7 先运算 5+2，再 b 自增为 6
console.log(b); // 6

var c = 5;
console.log(++c + 2); // 8 先 c 自增为 6，再运算 6+2
console.log(c); // 6

1.4 比较运算符

比较运算符用于判断两个值的大小或是否相等，返回布尔类型（true/false），包括 <、>、<=、>=、==、!=、===、!==。

核心重点是 ==和===的区别：

==：只比较值是否相等，会进行隐式类型转换，比如数字 1 和字符串 '1' 会被判定为相等； ===：严格相等，既比较值，也比较类型，不会进行隐式类型转换，实际开发中推荐使用。

console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(10 == '10'); // true 只比较值，隐式类型转换
console.log(10 === '10'); // false 严格相等，类型不同直接返回 false
console.log(10 != 5); // true
console.log(10 !== '10'); // true

1.5 逻辑运算符

逻辑运算符用于对多个布尔值进行逻辑判断，是实现条件判断的核心，包括 &&（逻辑与）、||（逻辑或）、!（逻辑非）。

&&：一假则假，只有所有操作数都为 true 时，结果才为 true； ||：一真则真，只要有一个操作数为 true，结果就为 true； !：取反，真变假，假变真。

// 逻辑与
console.log(true && true); // true
console.log(true && false); // false
console.log(10 > 5 && 8 < 9); // true

// 逻辑或
console.log(true || false); // true
console.log(false || false); // false
console.log(10 < 5 || 8 > 9); // false

// 逻辑非
console.log(!true); // false
console.log(!(10 > 5)); // false

1.6 位运算符（了解）

位运算符是直接对二进制位进行操作，包括 &（按位与）、|（按位或）、~（按位取反）、^（按位异或）以及移位运算符。日常开发中使用频率较低，主要用于底层开发或性能优化场景，了解即可。

二、条件语句：让程序拥有'判断思维'

在实际开发中，程序往往需要根据不同的条件执行不同的代码。JavaScript 提供了 if 语句、三元表达式和 switch 语句三种方式。

2.1 if 语句：最通用的条件判断

if 语句根据条件的复杂程度，分为单分支、双分支和多分支三种形式。

2.1.1 单分支 if 语句

如果条件为 true，执行大括号内的代码，否则跳过。

if (条件) {
    // 条件为 true 时执行的代码
}

示例：判断一个数字是否大于 10。

var num = 15;
if (num > 10) {
    console.log(num + '大于 10');
}

2.1.2 双分支 if-else 语句

条件为 true 时执行 if 代码，为 false 时执行 else 代码。

if (条件) {
    // 条件为 true 时执行
} else {
    // 条件为 false 时执行
}

示例：判断奇偶数。

**注意：**不能用 num % 2 == 1 判断奇数，因为负数取模结果可能是 -1，正确方式是判断 num % 2 != 0。

var num = 11;
if (num % 2 == 0) {
    console.log(num + '是偶数');
} else {
    console.log(num + '是奇数');
}

2.1.3 多分支 if-else if-else 语句

依次判断条件，哪个为 true 就执行对应代码，全为 false 时执行 else。

if (条件 1) {
    // 条件 1 为 true 时执行
} else if (条件 2) {
    // 条件 2 为 true 时执行
} else if (条件 3) {
    // 条件 3 为 true 时执行
} else {
    // 所有条件都为 false 时执行
}

示例：判断正数、负数还是 0。

var num = 0;
if (num > 0) {
    console.log(num + '是正数');
} else if (num < 0) {
    console.log(num + '是负数');
} else {
    console.log(num + '是 0');
}

2.2 三元表达式：if-else 的简化写法

三元表达式是双分支 if-else 的简洁写法，适用于简单判断，一行代码完成判断和结果返回。

语法：条件 ? 表达式 1 : 表达式 2

条件为 true 时，执行并返回表达式 1 的结果；条件为 false 时，执行并返回表达式 2 的结果。

注意：优先级较低，复杂运算中建议用括号包裹。

// 示例 1：判断两个数字的大小，返回较大的数
var a = 20, b = 15;
var max = a > b ? a : b;
console.log('较大的数是：' + max); // 20

// 示例 2：判断是否为偶数
var num = 8;
var res = num % 2 == 0 ? num + '是偶数' : num + '是奇数';
console.log(res); // 8 是偶数

2.3 switch 语句：适用于多分支等值判断

当需要对一个变量进行多个等值判断时，switch 比 if-else if 更清晰。

语法：

switch (表达式) {
    case 值 1:
        // 表达式结果等于值 1 时执行
        break; // 跳出 switch，防止穿透
    case 值 2:
        // 表达式结果等于值 2 时执行
        break;
    default:
        // 表达式结果不匹配任何 case 时执行
        break;
}

核心要点：

switch后的表达式一般是变量或简单运算，会和 case后的值进行严格相等（===）判断；break关键字必须写，否则会发生case 穿透；**default**是可选的。

示例：根据用户输入的数字提示星期几。

var day = prompt("请输入今天星期几（1-7）：");
switch (parseInt(day)) {
    case 1: console.log("星期一"); break;
    case 2: console.log("星期二"); break;
    case 3: console.log("星期三"); break;
    case 4: console.log("星期四"); break;
    case 5: console.log("星期五"); break;
    case 6: console.log("星期六"); break;
    case 7: console.log("星期日"); break;
    default: console.log("输入有误，请输入 1-7 的数字"); break;
}

case 穿透的妙用：如果多个 case 需要执行相同代码，可利用穿透简化。

var day = 6;
switch (day) {
    case 1: case 2: case 3: case 4: case 5:
        console.log("工作日"); break;
    case 6: case 7:
        console.log("休息日"); break;
    default:
        console.log("输入有误"); break;
}

三、循环语句：让代码'重复执行'不再繁琐

经常需要重复执行某段代码，比如打印 1-100 的数字。循环语句可以大大简化开发。JavaScript 提供了 while 和 for 两种核心方式。

3.1 while 循环：先判断后执行

while 循环先判断条件，再执行循环体，条件为 true 时重复执行。

3.1.1 基本语法

// 初始化循环变量
var 变量 = 初始值;
while (循环条件) {
    // 循环体：需要重复执行的代码
    // 更新循环变量（关键，防止死循环）
}

核心注意：循环体中必须有更新循环变量的代码，否则会导致死循环。

3.1.2 基础示例

示例：打印 1-10 的数字。

var num = 1;
while (num <= 10) {
    console.log(num);
    num++; // 更新循环变量
}

示例：计算 5 的阶乘。

var result = 1;
var i = 1;
while (i <= 5) {
    result *= i;
    i++;
}
console.log("5 的阶乘是：" + result); // 120

3.1.3 break 和 continue：循环的控制开关

通过 break 和 continue 控制流程。

（1）continue：结束本次循环，继续下一次

跳过当前次循环剩余代码，直接进入下一次判断。

var i = 1;
while (i <= 5) {
    if (i == 3) {
        i++; // 必须先更新变量，否则死循环
        continue; // 跳过本次循环
    }
    console.log("我在吃第" + i + "个李子");
    i++;
}
// 输出：1、2、4、5 个李子

（2）break：结束整个循环

直接跳出整个循环，不再进行后续判断。

var i = 1;
while (i <= 5) {
    if (i == 3) {
        break; // 跳出整个循环
    }
    console.log("我在吃第" + i + "个李子");
    i++;
}
// 输出：1、2 个李子

3.2 for 循环：更简洁的循环方式

for 循环将初始化、条件、更新整合在一个括号内，适合已知循环次数的场景。

3.2.1 基本语法

for (表达式 1; 表达式 2; 表达式 3) {
    // 循环体
}

表达式 1：初始化，只执行一次； 表达式 2：条件判断，true 时执行； 表达式 3：更新变量，每次执行完循环体后执行。

3.2.2 基础示例

示例：打印 1-10 的数字。

for (var num = 1; num <= 10; num++) {
    console.log(num);
}

3.2.3 break 和 continue 在 for 循环中的使用

作用与 while 一致，且因变量更新在表达式 3，无需手动在 continue 前更新，不易死循环。

// 跳过 5
for (var i = 1; i <= 10; i++) {
    if (i == 5) {
        continue;
    }
    console.log(i);
}

// 遇到 6 退出
for (var i = 1; i <= 10; i++) {
    if (i == 6) {
        break;
    }
    console.log(i);
}

3.3 循环的选择技巧

两者可相互转换。已知次数优先用 for，未知次数优先用 while。无论哪种都要防止死循环。

四、数组：批量数据的'管理大师'

处理一组相关数据时，数组是最佳选择。JS 数组非常灵活，元素可以是不同类型。

4.1 数组的创建方式

4.1.1 字面量方式创建（推荐）

使用 [] 创建，元素间用逗号分隔。

var arr1 = [];
var arr2 = [1, 2, 3, 4, 5];
var arr3 = ['张三', '李四', '王五'];
var arr4 = [1, '张三', true, 3.14];

4.1.2 new 关键字创建

使用 new Array()。若传入单个数字参数，会被当作长度而非元素。

var arr = new Array(5); // 长度为 5 的空数组
console.log(arr); // [empty × 5]

4.2 数组元素的访问和修改

下标从 0 开始，通过 数组名 [下标] 访问。

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr[0]); // 小猪佩奇

// 修改
arr[2] = '小猫凯迪';
console.log(arr); // ['小猪佩奇', '小猪乔治', '小猫凯迪']

// 越界访问返回 undefined
console.log(arr[3]); // undefined

4.3 数组的长度：length 属性

获取或设置数组长度，不带括号。

var arr = [1, 2, 3, 4];
console.log(arr.length); // 4
// 最后一个元素下标永远是 length - 1
console.log(arr[arr.length - 1]); // 4

4.4 数组元素的新增

4.4.1 修改 length 属性新增

设置为大于原长度的值，新增元素默认为 undefined。

var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr); // [9, 5, 2, 7, empty × 2]

4.4.2 通过下标新增

超出当前下标位置赋值，中间未赋值位置变为 empty。

var arr = [];
arr[2] = 10;
console.log(arr); // [empty × 2, 10]

4.4.3 push 方法：末尾追加元素（推荐）

在末尾追加一个或多个元素，自动更新长度。

var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];

for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 != 0) {
        newArr.push(arr[i]);
    }
}
console.log(newArr); // [9, 5, 7, 3]

4.5 数组元素的删除：splice 方法

删除指定位置、指定个数的元素，功能强大。

语法：数组名.splice(起始下标，删除个数)

var arr = [9, 5, 2, 7];
arr.splice(2, 1); // 从下标 2 开始，删除 1 个
console.log(arr); // [9, 5, 7]

4.6 数组的遍历：循环的核心应用

结合循环语句处理数组，常用 for 循环。

var arr = [1, 2, 3, 4, 5];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
    console.log("当前元素：" + arr[i]);
    sum += arr[i];
}
console.log("数组元素总和：" + sum); // 15

总结

本文系统学习了 JavaScript 的运算符、条件语句、循环语句和数组四大核心语法。这些知识点并非孤立，而是相互结合使用的：运算符用于计算，条件语句用于筛选，循环语句用于遍历，三者结合可实现绝大多数数组处理需求。掌握这些基础，是构建复杂业务逻辑的关键。