引言在探索了 JavaScript 的宏观世界了解了它能做什么、如何与 Web 技术协同工作之后我们现在将目光收回到最微观、最基础的构建单元上。这篇文章是 JavaScript 基础知识的真正起点我们将深入剖析变量的概念。如果说编程是构建数字世界的魔法那么变量就是承载这些魔法的基本容器。不理解变量就无法编写任何有意义的程序。本文将带你从零开始掌握在 JavaScript 中声明、初始化、更新和使用变量的所有核心知识并厘清一些常见的误区。学习完本文你将能够自信地在代码中创建和操纵数据为后续更复杂的学习打下坚实的地基。一、搭建你的实验环境需要的工具理论的学习离不开实践的检验。在开始深入变量之前我们需要准备好编程的环境。对于初学者而言最触手可及的工具就是 Web 浏览器内置的开发者控制台。你可以在大多数桌面浏览器中通过按 F12 键或 CtrlShiftI (Windows/Linux) / CmdOptionI (Mac) 打开它然后找到 “Console” (控制台) 标签页。在这个控制台中你可以直接输入和执行 JavaScript 代码并立即看到结果这是进行小块代码测试和验证概念的绝佳场所。除了使用浏览器自带的控制台本文也在页面中嵌入了一个简易的 JavaScript 终端你可以直接在下方带有“运行”标志的代码块中编写和测试代码。这种即时反馈的学习方式能极大提高效率帮助你直观地看到每一行代码产生的影响。在接下来的所有例子中请随时尝试运行和修改代码亲手敲下每一个字符这是将知识内化为技能的唯一途径。二、变量是什么存放数值的容器变量从字面意义上理解就是“可以改变的量”。在 JavaScript 中一个变量就是一个用于存放数值的容器。这个“数值”的概念非常广泛它可以是一个用于累加计算的数字可以是一段问候语的字符串也可以是更复杂的数据结构甚至是一个函数。变量的独特性和核心价值就在于它存放的数值是可以改变的这也是它区别于“常量”的根本特征。让我们通过一个简单的例子来直观地理解它。点击下面的按钮第一行代码会在屏幕上弹出一个对话框让你输入名字然后将你输入的名字存储到变量 name 中。第二行代码会读取这个变量并显示一段包含你名字的欢迎信息。buttonPress me/buttonjavascript const button document.querySelector(button); button.onclick function () { let name prompt(What is your name?); alert(Hello name , nice to see you!); };现在让我们做一个思维实验如果没有变量上面这个功能该如何实现我们不得不用无穷无尽的 if…else if 语句来枚举每一个可能的输入。letnameprompt(What is your name?);if(nameAdam){alert(Hello Adam, nice to see you!);}elseif(nameAlan){alert(Hello Alan, nice to see you!);}elseif(nameBella){alert(Hello Bella, nice to see you!);}elseif(nameBianca){alert(Hello Bianca, nice to see you!);}elseif(nameChris){alert(Hello Chris, nice to see you!);}// ... and so on ...你可能暂时还不能完全理解这段代码的语法但逻辑是清晰的为了处理一个本应简单灵活的功能我们需要编写大量死板、低效且无法覆盖所有情况的代码。这清晰地展示了变量的力量。它就像一个贴了标签的纸箱子你可以把任何东西放进去需要时再取出来并且可以随时更换里面的东西。这个比喻非常关键变量不是数值本身它仅仅是用于存储数值的容器。区分“容器”和“内容物”是理解后续所有相关概念的基础。三、声明变量创造一个空箱子要想使用一个纸箱子第一步是拿到一个箱子并给它贴上标签。在 JavaScript 中这个过程叫做声明变量。声明一个变量的语法非常简单使用关键字 let 或 var后跟变量的名字。letmyName;letmyAge;在这里我们声明了 myName 和 myAge 两个变量。此刻它们就像是两个刚刚贴好标签的空箱子存在于内存中但内部是空的。你可以直接在控制台中输入变量名来验证它的状态。myName;myAge;执行上面的代码控制台会返回 undefined。这是一个重要的特殊值它明确表示“变量存在但没有被赋值”。你必须严格区分 undefined 和 “变量不存在”这两种情况。如果你尝试访问一个从未声明过的变量比如输入 scoobyDoo;浏览器将会抛出一个引用错误 ReferenceError提示你这个变量未被定义。回到纸箱子的比喻undefined 意味着你拥有一个有标签的空箱子而 ReferenceError 则意味着根本没有这个箱子这个标签所指的东西不存在。这是编程新手非常容易混淆的一个点请务必理解透彻。四、初始化变量给箱子装上东西声明了一个空箱子之后我们自然想把东西放进去。这个过程叫做变量的初始化。方法是在变量名之后跟上一个等号 然后再跟上要存储的数值。myNameChris;myAge37;现在这两个变量不再为空它们分别存储了字符串 “Chris” 和数字 37。你可以再次在控制台中输入变量名来确认其内容。myName;myAge;为了更高效我们通常会将声明和初始化这两个步骤合并在一条语句中完成。letmyNameChris;这是你在未来会最常使用的模式因为它简洁明了。在程序结构上还有一个值得注意的概念叫做“顶置”。在一个多行代码的 JavaScript 程序中你甚至可以在初始化变量之后再声明它程序依然可以工作。这是因为变量的声明会在代码执行之前被“顶置”到其作用域的顶部。但这通常不是一个好的实践它会使代码的逻辑流程变得混乱。在接下来的 var 与 let 的区别中我们会进一步讨论这个问题。五、var 与 let 的区别历史与新标准你可能已经注意到了声明变量有两个关键字var 和 let。为什么会有两个这背后是 JavaScript 的历史和发展。var 是 JavaScript 诞生之初就存在的旧语法而 let 是 ES6 现代 JavaScript 版本中引入的新关键字。引入 let 的目的正是为了解决 var 在设计上的一些令人困惑甚至容易导致错误的缺陷。理解它们的核心区别对你写出健壮、可预测的代码至关重要。第一个重要区别在于作用域和变量顶置的行为。使用 var 声明的变量具有函数作用域并且其声明会被提升允许你在声明语句之前就使用变量其值为 undefined。例如myNameChris;functionlogName(){console.log(myName);}logName();varmyName;这段代码不会报错因为 var myName 的声明被提升到了代码的最顶部。然而使用 let 声明的变量具有块级作用域虽然它的声明也会被提升但它会被置于“暂时性死区”在声明语句之前访问它会导致 ReferenceError。将上面例子中的 var 替换成 let 将立即引发一个错误。这是一个好事因为它强制你遵循“先声明后使用”的逻辑避免了代码的混乱。第二个重要区别在于重复声明。在相同作用域内使用 var 可以多次声明同一个名称的变量而不会报错。varmyNameChris;varmyNameBob;但这明显违背了编程的常理是不必要的冗余极易隐藏错误。而 let 则不允许这种重复声明。letmyNameChris;letmyNameBob;// 此行会引发错误如果你需要使用 let 更新一个变量的值你应该简单地省略 let 关键字letmyNameChris;myNameBob;这是非常清晰且明智的语言设计。综上所述除非你需要维护一些非常老旧、仅支持 Internet Explorer 11 及更早版本的代码这些环境不支持 let否则在任何情况下你都应该优先使用 let 而不是 var。六、更新变量与命名规则代码的可读性一旦变量被初始化它的核心魅力——“可变性”——就得以展现。更新一个变量的值极其简单只需要再次为它赋值即可。myNameBob;myAge40;你无需也不应该再次使用 let 或 var 关键字。给变量起一个好名字是编程中最重要却最容易被忽视的环节之一。一个清晰的命名能极大提升代码的可读性和可维护性。你需要遵循一些规则和最佳实践。首先变量名只能包含拉丁字母a-z, A-Z、数字0-9、下划线_和美元符号$但不能以数字开头。其次变量名是大小写敏感的myage 和 myAge 是完全不同的两个变量。一个被广泛采用的命名约定是“小写驼峰命名法”其规则是将第一个单词的首字母小写之后每个单词的首字母大写。例如 myAge, initialColor, finalOutputValue。命名应简短且具有描述性避免使用无意义的 a, b, x 或过长的句子。绝对不要使用 JavaScript 的保留字如 var, function, let, for, return 等因为它们已经被语言本身占用了。好的命名示例:age myAge init initialColor finalOutputValue audio1 audio2错误与差的命名示例:1a _12 myageMYAGEvarDocument skjfndskjfnbdskjfb thisisareallylongstupidvariablenameman从现在开始请有意识地为自己创建的每一个变量构思一个清晰、合规的名字。七、变量类型不仅仅是数字JavaScript 中的变量可以存储多种不同类型的数据这些类型构成了程序处理信息的基础。我们已经间接接触了其中几个。Number 数字: 用于存储整数或浮点数。在 JavaScript 中给数字变量赋值时不需要用引号括起来。letmyAge17;letpi3.14159;String 字符串: 字符串是文本片段。当你将值赋给一个字符串变量时你必须用单引号或双引号将文本包起来以此告诉解释器这不是变量名或其他代码。letdolphinGoodbyeSo long and thanks for all the fish;Boolean 布尔值: 布尔值只有两种可能的值true 或 false。它像是代码中的开关通常用于条件测试。letiAmAlivetrue;lettest63;// 这里 test 的值将是 false因为 6 不小于 3Array 数组: 数组是一个用于存储多个值的有序集合。它用方括号 [] 包裹内部的值用逗号分隔。letmyNameArray[Chris,Bob,Jim];letmyNumberArray[10,15,40];// 访问数组元素需要使用从 0 开始的索引myNameArray[0];// 返回 ChrismyNumberArray[2];// 返回 40Object 对象: 对象是对现实世界实体的代码建模。它存储的是键值对的集合花括号 {} 包裹每个属性名和其对应的值。letdog{name:Spot,breed:Dalmatian};// 访问对象的属性使用点号 .dog.name;// 返回 Spot这些是 JavaScript 中最基本的数据结构存储的所有内容最终都会归于这些类型之一。八、动态类型灵活与谨慎JavaScript 是一门“动态类型语言”。这意味着与 Java 或 C 等静态类型语言不同你在声明变量时无需指定它将要存储什么类型的数据。同一个变量可以根据程序的逻辑先后被赋值为数字、字符串或任何其他类型。浏览器引擎会在运行时自动识别和处理它的类型。letmyStringHello;即使一个字符串内容全是数字它依然是一个字符串这可能会在运算时导致意想不到的结果。letmyNumber500;// 这是一个字符串不是数字typeofmyNumber;// 返回 stringmyNumber500;// 现在它被重新赋值为了一个真正的数字typeofmyNumber;// 返回 number我们使用 typeof 操作符来验证变量的数据类型。这种灵活性给予了开发者极大的便利但也要求你在进行加法运算或比较操作时必须格外小心以避免类型强制转换带来的隐蔽错误。理解并善用动态类型是掌握 JavaScript 的关键一步。总结通过本文的学习我们已经系统地掌握了 JavaScript 中变量的核心知识。我们从变量作为“数值容器”的基本概念出发逐步学习了如何声明变量以创建容器如何初始化变量以放入内容以及如何更新其内部的值。我们深入探讨了 var 和 let 的关键区别明确了在现代 JavaScript 开发中应优先使用 let。我们还学习了变量命名的规则与最佳实践并概览了数字、字符串、布尔值、数组和对象这几种基本的数据类型。最后我们理解了 JavaScript 作为动态类型语言的本质。变量是构建任何 JavaScript 程序的基石。在下一篇文章中我们将聚焦于数字和数学运算看看如何在这些容器中进行更复杂的计算和操作。还在为 JavaScript 代码写得像“意大利面条”、逻辑混乱难以维护而头秃收藏本文持续跟进后续将系统分享 JS 高效语法糖、浏览器兼容与 Polyfill 实战、手写核心源码解析、常见坑点避雷指南从基础语法到进阶逻辑一站式打通助你快速提升前端开发硬实力
跟着 MDN 学JavaScript day_4：如何存储你需要的信息——变量
发布时间：2026/6/7 0:47:10
引言在探索了 JavaScript 的宏观世界了解了它能做什么、如何与 Web 技术协同工作之后我们现在将目光收回到最微观、最基础的构建单元上。这篇文章是 JavaScript 基础知识的真正起点我们将深入剖析变量的概念。如果说编程是构建数字世界的魔法那么变量就是承载这些魔法的基本容器。不理解变量就无法编写任何有意义的程序。本文将带你从零开始掌握在 JavaScript 中声明、初始化、更新和使用变量的所有核心知识并厘清一些常见的误区。学习完本文你将能够自信地在代码中创建和操纵数据为后续更复杂的学习打下坚实的地基。一、搭建你的实验环境需要的工具理论的学习离不开实践的检验。在开始深入变量之前我们需要准备好编程的环境。对于初学者而言最触手可及的工具就是 Web 浏览器内置的开发者控制台。你可以在大多数桌面浏览器中通过按 F12 键或 CtrlShiftI (Windows/Linux) / CmdOptionI (Mac) 打开它然后找到 “Console” (控制台) 标签页。在这个控制台中你可以直接输入和执行 JavaScript 代码并立即看到结果这是进行小块代码测试和验证概念的绝佳场所。除了使用浏览器自带的控制台本文也在页面中嵌入了一个简易的 JavaScript 终端你可以直接在下方带有“运行”标志的代码块中编写和测试代码。这种即时反馈的学习方式能极大提高效率帮助你直观地看到每一行代码产生的影响。在接下来的所有例子中请随时尝试运行和修改代码亲手敲下每一个字符这是将知识内化为技能的唯一途径。二、变量是什么存放数值的容器变量从字面意义上理解就是“可以改变的量”。在 JavaScript 中一个变量就是一个用于存放数值的容器。这个“数值”的概念非常广泛它可以是一个用于累加计算的数字可以是一段问候语的字符串也可以是更复杂的数据结构甚至是一个函数。变量的独特性和核心价值就在于它存放的数值是可以改变的这也是它区别于“常量”的根本特征。让我们通过一个简单的例子来直观地理解它。点击下面的按钮第一行代码会在屏幕上弹出一个对话框让你输入名字然后将你输入的名字存储到变量 name 中。第二行代码会读取这个变量并显示一段包含你名字的欢迎信息。buttonPress me/buttonjavascript const button document.querySelector(button); button.onclick function () { let name prompt(What is your name?); alert(Hello name , nice to see you!); };现在让我们做一个思维实验如果没有变量上面这个功能该如何实现我们不得不用无穷无尽的 if…else if 语句来枚举每一个可能的输入。letnameprompt(What is your name?);if(nameAdam){alert(Hello Adam, nice to see you!);}elseif(nameAlan){alert(Hello Alan, nice to see you!);}elseif(nameBella){alert(Hello Bella, nice to see you!);}elseif(nameBianca){alert(Hello Bianca, nice to see you!);}elseif(nameChris){alert(Hello Chris, nice to see you!);}// ... and so on ...你可能暂时还不能完全理解这段代码的语法但逻辑是清晰的为了处理一个本应简单灵活的功能我们需要编写大量死板、低效且无法覆盖所有情况的代码。这清晰地展示了变量的力量。它就像一个贴了标签的纸箱子你可以把任何东西放进去需要时再取出来并且可以随时更换里面的东西。这个比喻非常关键变量不是数值本身它仅仅是用于存储数值的容器。区分“容器”和“内容物”是理解后续所有相关概念的基础。三、声明变量创造一个空箱子要想使用一个纸箱子第一步是拿到一个箱子并给它贴上标签。在 JavaScript 中这个过程叫做声明变量。声明一个变量的语法非常简单使用关键字 let 或 var后跟变量的名字。letmyName;letmyAge;在这里我们声明了 myName 和 myAge 两个变量。此刻它们就像是两个刚刚贴好标签的空箱子存在于内存中但内部是空的。你可以直接在控制台中输入变量名来验证它的状态。myName;myAge;执行上面的代码控制台会返回 undefined。这是一个重要的特殊值它明确表示“变量存在但没有被赋值”。你必须严格区分 undefined 和 “变量不存在”这两种情况。如果你尝试访问一个从未声明过的变量比如输入 scoobyDoo;浏览器将会抛出一个引用错误 ReferenceError提示你这个变量未被定义。回到纸箱子的比喻undefined 意味着你拥有一个有标签的空箱子而 ReferenceError 则意味着根本没有这个箱子这个标签所指的东西不存在。这是编程新手非常容易混淆的一个点请务必理解透彻。四、初始化变量给箱子装上东西声明了一个空箱子之后我们自然想把东西放进去。这个过程叫做变量的初始化。方法是在变量名之后跟上一个等号 然后再跟上要存储的数值。myNameChris;myAge37;现在这两个变量不再为空它们分别存储了字符串 “Chris” 和数字 37。你可以再次在控制台中输入变量名来确认其内容。myName;myAge;为了更高效我们通常会将声明和初始化这两个步骤合并在一条语句中完成。letmyNameChris;这是你在未来会最常使用的模式因为它简洁明了。在程序结构上还有一个值得注意的概念叫做“顶置”。在一个多行代码的 JavaScript 程序中你甚至可以在初始化变量之后再声明它程序依然可以工作。这是因为变量的声明会在代码执行之前被“顶置”到其作用域的顶部。但这通常不是一个好的实践它会使代码的逻辑流程变得混乱。在接下来的 var 与 let 的区别中我们会进一步讨论这个问题。五、var 与 let 的区别历史与新标准你可能已经注意到了声明变量有两个关键字var 和 let。为什么会有两个这背后是 JavaScript 的历史和发展。var 是 JavaScript 诞生之初就存在的旧语法而 let 是 ES6 现代 JavaScript 版本中引入的新关键字。引入 let 的目的正是为了解决 var 在设计上的一些令人困惑甚至容易导致错误的缺陷。理解它们的核心区别对你写出健壮、可预测的代码至关重要。第一个重要区别在于作用域和变量顶置的行为。使用 var 声明的变量具有函数作用域并且其声明会被提升允许你在声明语句之前就使用变量其值为 undefined。例如myNameChris;functionlogName(){console.log(myName);}logName();varmyName;这段代码不会报错因为 var myName 的声明被提升到了代码的最顶部。然而使用 let 声明的变量具有块级作用域虽然它的声明也会被提升但它会被置于“暂时性死区”在声明语句之前访问它会导致 ReferenceError。将上面例子中的 var 替换成 let 将立即引发一个错误。这是一个好事因为它强制你遵循“先声明后使用”的逻辑避免了代码的混乱。第二个重要区别在于重复声明。在相同作用域内使用 var 可以多次声明同一个名称的变量而不会报错。varmyNameChris;varmyNameBob;但这明显违背了编程的常理是不必要的冗余极易隐藏错误。而 let 则不允许这种重复声明。letmyNameChris;letmyNameBob;// 此行会引发错误如果你需要使用 let 更新一个变量的值你应该简单地省略 let 关键字letmyNameChris;myNameBob;这是非常清晰且明智的语言设计。综上所述除非你需要维护一些非常老旧、仅支持 Internet Explorer 11 及更早版本的代码这些环境不支持 let否则在任何情况下你都应该优先使用 let 而不是 var。六、更新变量与命名规则代码的可读性一旦变量被初始化它的核心魅力——“可变性”——就得以展现。更新一个变量的值极其简单只需要再次为它赋值即可。myNameBob;myAge40;你无需也不应该再次使用 let 或 var 关键字。给变量起一个好名字是编程中最重要却最容易被忽视的环节之一。一个清晰的命名能极大提升代码的可读性和可维护性。你需要遵循一些规则和最佳实践。首先变量名只能包含拉丁字母a-z, A-Z、数字0-9、下划线_和美元符号$但不能以数字开头。其次变量名是大小写敏感的myage 和 myAge 是完全不同的两个变量。一个被广泛采用的命名约定是“小写驼峰命名法”其规则是将第一个单词的首字母小写之后每个单词的首字母大写。例如 myAge, initialColor, finalOutputValue。命名应简短且具有描述性避免使用无意义的 a, b, x 或过长的句子。绝对不要使用 JavaScript 的保留字如 var, function, let, for, return 等因为它们已经被语言本身占用了。好的命名示例:age myAge init initialColor finalOutputValue audio1 audio2错误与差的命名示例:1a _12 myageMYAGEvarDocument skjfndskjfnbdskjfb thisisareallylongstupidvariablenameman从现在开始请有意识地为自己创建的每一个变量构思一个清晰、合规的名字。七、变量类型不仅仅是数字JavaScript 中的变量可以存储多种不同类型的数据这些类型构成了程序处理信息的基础。我们已经间接接触了其中几个。Number 数字: 用于存储整数或浮点数。在 JavaScript 中给数字变量赋值时不需要用引号括起来。letmyAge17;letpi3.14159;String 字符串: 字符串是文本片段。当你将值赋给一个字符串变量时你必须用单引号或双引号将文本包起来以此告诉解释器这不是变量名或其他代码。letdolphinGoodbyeSo long and thanks for all the fish;Boolean 布尔值: 布尔值只有两种可能的值true 或 false。它像是代码中的开关通常用于条件测试。letiAmAlivetrue;lettest63;// 这里 test 的值将是 false因为 6 不小于 3Array 数组: 数组是一个用于存储多个值的有序集合。它用方括号 [] 包裹内部的值用逗号分隔。letmyNameArray[Chris,Bob,Jim];letmyNumberArray[10,15,40];// 访问数组元素需要使用从 0 开始的索引myNameArray[0];// 返回 ChrismyNumberArray[2];// 返回 40Object 对象: 对象是对现实世界实体的代码建模。它存储的是键值对的集合花括号 {} 包裹每个属性名和其对应的值。letdog{name:Spot,breed:Dalmatian};// 访问对象的属性使用点号 .dog.name;// 返回 Spot这些是 JavaScript 中最基本的数据结构存储的所有内容最终都会归于这些类型之一。八、动态类型灵活与谨慎JavaScript 是一门“动态类型语言”。这意味着与 Java 或 C 等静态类型语言不同你在声明变量时无需指定它将要存储什么类型的数据。同一个变量可以根据程序的逻辑先后被赋值为数字、字符串或任何其他类型。浏览器引擎会在运行时自动识别和处理它的类型。letmyStringHello;即使一个字符串内容全是数字它依然是一个字符串这可能会在运算时导致意想不到的结果。letmyNumber500;// 这是一个字符串不是数字typeofmyNumber;// 返回 stringmyNumber500;// 现在它被重新赋值为了一个真正的数字typeofmyNumber;// 返回 number我们使用 typeof 操作符来验证变量的数据类型。这种灵活性给予了开发者极大的便利但也要求你在进行加法运算或比较操作时必须格外小心以避免类型强制转换带来的隐蔽错误。理解并善用动态类型是掌握 JavaScript 的关键一步。总结通过本文的学习我们已经系统地掌握了 JavaScript 中变量的核心知识。我们从变量作为“数值容器”的基本概念出发逐步学习了如何声明变量以创建容器如何初始化变量以放入内容以及如何更新其内部的值。我们深入探讨了 var 和 let 的关键区别明确了在现代 JavaScript 开发中应优先使用 let。我们还学习了变量命名的规则与最佳实践并概览了数字、字符串、布尔值、数组和对象这几种基本的数据类型。最后我们理解了 JavaScript 作为动态类型语言的本质。变量是构建任何 JavaScript 程序的基石。在下一篇文章中我们将聚焦于数字和数学运算看看如何在这些容器中进行更复杂的计算和操作。还在为 JavaScript 代码写得像“意大利面条”、逻辑混乱难以维护而头秃收藏本文持续跟进后续将系统分享 JS 高效语法糖、浏览器兼容与 Polyfill 实战、手写核心源码解析、常见坑点避雷指南从基础语法到进阶逻辑一站式打通助你快速提升前端开发硬实力
文法预测分析（附完整规则文件解析）)
