JavaScript 变量入门实战：以「使用变量」练习掌握声明、赋值与值拷贝

变量是 JavaScript 中最基础也最重要的概念之一。本文以 1-js/02-first-steps/04-variables 章节中的「使用变量」练习（1-hello-variables）为核心，从任务要求、参考答案、逐行解析到背后的声明机制、赋值与拷贝语义、命名规范与常量使用，完整讲解一个初学者必须掌握的变量知识，并给出可在浏览器中直接运行验证的完整代码。

任务目标：理解「使用变量」练习要求

在动手写代码之前，先看清题目。练习任务位于 task.md，它把任务拆解成了 4 个明确步骤：

1. 声明两个变量：admin 和 name；
2. 将值 "John" 赋给 name；
3. 从 name 变量中拷贝其值给 admin；
4. 使用 alert 显示 admin 的值（必须输出 "John"）。

这个练习看起来简单，却精准覆盖了 JavaScript 变量的四个核心动作：声明、赋值、拷贝、输出。任何一门语言的变量学习都绕不开这四步，这也是为什么它被放在 1-js/02-first-steps/04-variables 章节的开篇练习位置。

参考答案与逐行解析

练习的标准解答位于 solution.md，完整代码如下：

let admin, name; // 一次声明两个变量。

name = "John";

admin = name;

alert( admin ); // "John"

下面逐行拆解每一句代码在做什么：

第 1 行：一次声明两个变量

let admin, name;

这里使用了 let 关键字，在同一行用逗号分隔，一次声明了 admin 和 name 两个变量。这正是 article.md 中「也可以在一行中声明多个变量」这一写法的直接应用：

let user = 'John', age = 25, message = 'Hello';

值得说明的是：语法上完全允许在一行里声明多个变量，但这并不是推荐做法。为了让代码更易读，教程建议一行只声明一个变量：

let user = 'John';
let age = 25;
let message = 'Hello';

有些程序员也喜欢下面的多行写法，技术效果完全相同，属于个人审美问题：

let user = 'John',
  age = 25,
  message = 'Hello';

第 2 行：给 name 赋值

name = "John";

= 是赋值运算符，作用是把右侧的值存入左侧变量关联的内存区域。此时 name 变量中保存了字符串 "John"。

第 3 行：值拷贝

admin = name;

这是整个练习最核心的一步：把 name 当前保存的值拷贝一份给 admin。拷贝之后，admin 和 name 两个变量各自保存着相同的数据 "John"，它们是两个独立的变量、两份独立的值，后续修改其中一个不会影响另一个。

这对应 article.md 中的经典示例：

let hello = 'Hello world!';

let message;

// 将字符串 'Hello world' 从变量 hello 拷贝到 message
message = hello;

// 现在两个变量保存着相同的数据
alert(hello); // Hello world!
alert(message); // Hello world!

在 JavaScript 中，字符串、数字这类原始值的拷贝是「按值拷贝」：admin = name 执行后，admin 拥有自己的 "John"，与 name 不再有任何关联。理解这一点，是后续学习对象、引用类型时区分「值拷贝」与「引用拷贝」的基础。

第 4 行：用 alert 输出

alert( admin ); // "John"

alert 是浏览器提供的对话框函数，会把传入的表达式结果显示在弹窗中。这里传入变量名 admin，浏览器会读取该变量当前保存的值并弹出显示，即字符串 "John"。

更深一步：把代码放到浏览器中运行验证

上面这段解答可以直接在浏览器控制台运行，也可以写进一个简单的 HTML 页面里。教程源码仓库中的章节文章使用 js run 标记，意味着代码块是可交互运行的——打开对应文章页面即可点击运行按钮直接看到弹窗结果，输出正是 "John"，与题目要求完全一致。

如果你想在本地验证，只需新建一个 index.html，把代码放在 <script> 标签中，用浏览器打开即可看到 alert 弹窗：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用变量练习</title>
</head>
<body>
  <script>
    let admin, name; // 一次声明两个变量。

    name = "John";

    admin = name;

    alert( admin ); // "John"
  </script>
