JavaScript零基础入门：变量、数据类型与基础语法详解

一、准备环境：如何编写并运行第一行代码

初学 JavaScript 不需要搭建沉重的本地工程或安装庞大的开发套件。只要你的电脑上安装了现代浏览器（如 Chrome、Edge、Firefox 或 Safari），就已经拥有了一个工业级标准的 JavaScript 解析执行引擎（例如 Chrome 的 V8 引擎）。

运行 JavaScript 最常见的两种实践方式如下：

• 方式一：浏览器开发者控制台（即时交互验证）
  在浏览器中按下键盘快捷键 F12（Mac 上为 Cmd + Option + I），切换至 Console（控制台） 选项卡。控制台提供了一个原生的 REPL（读取-求值-打印循环）环境，适合随时验证一段语法或测试计算逻辑。
• 方式二：HTML 文件嵌入（网页开发标准形式）
  在项目文件夹中创建一个名为 index.html 的文件，使用 <script> 标签将脚本嵌入其中并在浏览器中双击打开。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 运行测试</title>
</head>
<body>
  <h1>查看控制台获取运行输出</h1>

  <script>
    // 声明变量并进行运算
    const baseScore = 80;
    let bonus = 15;
    let finalScore = baseScore + bonus;

    // 向控制台输出结果
    console.log("最终计算得分为:", finalScore);
  </script>
</body>
</html>

当浏览器加载上述文档时，JavaScript 引擎会经历词法分析、抽象语法树构建、执行上下文创建以及逐行执行的过程。下面的步骤图完整还原了代码从源文本到终端输出的实际轨迹：

二、变量的本质与声明机制：var、let 与 const

在计算机程序中，变量（Variable）本质上是计算机内存中一块被命名的存储区域。我们可以把变量想象成贴了标签的储物盒，标签即“变量名”（标识符），盒中装载的物品则是“数据值”。

JavaScript 提供了三个关键字用于声明变量：早期的 var，以及在 ECMAScript 2015（ES6）标准中引入的 let 和 const。理解它们的差异是写出高可靠性代码的前提。

1. let：现代可变变量的标准选择

let 用于声明在程序运行期间其值可能会发生变化的变量。它具有两大核心特征：

• 块级作用域（Block Scope）：由一对大括号 { ... } 包裹的区域即为一个独立作用域（如 if 分支或 for 循环体）。let 声明的变量被严格限制在块内部，不会向外部泄露。
• 同一作用域内禁止重复声明：如果尝试在同一作用域内对同一个标识符再次使用 let 声明，解析器会立即抛出 SyntaxError。

let currentRound = 1;
currentRound = 2; // 允许重新赋值

if (true) {
  let secretCode = "ALPHA_9";
  console.log(secretCode); // 正常输出: "ALPHA_9"
}

// 在 if 块外部尝试访问块级变量
// console.log(secretCode); // 抛出错误: Uncaught ReferenceError: secretCode is not defined

2. const：不可重新赋值的常量声明

const 用于声明不应被重新赋值的标识符。在现代工程实践中，推荐将 const 作为默认声明方式。只有在明确知道该变量需要重新赋值（如循环累加器）时，才改用 let。

• 必须声明时即刻初始化：不能写 const total;，否则直接报语法错误。
• 禁止重新绑定内存地址：对 const 变量执行 = 重新赋值操作会触发 TypeError。

const MAX_CONNECTIONS = 100;
// MAX_CONNECTIONS = 200; // 抛出错误: Uncaught TypeError: Assignment to constant variable.

// 重要特例：当 const 指向一个对象或数组时，它锁定的仅仅是“内存地址指针”
const serverConfig = { port: 8080, host: "localhost" };
serverConfig.port = 9000; // 完全合法！因为并未改变 serverConfig 指向的地址
console.log(serverConfig.port); // 输出: 9000

3. var 的历史包袱与潜在隐患

var 是 JavaScript 诞生之初就存在的声明方式。它缺乏块级作用域支持（仅支持全局与函数作用域），而且具备“声明提升（Hoisting）”的特权：在执行之前，var 的声明会被提前提升至所在作用域顶部并默认初始化为 undefined。这常导致变量在声明前被误读却不报错，进而产生难以排查的逻辑 Bug。因此，在现代代码中应全面放弃 var。

三、数据类型体系：原始类型与引用类型

JavaScript 是一门动态弱类型语言。所谓“动态”，指的是变量在声明时不需要指定其数据类型，变量的类型完全由其当前存储的具体值决定，并且同一变量可以在运行中被赋予不同类型的值。我们可以使用 typeof 运算符在运行时检查任意数据的类型名。

