跟着 MDN 学JavaScript day_5：技能测试——变量实战

引言

知识的学习从来不是单向的输入，真正的掌握来自于实践的检验。在上一篇文章中，我们系统学习了 JavaScript 变量的声明、初始化、命名规则以及数据类型等核心概念，你已经在大脑中构建了一个关于变量的知识框架。但是，看得懂和写得出之间，还存在着一个关键的鸿沟。本文将通过 MDN 官方提供的三个层层递进的技能测试任务，带你亲自动手解决实际问题。这些任务看似简单，却精准地考察了变量使用的几个最容易出错的要点：声明与初始化的基本语法、更新变量的正确方式、以及 const 与 let 的本质区别。请认真对待每一个任务，不要急于查看答案，先尝试独立思考和编写代码。只有亲手调试过错误，你才能深刻理解那些规则背后的设计意图。

一、任务 1：变量的声明与初始化基本功

第一个任务的目标非常直接，它考察的是 JavaScript 中最基础的操作：如何正确声明一个变量并赋予它一个初始值。任务的具体要求有三点。第一，声明一个名为 myName 的变量。第二，在单独的一行中，用一个合适的值来初始化 myName 变量，比如你自己的名字。第三，在一行内，同时声明并初始化 myAge 变量。

这个任务需要我们为下方 HTML 文件中的脚本部分补充代码。完整的 HTML 结构如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <title>变量：任务1</title>
    <link rel="stylesheet" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/styles.css" />
  </head>

  <body>

    <section class="preview"></section>

  </body>
  <script>
    // 在下方编写代码


    // 不要编写此行以下的代码！

    const section = document.querySelector('section');

    const para1 = document.createElement('p');
    para1.textContent = myName;
    const para2 = document.createElement('p');
    para2.textContent = myAge;
    section.appendChild(para1);
    section.appendChild(para2);
  </script>

</html>

仔细观察这段代码的结构，特别是脚本部分后半段的注释"不要编写此行以下的代码"。这提示我们只需要在注释指定的区域编写代码，而后面的逻辑代码会自动读取我们创建的变量，并将它们的值显示在页面上。para1 元素会显示 myName 的内容，para2 元素会显示 myAge 的内容。

这个任务的核心知识点在于区分"声明"和"初始化"这两个动作。声明变量是使用 let 关键字告诉 JavaScript 引擎要创建一个指定名字的容器，而初始化是第一次给这个容器装入具体的值。这两个动作可以分两步完成，也可以合并在一条语句中完成。任务要求的前两点是分步完成声明与初始化，第三点则是要求合并完成。这两种方式在代码中的体现如下：

javascript 复制代码

// 分步完成：先声明，后初始化
let myName;
myName = "张小明";

// 合并完成：在一行内声明并初始化
let myAge = 25;

很多初学者在这里会犯一个错误，就是在初始化时再次使用 let 关键字，写出 let myName = "张小明" 这样的代码。如果变量已经声明过，再次使用 let 声明同一个变量名会引发语法错误。记住，let 关键字只在声明变量时使用，后续更新变量的值时直接使用变量名即可。这个习惯需要从一开始就刻意培养。当你正确完成这段代码后，页面上将会显示两行文字，第一行是你的名字，第二行是你的年龄，这表明变量已经被正确创建和读取。

二、任务 2：更新已存在的变量值

第二个任务的要求更加简洁：将代码中 myName 变量当前保存的值修改为你自己的名字。这个任务的 HTML 结构如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <title>变量：任务2</title>
    <link rel="stylesheet" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/styles.css" />
  </head>

  <body>

    <section class="preview"></section>

  </body>
  <script>
    // 在下方编写代码

    let myName = '李雷';

    // 不要编写此行以下的代码！

    const section = document.querySelector('section');

    let para = document.createElement('p');
    para.textContent = myName;
    section.appendChild(para);
  </script>

</html>

注意，这段起始代码中已经有一行 let myName = '李雷'，这意味着变量 myName 已经被声明并初始化为字符串 '李雷'。这个任务考察的核心概念是变量的更新。在 JavaScript 中，变量之所以叫"变量"，就是因为它的值可以改变。更新一个已经存在的变量的值非常简单，只需要使用赋值运算符等于号，将新的值赋给变量名即可，不需要也不应该再次使用 let 关键字。

很多初学者在面对这个任务时会写出这样的代码：

javascript 复制代码

let myName = '李雷';
let myName = '王小红'; // 错误：重复声明会导致报错

这正是我们需要避免的误区。正确的做法应该是直接对已有的变量进行重新赋值，就像更换纸箱子里的物品一样，箱子本身不需要更换，只需要把旧东西拿出来、新东西放进去。正确的代码应该是：

javascript 复制代码

let myName = '李雷';
myName = '王小红'; // 正确：直接赋值更新变量的值