</body>
</html>

延伸一：变量可以反复重新赋值

变量之所以叫「变量」，是因为它的值可以随时改变。教程中用「贴了标签的盒子」作类比：盒子上的标签是变量名，盒子里的内容就是当前的值，内容可以想换多少次就换多少次：

let message;

message = 'Hello!';

message = 'World!'; // 值改变了

alert(message);

当值改变时，之前保存的数据就被从变量中删除了。而一个变量只应被声明一次，重复声明会直接报错：

let message = "This";

let message = "That"; // SyntaxError: 'message' has already been declared

正确做法是：只声明一次，之后用 = 反复重新赋值，而不再重复 let。

延伸二：变量命名规则与命名规范

「使用变量」练习里 admin 和 name 都是符合规范的命名。JavaScript 对变量名有两条硬性限制（详见 article.md 的「变量命名」小节）：

1. 名称只能包含字母、数字、符号 $ 和 _；
2. 首字符不能是数字。

有效命名示例：

let userName;
let test123;
let $ = 1; // 使用 "$" 声明变量，$ 是普通符号，没有特殊含义
let _ = 2; // 使用 "_" 声明变量

无效命名示例：

let 1a; // 错误：不能以数字开始
let my-name; // 错误：连字符 '-' 不允许用于变量命名

同时要注意：JavaScript 区分大小写，apple 和 APPLE 是两个不同的变量；let、class、return、function 等保留字不能用作变量名；use strict 严格模式下，不声明直接赋值（如 num = 5）会直接报错。

多词命名通常采用驼峰式（camelCase）：除第一个单词外，后续单词首字母大写，如 myVeryLongName。

命名练习：什么样的名字是好名字

紧邻本练习的 2-declare-variables 练习 专门考察命名能力。题目要求：

1. 用我们星球的名字创建一个变量；
2. 创建存储当前浏览者名字的变量。

参考解答（见 solution.md）：

let ourPlanetName = "Earth";
let currentUserName = "John";

命名要点：ourPlanetName 比简短的 planet 表达更清楚（到底指哪个星球）；currentUserName 明确了「当前访问者」的语义。变量名应在准确描述内容的同时保持简洁，远离 a、b、c 这类无意义缩写，除非上下文极其明确。

延伸三：常量与 const 的两种命名风格

如果某个变量的值声明后永远不应该改变，应改用 const 声明常量：

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // 错误：不能对常量重新赋值

常量的命名有两种风格（对应 3-uppercast-constant 练习 的讨论）：

• 大写加下划线：用于「硬编码（hard-coded）」的、代码写下来之前就已确定的值，例如颜色十六进制值：

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

let color = COLOR_ORANGE;
alert(color); // #FF7F00

• 常规驼峰命名：用于「运行期间计算出来、但赋值后不再改变」的值，例如：

const pageLoadTime = /* 网页加载所需的时间 */;

练习中的判断依据是：birthday = '18.04.1982' 是写入代码时即已知的硬编码值，适合 BIRTHDAY 大写写法；而 age = someCode(birthday) 是程序运行时计算出来的结果，今天算出一个年龄、一年后是另一个，应使用小写 age 而不是 AGE。简单说：大写常量只用作「硬编码」值的别名。

总结

通过「使用变量」这道开篇练习，可以完整掌握 JavaScript 变量的四条主线知识：

知识点	要点	本练习中的体现
声明	let 关键字，一行可声明多个变量（不推荐但合法）	let admin, name;
赋值	= 运算符把值存入变量，变量值可反复修改	name = "John";
值拷贝	把变量当前值复制给另一变量，两者互不影响	admin = name;
输出	alert() 显示变量内容，结果是 "John"	alert( admin );

在此基础上，进一步掌握命名规则（驼峰式、$/_ 可用、保留字禁用）、命名规范（清晰、有意义、团队统一）以及 const 常量与两种命名风格，就为后续学习 JavaScript 基础知识 中的类型、运算、函数等内容打下了扎实基础。