### 2.2 变量怎么用？ 变量的使用就像日常生活中使用容器一样简单，主要分为“准备容器”和“装入东西”两个步骤。在JavaScript中，我们用清晰的语法来完成这些操作。 #### 1. 声明变量：用`let`准备“杯子” `let`是现代JavaScript推荐的声明变量的关键字，它告诉JavaScript：“我需要一个容器来存储数据”。 ```javascript // 声明一个名为name的变量（准备一个杯子） let name; // 声明一个名为age的变量 let age; ``` **通俗理解**：这就像告诉商店老板：“请给我一个叫‘name’的杯子”和“一个叫‘age’的杯子”，老板会为你准备好这些空杯子，但还没装东西。 > **注意**：变量名最好有意义，看到名字就知道它要存什么。比如用`name`存名字，`age`存年龄，而不是用`a`、`b`这种无意义的名称。 #### 2. 赋值：往“杯子”里装数据 声明变量后，我们用`=`符号给变量赋值（装入数据）： ```javascript // 声明变量 let name; // 赋值（往杯子里装东西） name = "小明"; console.log(name); // 输出：小明 // 声明变量 let age; // 赋值 age = 18; console.log(age); // 输出：18 ``` **生活类比**：`name = "小明"`就像往名为“name”的杯子里倒入“小明”这个数据，之后想使用这个数据时，直接叫杯子的名字（变量名）就行了。 #### 3. 一步到位：声明+赋值 通常我们会把声明和赋值合并成一行，更简洁高效： ```javascript // 声明并赋值（准备杯子的同时装入东西） let name = "小明"; let age = 18; let isStudent = true; console.log(name); // 输出：小明 console.log(age); // 输出：18 console.log(isStudent); // 输出：true ``` **优势**：减少代码行数，逻辑更清晰。这就像点外卖时直接说“来一杯珍珠奶茶”（声明+赋值），而不是先“要一个杯子”（声明），再“往杯子里加珍珠奶茶”（赋值）。 #### 4. 动手练：存储并打印你的名字 现在轮到你实践了，按照以下步骤操作： 1. **创建HTML文件**：在VS Code中新建`practice.html`文件 2. **编写代码**： ```html // 声明变量并赋值（替换成你的名字） let myName = "你的名字"; // 打印变量 console.log(myName); // 额外挑战：同时存储并打印你的年龄 // let myAge = 你的年龄; // console.log(myAge); ``` 3. **运行代码**：用浏览器打开文件，按F12打开控制台，你会看到打印出的名字 4. **修改尝试**：改变变量的值，刷新页面观察控制台输出的变化 **常见问题解决**： - 如果控制台提示`Uncaught ReferenceError: myName is not defined`，检查是否忘记写`let` - 如果名字没显示，检查是否用英文引号（`"`）包裹文字，中文引号会报错 - 确保等号前后有空格（可选但推荐，增强可读性） #### 变量使用的核心原则 1. **先声明后使用**：不能直接使用未声明的变量，就像不能用不存在的杯子装水 ```javascript // 错误：变量未声明 score = 90; ``` 2. **变量名区分大小写**：`name`和`Name`是两个不同的变量 ```javascript let name = "小明"; let Name = "小红"; console.log(name); // 小明 console.log(Name); // 小红 ``` 3. **可以重复赋值**：`let`声明的变量可以多次修改值 ```javascript let fruit = "苹果"; fruit = "香蕉"; // 允许修改 fruit = "橙子"; // 再次修改 console.log(fruit); // 输出：橙子 ``` > **编程金句**：变量是代码的“代词”，用好变量能让你的代码像自然语言一样易懂。记住：清晰的变量名比复杂的注释更重要。