在底层内存结构上，JavaScript 的数据类型严格划分为两大阵营：原始数据类型（Primitive Types） 与 引用数据类型（Reference Types）。

1. 七大原始数据类型（Primitives）

原始数据类型是构成程序的最小数据单元。它们的值直接以固定大小存放在栈内存（Stack）中，是不可再分的纯粹数据：

• Number（数值）：统一包含整数与浮点数（如 42, 3.14159）。此外包含特殊数值 NaN（Not a Number，非有效数字计算结果）与 Infinity（无穷大）。
• String（字符串）：文本数据，用单引号 ''、双引号 "" 或反引号 `` 包裹。反引号支持模板字符串语法 ${...}，便于内嵌表达式。
• Boolean（布尔）：仅有两个逻辑值：true（真）与 false（假）。
• Undefined（未定义）：变量已声明但尚未被赋予具体值时的默认状态。例如 let count; console.log(count); // undefined。
• Null（空对象指针）：表示一个有意的“空值”或“无对象”。注意：执行 typeof null 会返回 "object"，这是从 1995 年 JavaScript 第一版保留下来的著名历史缺陷，并不代表 null 真的是对象。
• BigInt（大整数）：用于安全表示大于 \(2^{53} - 1\) 的任意精度整数，在数字末尾添加 n 表示，例如 9007199254740995n。
• Symbol（符号）：ES6 引入的原语，用于创建全局独一无二的不可变标识符，常用于防止对象属性重名冲突。

2. 引用数据类型（Objects）

除原始类型之外的所有复杂数据结构统称为引用类型，核心包括 Object（标准键值对对象）、Array（有序数组） 和 Function（函数）。引用数据的大小是动态可变的，因此它们在堆内存（Heap）中开辟存储空间，而在栈内存中仅保存一个指向堆中具体地址的引用指针（Memory Address）。

// 1. 原始类型的按值传递（互不影响）
let originNum = 100;
let copiedNum = originNum;
copiedNum = 200;
console.log(originNum); // 依然是 100，完全独立

// 2. 引用类型的地址共享（修改连动）
const userA = { name: "张三", level: 1 };
const userB = userA; // 仅仅复制了堆内存地址指针
userB.level = 2;
console.log(userA.level); // 变成了 2！因为 userA 与 userB 指向堆中同一个对象实体

四、基础语法要素与常用运算符

掌握了变量与类型后，编写逻辑的下一步是熟练运用语言的语法规则与运算符对数据进行处理。

1. 代码排版与书写规范

• 大小写敏感（Case Sensitivity）：变量名 score、Score 与 SCORE 是完全独立的三个标识符。关键字如 let、if 不能大写。
• 标识符命名规则：变量名必须以英文字母、下划线 _ 或美元符号 $ 开头，后续可包含数字。业界通用推荐小驼峰命名法（camelCase），如 userAccountBalance。
• 语句分号规则：JavaScript 支持自动分号插入（ASI），但为了杜绝某些压缩工具或特殊括号换行引发的边界歧义，显式书写分号 ; 是极其稳健的良好习惯。

2. 核心运算符与执行行为

// 字符串模板与拼接
let product = "笔记本";
let price = 5999;
console.log(`商品：${product}，售价：¥${price}`);

// 逻辑短路用于兜底默认值
let userNickname = "";
let displayName = userNickname || "匿名访客";
console.log(displayName); // 输出: "匿名访客"

五、初学者高频踩坑点与避坑指南

初学 JavaScript 时，以下四个陷阱出现频率最高，请在编写代码时特别留心：

六、全景回顾与进阶学习路径

学习 JavaScript 的初始阶段，务必将精力和心智集中在语言规范最底层、最根本的核心规则上。下图将本文讲解的所有知识点进行了模块化聚合与关系梳理：

完成本文基础知识的吸收后，建议你在控制台中亲自动手完成以下三项极简巩固练习：

1. 使用 const 声明一个包含自身姓名、年龄与技能列表的对象，并在控制台尝试更新其年龄属性与新增一项技能。
2. 编写一个简易计算逻辑，输入购买金额（使用字符串形式 "199.9"），显式转换为数值后加上运费 10，并利用模板字符串格式化输出。
3. 设计一段包含 if-else 的分支语句，分别验证严格全等 === 与宽松相等 == 在比较 0 与 false 时的不同判定结果。

彻底打牢变量、数据类型与基本语法的根基后，你便拥有了迈向函数式编程、DOM 页面事件交互、异步编程（Promise/async-await）以及现代前端框架开发的坚实阶梯。