# JavaScript入门必学2：变量赋值从`=`到`+=`的快捷操作让代码更高效 ## 开篇：你给手机充电的方式，和代码赋值很像 想象你有一部手机，电量是0%。当你插上充电器时，相当于执行了一次「赋值操作」——把充电器提供的电量（比如+20%）存到手机的电量变量里。在JavaScript中，变量就像手机的「电量槽」，而赋值运算符就是帮你「给槽里充电」的工具。 上一篇我们学会了用算术运算符做计算，但计算后的结果如果不能保存，就像算完数学题不写答案——毫无意义。今天我们就来解决这个问题：**如何用赋值运算符保存和修改变量的值**。 --- ## 一、最基础的赋值：`=` 不是「等于」 你可能注意到了，JavaScript里用 `=` 来赋值，但它和我们数学里的「等于」完全不同！ ### 1. 数学中的「等于」：左右两边必须相等 数学题：`x = 5` 表示「x的值必须等于5」，这是一个判断。 ### 2. 代码中的 `=`：把右边的值「倒进」左边的变量 代码：`let x = 5` 表示「创建一个变量x，把右边的5存到x里」，这是一个**操作指令**。 ⚠️ **关键区别**： 代码中的 `=` 是「赋值操作」，不是数学意义上的相等判断。判断相等要用 `===`（后面比较运算符会详细讲）。 --- ## 二、复合赋值运算符：`+=`、`-=` 等的快捷魔法 假设你要给变量 `score`（分数）每次加10分，用基础赋值该怎么写？ ```javascript let score = 0; score = score + 10; // 第一次加分后，score=10 score = score + 10; // 第二次加分后，score=20 score = score + 10; // 第三次加分后，score=30 ``` 虽然能实现，但重复写 `score = score + ...` 很麻烦。这时候，复合赋值运算符就派上用场了！ ### 1. 复合赋值的本质：运算+赋值一步完成 复合赋值运算符是把「算术运算」和「赋值」合并成一个符号，格式是：`变量 运算符= 新值`，等价于 `变量 = 变量 运算符 新值`。 | 运算符 | 等价写法 | 作用 | 示例（初始score=0） | |--------|-------------------|----------------------|---------------------------| | `+=` | `score = score +` | 加后赋值 | `score += 10` → 0+10=10 | | `-=` | `score = score -` | 减后赋值 | `score -= 5` → 10-5=5 | | `*=` | `score = score *` | 乘后赋值 | `score *= 2` → 5*2=10 | | `/=` | `score = score /` | 除后赋值 | `score /= 2` → 10/2=5 | | `%=` | `score = score %` | 取余后赋值 | `score %= 3` → 5%3=2 | ### 2. 用复合赋值改写加分场景 同样的加分操作，用 `+=` 只需一行代码： ```javascript let score = 0; score += 10; // 等价于 score = score + 10 → 10 score += 10; // 等价于 score = score + 10 → 20 score += 10; // 等价于 score = score + 10 → 30 ``` 是不是简洁多了？这就是复合赋值的优势——**减少重复代码，让逻辑更清晰**。 --- ## 三、特殊场景：自增`++`和自减`--` 在编程中，「让变量自己加1」或「自己减1」是非常常见的操作（比如统计点击次数）。这时候可以用两个特殊的赋值运算符：`++`（自增）和 `--`（自减）。 ### 1. 基础用法 ```javascript let count = 0; count++; // 等价于 count = count + 1 → count=1 count--; // 等价于 count = count - 1 → count=0 ``` ### 2. 前置 vs 后置：顺序很重要！ `++` 和 `--` 可以放在变量前面（前置）或后面（后置），结果可能不同： | 写法 | 含义 | 示例（初始count=0） | |------------|----------------------------------------|---------------------------| | `++count` | 先自增1，再使用变量的新值 | `console.log(++count)` → 输出1（count变为1） | | `count++` | 先使用变量的旧值，再自增1 | `console.log(count++)` → 输出0（count变为1） | | `--count` | 先自减1，再使用变量的新值 | `console.log(--count)` → 输出-1（count变为-1） | | `count--` | 先使用变量的旧值，再自减1 | `console.log(count--)` → 输出0（count变为-1） | 🔍 **记忆小技巧**： - 前置（`++count`）：像急性子，先完成操作再用结果 - 后置（`count++`）：像慢性子，先用完旧结果再操作 ### 3. 实际应用场景 比如统计用户点击按钮的次数： ```javascript let clickCount = 0; button.addEventListener('click', () => { clickCount++; // 用户每点一次，计数加1 }); ``` --- ## 四、常见错误：赋值 vs 比较 新手最容易犯的错误之一，是把赋值 `=` 和比较 `===` 搞混。比如： ```javascript let age = 18; if (age = 20) { // 错误！这里用了赋值，不是比较 console.log("已成年"); } ``` 这段代码不会报错，但逻辑完全错误——它把 `age` 的值改成了20，然后判断20是否为「真值」（在JavaScript中非0数字都是真值），所以会错误地输出「已成年」。 正确的写法应该是： ```javascript let age = 18; if (age === 20) { // 用===比较值和类型 console.log("已成年"); } ``` --- ## 五、练习时间：动手试试赋值运算符 1. **基础题**：用 `+=` 计算从1加到5的和（结果应该是15） ```javascript let sum = 0; // 你的代码： sum += 1; // sum=1 sum += 2; // sum=3 sum += 3; // sum=6 sum += 4; // sum=10 sum += 5; // sum=15 console.log(sum); // 输出15 ``` 2. **进阶题**：用 `--` 实现倒计时（从3数到0） ```javascript let num = 3; // 你的代码： console.log(num--); // 输出3（num变为2） console.log(num--); // 输出2（num变为1） console.log(num--); // 输出1（num变为0） console.log(num); // 输出0（此时num已经是0） ``` 3. **陷阱题**：预测下面代码的输出结果 ```javascript let x = 5; let y = x++ + ++x; // 分步解析：x++是5（x变6），++x是7（x变7），所以5+7=12 console.log(x, y); // 输出7 12 ``` --- ## 总结：赋值运算符的核心技能 | 技能点 | 掌握程度检查 | |-----------------|----------------------------------| | 基础赋值 `=` | 知道这是「把右边值存到左边变量」 | | 复合赋值 `+=`等 | 能用 `+=` 简化累加代码 | | 自增自减 `++/--` | 理解前置后置的区别 | | 避免赋值陷阱 | 不会把 `=` 和 `===` 搞混 | 下一步建议：当你能熟练使用赋值运算符后，可以继续学习链接，了解如何用 `>`、`<` 和 `&&`、`||` 做更复杂的判断。 遇到任何疑问，欢迎随时提问！比如："为什么 `num++` 和 `++num` 结果不一样？" 或 "复合赋值运算符在数组操作中能用吗？"