JavaScript 基础入门

学习目标

理解 JavaScript 的基本特性与用途
掌握在浏览器和服务器端运行 JavaScript 的方法
了解 JavaScript 的注释语法与编程范式
熟悉 JavaScript 的主要版本演进及关键特性
认识 JavaScript 的优势与局限性

什么是 JavaScript

JavaScript 是一种动态类型、多用途的编程语言，主要用于为网页添加交互功能。它既可以用于客户端开发（如浏览器中操作 DOM），也可以用于服务端开发（通过 Node.js）。JavaScript 能够无缝集成 HTML 和 CSS，并拥有丰富的标准库和庞大的生态系统。

核心特性

单线程执行：一次只处理一个任务。
解释型语言：代码逐行解释执行，无需编译。
动态类型：变量的数据类型在运行时确定，无需提前声明。

第一个 JavaScript 程序

Hello, World!

在浏览器控制台中运行

将以下代码保存为 .html 文件并在浏览器中打开：

<html>
<head></head>
<body>
    <h1>请打开控制台查看消息！</h1>
    <script>
        // 这是我们的第一个 JavaScript 程序
        console.log("Hello, World!");
    </script>
</body>
</html>

<script> 标签用于在 HTML 中嵌入 JavaScript 代码。
console.log() 会将信息输出到浏览器的开发者控制台（按 F12 打开）。

在服务器终端中运行

创建一个名为 hello.js 的文件：

// 这是一条注释
console.log("Hello, World!");

在终端中运行：

node hello.js

输出结果：

Hello, World!

JavaScript 中的注释

注释是代码中的说明文字，不会被 JavaScript 引擎执行，常用于解释逻辑或临时禁用代码。

单行注释：以 // 开头
```
// 这是一条单行注释
```
多行注释：用 /* ... */ 包裹
```
/*
 这是一段
 多行注释
*/
```

JavaScript 的关键特性

特性	说明
客户端脚本	在用户浏览器中运行，响应速度快，无需频繁请求服务器
多功能性	从简单计算到复杂全栈应用均可胜任
事件驱动	实时响应用户操作（如点击、输入等）
异步支持	可通过 `Promise`、`async/await` 等机制实现非阻塞操作（如网络请求）
丰富生态	拥有 React、Vue、Angular 等主流框架，大幅提升开发效率

客户端 vs 服务端

客户端：运行于浏览器，负责页面交互与动态内容更新。
服务端：通过 Node.js 运行，可构建 API、处理业务逻辑、连接数据库等，实现全栈开发。

JavaScript 编程范式

JavaScript 是一种多范式语言，主要支持以下两种风格：

命令式编程

关注“如何做”，通过明确的步骤控制程序流程。
常见形式包括：

过程式编程
面向对象编程（OOP）
使用 for 循环、if 语句、async/await 等

声明式编程

关注“做什么”，描述目标而非具体步骤。
典型例子：

使用箭头函数 =>
数组方法如 map()、filter()、reduce()
函数式编程思想

示例对比：

// 命令式：遍历数组并筛选偶数
const evens = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) evens.push(numbers[i]);
}

// 声明式：直接表达意图
const evens = numbers.filter(n => n % 2 === 0);

JavaScript 能构建什么

响应式网页与单页应用（SPA）
移动应用（React Native、Ionic）
桌面应用（Electron）
后端服务与 RESTful API（Node.js + Express）
实时聊天应用（WebSocket + Socket.IO）
游戏（Canvas / WebGL）
自动化脚本与工具

JavaScript 的局限性

尽管强大，JavaScript 也存在一些不足：

问题	说明
安全风险	易受 XSS（跨站脚本攻击）影响，恶意脚本可通过 `<script>`、`<img>` 等标签注入
性能瓶颈	对于 CPU 密集型任务（如大规模计算），性能不如 C++ 或 Rust
学习曲线	高级开发需掌握异步、闭包、原型链、模块系统等复杂概念
弱类型系统	变量无需声明类型，可能导致运行时错误（如 `"5" + 3 = "53"`）
错误处理较弱	缺乏强类型检查，调试有时较困难

提示：使用 TypeScript 可有效缓解类型安全问题。

JavaScript 版本演进

JavaScript 的标准化由 ECMA International 维护，标准名为 ECMAScript（ES）。

版本	发布年份	关键新特性
ES5	2009	`strict mode`、原生 JSON 支持、getter/setter
ES6（ES2015）	2015	`let`/`const`、类（class）、箭头函数、模板字符串、模块
ES7–ES13	2016–2022	`async/await`、`BigInt`、可选链（`?.`）、空值合并（`??`）
ES14（ES2023）	2023	`Array.prototype.toSorted()`、`findLast()`、静态初始化块

注意：旧版浏览器（如 IE）不支持 ES6+ 语法，生产环境需使用 Babel 等工具进行转译。

重点总结

JavaScript 是一种动态类型、单线程、解释型语言，广泛用于 Web 开发。
可同时用于前端（浏览器） 和 后端（Node.js），实现全栈开发。
支持命令式与声明式两种编程范式。
拥有活跃生态，但需注意其安全性与类型系统的局限。
现代开发应优先使用 ES6+ 语法，并借助工具兼容旧环境。

思考题

为什么说 JavaScript 是“单线程”语言？它是如何实现异步操作而不阻塞界面的？
在实际项目中，你会如何规避 JavaScript 的弱类型带来的潜在 bug？
对比 var、let 和 const，它们的作用域和提升行为有何不同？