JavaScript从入门到精通（一）

引言

JavaScript 是一种跨平台、面向对象的脚本语言，最初是为了给网页添加交互性而创建的。如今，JavaScript 不仅是浏览器端开发的核心技术，也广泛应用于服务器端（如 Node.js）、移动应用开发等多个领域。本教程旨在提供一个从入门、初级、中级到高级的完整学习路径，详细讲解 JavaScript 的核心概念、常用示例以及常见问题的解决方案，帮助学习者系统掌握这门强大的编程语言。

第一部分：JavaScript 入门 (Getting Started with JavaScript)

在开始学习 JavaScript 编程之前，首先需要搭建开发环境并了解一些基础的交互方式。

1.1 开发环境搭建 (Setting Up the Development Environment)

JavaScript 主要的运行环境是浏览器和 Node.js。对于初学者，浏览器是最容易上手的环境。

• 浏览器开发者工具 (Browser Developer Tools): 现代浏览器都内置了强大的开发者工具，是学习和调试 JavaScript 的重要助手。
  • 打开方式: 通常可以通过按 F12键，或者在页面上右键选择“检查”或“Inspect Element”来打开。对于 Windows 系统，快捷键通常是 Ctrl + Shift + I；macOS 系统则是 ⌘ + ⌥ + I。Safari 浏览器可能需要先在偏好设置中启用“开发”菜单。
  • 控制台 (Console): JavaScript 控制台允许执行单行或多行 JavaScript 代码，并查看代码运行结果或错误信息。这是测试代码片段、理解变量状态和调试错误的常用工具。例如，可以直接在控制台输入 alert("Hello, World!"); 来弹出一个提示框。
  • 调试器 (Debugger/Sources): 调试器允许设置断点 (breakpoints)，单步执行代码，观察变量值变化，以及分析调用栈 (call stack)。这对于理解复杂代码的执行流程和定位 bug 非常关键。
  • 元素检查器 (Inspector/Elements): 用于查看和修改页面的 HTML 结构和 CSS 样式，也可以观察 DOM 相关的 JavaScript 操作结果。
• Node.js 环境: Node.js 是一个允许在服务器端运行 JavaScript 的运行时环境。它基于 Chrome V8 JavaScript 引擎构建。
  • 安装: 可以从 Node.js 官方网站 (nodejs.org) 下载对应操作系统的安装包进行安装。安装 Node.js 时通常会自动安装 npm (Node Package Manager)，npm 是 JavaScript 的包管理工具，用于安装和管理项目依赖。
  • 验证安装: 安装完成后，可以在命令行工具（如 Terminal 或 Command Prompt）中输入 node -v 和 npm -v 来检查 Node.js 和 npm 是否成功安装并查看其版本号。
  • 运行 JavaScript 文件: 可以创建一个 .js 文件，例如 test.js，内容为 console.log("Node is working");，然后在命令行中通过 node test.js 来执行该文件。
• 代码编辑器 (Code Editors): 选择一个合适的代码编辑器对提高开发效率至关重要。流行的选择包括 Visual Studio Code (VS Code)、Sublime Text、Atom 等。这些编辑器通常提供语法高亮、代码补全、调试支持等功能。

1.2 JavaScript 基础语法 (Basic JavaScript Syntax)

1.2.1 注释 (Comments)

注释用于解释代码，不会被 JavaScript 引擎执行。良好的注释习惯有助于提高代码的可读性和可维护性。

• 单行注释 (Single-line Comments): 以 // 开头，直到该行结束。

JavaScript
// 这是一行单行注释
let message = "Hello"; // 也可以在代码后面添加注释

• 最佳实践建议在 // 后留一个空格，并以大写字母开始注释内容，如同一个句子，但不以句号结束。如果注释不紧跟新的缩进级别，建议在其上方添加一个空行，形成代码块，使其指代更清晰。
• 多行注释 (Multi-line Comments): 以 /* 开始，以 */ 结束，可以跨越多行。

  JavaScript
  /*
  这是一个
  多行注释示例。
  */

  多行注释不能嵌套，因为 */ 序列会终止注释。尽管可以用 /*... */ 来注释掉代码块，但通常推荐使用多行 // 注释，这样更易于视觉上区分注释掉的代码，并且允许使用 /*... */ 来调试代码段。
• Hashbang 注释: 以 #! 开头，仅在脚本或模块的绝对开头有效，用于指定 JavaScript 引擎的路径，例如在 Node.js 脚本中指定 node 解释器。

  JavaScript
  #!/usr/bin/env node
  console.log("This script runs with Node.js");

  这主要用于类 Unix 系统中使脚本可直接执行。

1.2.2 语句与分号 (Statements and Semicolons)

JavaScript 中的指令被称为语句，通常以分号 (;) 结尾。虽然 JavaScript 具有自动分号插入 (ASI) 机制，即在某些情况下可以省略分号，但为了避免潜在的错误和提高代码清晰度，强烈建议始终在每条语句的末尾添加分号。

JavaScriptlet name = "JavaScript";
console.log(name); // 两条语句，都以分号结束

