# 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` 结果不一样?" 或 "复合赋值运算符在数组操作中能用吗?"
JavaScript入门必学2:变量赋值从`=`到`+=`的快捷操作让代码更高效
2 分钟阅读
203 字
如果文章对您有帮助,欢迎支持作者继续创作