这行代码执行之后，变量 myName 中存储的字符串就从 '李雷' 变成了 '王小红'。页面上显示的段落内容也会随之改变。这个任务虽然极其简短，但它精准地巩固了一个至关重要的概念：let 用于声明，赋值用于更新。混淆这两者是新手最容易犯的错误之一。一旦你真正理解了这个区别，后续处理更复杂的变量操作时就会游刃有余。

三、任务 3：识别并修复 const 与 let 的错误使用

第三个任务的难度明显提升，它不再是简单地让你写代码，而是给出一段有错误的代码，需要你找出并修正其中的问题，使得最终的输出窗口显示正确的结果："我是某某，20 年后我多少岁"。任务提供的起始 HTML 文件内容如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <title>变量：任务3</title>
    <style>
      p {
        color: purple;
        margin: 0.5em 0;
      }

      * {
        box-sizing: border-box;
      }
    </style>
    <link rel="stylesheet" href="../styles.css" />
  </head>

  <body>

    <section class="preview">



    </section>

  </body>
  <script>
  
    // 在下方编写代码

    const myName = 'Default';
    myName = '李雷'

    let myAge = '18';

    // 不要编写此行以下的代码！

    const section = document.querySelector('section');

    let para1 = document.createElement('p');
    let para2 = document.createElement('p');
    para1.textContent = myName;
    para2.textContent = `20年后我 ${myAge + 20} 岁。`;
    section.appendChild(para1);
    section.appendChild(para2);
  </script>

</html>

这段代码中存在两处错误，需要逐一分析并修正。先看第一处。代码中首先使用 const 声明了 myName 变量并赋值为字符串 'Default'，紧接着下一行又试图将 '李雷' 赋值给 myName。这里涉及到一个重要的知识点：const 关键字用于声明常量，常量一旦被声明并初始化后，其值就不能再被改变。任何试图对 const 声明的变量重新赋值的操作都会导致程序抛出 TypeError。因此，如果我们的目的是要在后面修改 myName 的值，就应该将 const 改为 let。let 声明的变量允许随意重新赋值，这正好符合需求。

javascript 复制代码

let myName = 'Default';
myName = '李雷'; // 现在不会报错了

再看第二处错误。代码中声明 myAge 变量时，将数字 18 用引号包裹起来，写成 let myAge = '18'。在 JavaScript 中，用引号包裹的内容都会被识别为字符串类型。当下方的代码执行 myAge + 20 时，由于 myAge 是一个字符串，加号运算符会触发字符串拼接而非数学加法，最终得到的结果将是字符串 '1820' 而不是我们期望的数字 38。因此，我们需要去掉引号，将 18 作为一个真正的数字类型赋值给 myAge。

javascript 复制代码

let myAge = 18; // 数字类型，myAge + 20 的结果将是 38

这个任务通过对错误代码的诊断与修正，深刻地揭示了 const 与 let 的本质区别，以及动态类型语言中数据类型对于运算符行为的影响。const 适用于那些在程序运行过程中不应该被改变的值，例如配置信息、固定的引用等，使用 const 可以防止意外的重新赋值，提升代码的健壮性。而 let 则适用于需要在程序运行过程中动态更新的值，例如计数器、用户名、计算中间结果等。至于字符串和数字的区分，则需要开发者在赋值时保持清醒，不要将数字用引号包裹，除非你的本意就是将它当作字符串处理。这两处错误的修正，综合考验了你对变量声明的特性以及 JavaScript 数据类型基础的理解，是理论知识与实战能力的结合点。

总结与延伸

通过这三个递进式的技能测试，我们从最基础的变量声明与初始化开始，逐步深入到变量值的更新，最后完成了错误代码的诊断与修复。这三个任务虽然代码量都不大，但每一个都精准地指向了学习变量时最核心也最容易被忽视的知识点。第一个任务让你亲手实践了分步声明初始化与合并声明初始化两种方式，建立起了对 let 关键字作用的直观认识。第二个任务则让你明确区分了"声明变量"与"更新变量"这两个完全不同的操作，纠正了在更新时滥用 let 的常见错误。第三个任务将难度提升到了综合诊断的层面，让你通过修正 const 误用和数字字符串混淆这两处错误，深刻理解了常量与变量的适用场景以及数据类型对运算结果的影响。如果你在完成这些任务时遇到了困难，或者希望评估自己的代码是否正确，可以借助 CodePen、jsFiddle、Glitch 等在线编程工具在线编写和分享你的代码，然后到 MDN 论坛的学习区发帖寻求帮助，记得附上一个描述性的标题、你的代码链接以及原始任务页面的链接。实践是检验真理的唯一标准，也是掌握编程技能的唯一路径。在下一篇文章中，我们将深入探索数字与数学运算的世界，继续夯实 JavaScript 的基础。

还在为 JavaScript 代码写得像"意大利面条"、逻辑混乱难以维护而头秃？收藏本文持续跟进，后续将系统分享 JS 高效语法糖、浏览器兼容与 Polyfill 实战、手写核心源码解析、常见坑点避雷指南，从基础语法到进阶逻辑一站式打通，助你快速提升前端开发硬实力！