1.2.3 大小写敏感性 (Case Sensitivity)

JavaScript 是大小写敏感的语言。这意味着变量名、函数名以及其他标识符的大小写必须严格匹配。例如，myVariable 和 myvariable 会被视为两个不同的变量。

1.3 变量与常量 (var, let, const) (Variables and Constants)

变量是用于存储数据值的命名容器。在 JavaScript 中，可以使用 var、let 和 const 关键字来声明变量。

• 标识符规则 (Identifier Rules):
  变量名（标识符）必须遵循一定的规则：通常以字母、下划线 (_) 或美元符号 ($) 开头，后续字符可以是字母、数字 (0-9)、下划线或美元符号。JavaScript 区分大小写，并且支持使用大多数 Unicode 字符作为标识符，例如 const Früh = "foobar";。
• 声明关键字 (Declaration Keywords):
  • var: 声明一个变量，可以可选地在声明时初始化。var 声明的变量具有函数作用域或全局作用域，并且会发生变量提升 (hoisting)。

    JavaScript
    var count = 10;
    function exampleVar() {var localVar = "I am local";if (true) {var blockVar = "Still local to function";}console.log(localVar); // "I am local"console.log(blockVar); // "Still local to function"
    }
    // console.log(localVar); // Error: localVar is not defined

  • let: 声明一个块级作用域 ({}) 的局部变量，可以可选地在声明时初始化。let 声明的变量也会被提升，但存在暂时性死区 (Temporal Dead Zone, TDZ)，即在声明之前访问会导致 ReferenceError。

    JavaScript
    let score = 100;
    if (true) {let blockScopeVar = "I am block-scoped";console.log(blockScopeVar); // "I am block-scoped"
    }
    // console.log(blockScopeVar); // Error: blockScopeVar is not defined

  • const: 声明一个块级作用域的只读常量。常量在声明时必须初始化，并且其值一旦设定后不能被重新赋值。与 let 类似，const 声明的常量也存在暂时性死区。

    JavaScript
    const PI = 3.14159;
    // PI = 3.14; // Error: Assignment to constant variable.

    
    需要注意的是，const 声明的“不变性”指的是变量标识符不能指向新的值。如果 const 声明的是一个对象或数组，那么对象或数组本身的内容（即其属性或元素）是可以被修改的。

    JavaScript
    const MY_OBJECT = { key: "value" };
    MY_OBJECT.key = "otherValue"; // 这是允许的
    console.log(MY_OBJECT.key); // "otherValue"// MY_OBJECT = { newKey: "newValue" }; // Error: Assignment to constant variable.const MY_ARRAY = ;
    MY_ARRAY.push(4); // 这是允许的
    console.log(MY_ARRAY); //// MY_ARRAY = ; // Error: Assignment to constant variable.

• 声明与初始化 (Declaration and Initialization):
  在语句如 let x = 42; 中，let x 部分称为声明，它使得变量 x 在后续代码中可被访问而不会抛出 ReferenceError。= 42 部分称为初始化器，它给变量 x 赋了一个初始值。
  如果使用 var 或 let 声明变量时没有提供初始化器，该变量会被自动初始化为 undefined。

  JavaScript
  let name;
  console.log(name); // 输出 "undefined"

  而 const 声明的常量则强制要求在声明时进行初始化，因为它们之后不能再被赋值，隐式初始化为 undefined 通常是程序员的错误。
• var, let, const 的主要区别:
  理解这三个关键字之间的差异对于编写现代、健壮的 JavaScript 代码至关重要。var 由于其函数作用域和提升行为的特性，容易导致一些难以预料的 bug，例如在循环中创建闭包时变量共享的问题，或者意外的全局变量污染。而 let 和 const 引入了块级作用域，使得变量的生命周期管理更加清晰和可控，更符合其他主流编程语言的习惯，从而减少了作用域相关的错误。const 的使用不仅保证了值的不可重新赋值，更重要的是它向其他开发者传达了这个变量的意图——即它的绑定不应该被改变，这有助于提高代码的可读性和可维护性。暂时性死区 (TDZ) 的存在，确保了变量在声明之前不可被访问，避免了因变量提升而导致的在声明前使用变量却得到 undefined 这种不直观的行为。

特性 (Feature)	var	let	const
作用域 (Scope)	函数作用域或全局作用域	块级作用域 ({})	块级作用域 ({})
提升 (Hoisting)	声明提升，初始化不提升 (值为 undefined)	声明提升，但存在暂时性死区 (TDZ)	声明提升，但存在暂时性死区 (TDZ)
暂时性死区 (TDZ)	无	有 (在声明前访问抛出 ReferenceError)	有 (在声明前访问抛出 ReferenceError)
能否重新声明 (Redeclare)	在同一作用域内可以	在同一作用域内不可以	在同一作用域内不可以
能否重新赋值 (Reassign)	可以	可以	不可以 (但对象/数组内容可修改)
是否必须初始化 (Init)	否 (默认为 undefined)	否 (默认为 undefined)	是

1.4 数据类型 (Data Types)

JavaScript 是一种动态类型语言，这意味着变量在声明时不需要指定类型，其类型是在运行时根据赋给它的值决定的，并且同一个变量可以被赋予不同类型的值。

1.4.1 原始数据类型 (Primitive Data Types)

JavaScript 有七种原始数据类型。原始类型的值是不可变的 (immutable)，意味着一旦创建，它们的值就不能被改变。虽然原始类型本身没有方法，但在访问它们的属性时，JavaScript 会自动将其包装成对应的对象类型（称为自动装箱），从而可以使用这些对象的方法。

1. String (字符串): 用于表示文本数据。字符串是由一系列 UTF-16 编码的字符组成的序列。可以用单引号 (')、双引号 (") 或反引号 (`) (模板字符串) 来创建。

   JavaScript
   let greeting = "Hello, world!";
   let name = 'Alice';
   let message = `Welcome, ${name}!`; // 模板字符串，支持内嵌表达式

2. Number (数字): 用于表示所有数值，包括整数和浮点数。JavaScript 的数字类型基于 IEEE 754 双精度 64 位浮点数标准。这意味着整数的安全表示范围是 $-(2^{53} - 1)$ 到 $2^{53} - 1$。
   特殊的数字值包括：
   • NaN (Not a Number): 表示一个非法的数字操作结果，例如 "abc" / 2。NaN 不等于任何值，包括它自身 (NaN === NaN 为 false)。
   • Infinity: 表示正无穷大，例如 1 / 0。
   • -Infinity: 表示负无穷大。

JavaScript
let age = 30;
let price = 19.99;
let notANumber = NaN;
let positiveInfinity = Infinity;

1. BigInt (大整数): ES2020 引入的新类型，用于表示和操作任意精度的整数，可以超出 Number 类型的安全整数限制。通过在整数字面量后添加 n 来创建。

   JavaScript
   const veryLargeNumber = 9007199254740991n;
   const anotherLarge = BigInt("12345678901234567890");

2. Boolean (布尔): 逻辑实体，只有两个值：true 和 false。常用于条件判断。

   JavaScript
   let isActive = true;
   let isLoggedIn = false;

   在 JavaScript 中，某些值在布尔上下文中会被隐式转换为 false（称为 "falsy" 值），包括 false、0、"" (空字符串)、null、undefined 和 NaN。所有其他值都被认为是 "truthy"。
3. Undefined (未定义): 表示一个变量已被声明但尚未被赋值，或者函数没有返回值时的默认返回值，或者访问不存在的对象属性时的结果。

   JavaScript
   let notAssigned;
   console.log(notAssigned); // undefined

4. Null (空): 表示一个有意的“无值”或“空对象指针”。它是一个只有一个值 null 的特殊类型。

   JavaScript
   let emptyValue = null;

   一个常见的混淆点是 typeof null 返回 "object"。这是一个历史遗留的 bug，但为了向后兼容性而保留了下来。
5. Symbol (符号): ES6 引入的新原始数据类型。Symbol() 函数返回一个唯一且不可变的值，主要用作对象属性的键，以避免属性名冲突。

   JavaScript
   const id = Symbol('description'); // description 是可选的，用于调试
   const uniqueKey = Symbol();
   let obj = {};
   obj[id] = "This is a unique property";

1.4.2 对象类型 (Object Type)

除了原始数据类型之外，JavaScript 中的所有其他值都是对象。对象是属性的集合，其中每个属性都是一个键值对。键通常是字符串（或 Symbol），值可以是任何数据类型，包括其他对象或函数（当函数作为对象的属性时，称为方法）。

常见的内置对象类型包括：

• Object: 所有对象的基类。
• Array: 用于存储有序的数据集合。
• Function: 可执行的代码块。
• Date: 用于处理日期和时间。
• RegExp: 用于处理正则表达式。
• Error: 用于表示错误。
• Map, Set, WeakMap, WeakSet: ES6 引入的集合类型。

对象是可变的 (mutable)，并且在赋值或作为函数参数传递时，传递的是它们的引用，而不是值的副本 。

1.4.3 typeof 运算符

typeof 运算符返回一个表示操作数类型的字符串 24。

JavaScriptconsole.log(typeof "Hello");      // "string"
console.log(typeof 123);          // "number"
console.log(typeof 123n);         // "bigint"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof Symbol());     // "symbol"
console.log(typeof null);         // "object" (历史遗留问题)
console.log(typeof {});           // "object"
console.log(typeof);           // "object" (数组也是对象)
console.log(typeof function(){}); // "function" (函数是一种特殊的对象)

动态类型为 JavaScript 提供了极大的灵活性，但也带来了挑战。例如，隐式类型转换（当运算符用于不同类型的值时，JavaScript 会尝试转换它们）可能导致意外结果，如 "5" + 1 结果是字符串 "51" 而不是数字 6。因此，理解 JavaScript 的类型系统和类型转换规则对于编写可靠的代码至关重要。typeof 运算符虽然有用，但其对 null 的行为以及对所有非函数对象都返回 "object" 的特性，意味着在需要更精确类型检查时，可能需要结合 instanceof 运算符或 Object.prototype.toString.call() 方法。