本文介绍了 JavaScript 的发展历程、核心语法及生态系统。文章阐述了 JS 从浏览器脚本扩展到服务端（Node.js）、移动端和桌面端的能力。详细讲解了变量声明（var/let/const）、数据类型、类型转换、运算符、函数定义等基础语法。深入探讨了作用域、闭包、原型链等高级特性，以及异步编程的演进（回调/Promise/async-await）。最后对比了主流前端框架（React/Vue/Angular）及工程化工具，并梳理了 ECMAScript 版本历史。适合初学者入门及开发者系统复习。
如果说 HTML 是网页的骨架，CSS 是网页的皮肤，那 JavaScript 就是网页的肌肉和灵魂。它让网页从'静态说明书'变成了'动态应用'。如今，它早已跳出浏览器的围墙，成为全球最流行、应用最广泛的编程语言之一。
下面，我将从六个维度为你层层拆解这个'世界语言'的方方面面。
1995 年，网景公司的工程师Brendan Eich只用了 10 天就创造了这门语言。它最初的名字叫'LiveScript'，但当时 Java 语言正火，为了蹭热度，网景公司决定改名'JavaScript'。实际上，JavaScript 和 Java 除了语法都借鉴了 C 语言外，几乎没有任何关系。 这个'美丽的误会'一直延续到今天。
JavaScript 是一种轻量级的、解释型的、面向对象的脚本语言。它最初被设计用来为网页添加交互性，如今已成为 Web 开发的核心技术，与 HTML、CSS 并称'前端三剑客'。
在浏览器里，JavaScript 几乎无所不能：
但它的脚步远不止于此：
它不能做什么？ 出于安全考虑，浏览器中的 JavaScript 不能直接读写硬盘上的文件、不能直接访问操作系统功能、也不能跨域访问任意网站的数据（除非对方允许）。
在深入具体内容前，我们先通过一张Mermaid 总结框图，从宏观上把握 JavaScript 的知识体系。这张图涵盖了从基础到进阶、从浏览器到服务端的全貌。
在 JavaScript 中声明变量有三种方式，它们各有特点：
| 关键字 | 作用域 | 变量提升 | 重复声明 | 可否修改 | 适用场景 |
|---|---|---|---|---|---|
var | 函数级 | 是（初始值 undefined） | 允许 | 可修改 | 老代码兼容，现代开发已不推荐 |
let | 块级 | 有暂时性死区 | 不允许 | 可修改 | 需要重新赋值的变量 |
const | 块级 | 有暂时性死区 | 不允许 | 不可重新赋值（但对象属性可改） | 常量、引用类型默认选择 |
一个经典示例：
if (true) {
var x = 1; // var 不认花括号，x 会'逃'出 if
let y = 2; // let 只在这个花括号内有效
const z = 3; // const 也只在这个花括号内有效
}
console.log(x); // 输出 1
console.log(y); // 报错：y is not defined
console.log(z); // 报错：z is not defined
const 的特殊性：它禁止的是'重新赋值'，而不是'内容修改'。所以 const obj = {a:1}; obj.a = 2; 是允许的，但 obj = {}; 会报错。
JavaScript 的数据类型可以分为两大类：
原始类型（存储值本身）：
0.1 + 0.2 === 0.3的结果是 false（实际是 0.30000000000000004）true或 false9007199254740991n引用类型（存储地址）：
JavaScript 是动态类型语言，变量类型由赋值决定，且可以在运行时改变。
隐式转换（自动发生，有时会出人意料）：
"3" + 4 + 5 // 结果是 "345"（字符串拼接）
3 + 4 + "5" // 结果是 "75"（先算 3+4=7，再转字符串拼"5"）
"37" - 7 // 结果是 30（减号会触发数字转换）
显式转换（开发者主动调用）：
Number("123") // 123
String(123) // "123"
Boolean(0) // false
parseInt("010", 10) // 10（一定要指定进制，否则可能被当成八进制）
比较运算符的黄金法则：永远用 ===（严格相等）而不是 ==（相等）。
==会进行类型转换，导致一些匪夷所思的结果：
1 == true // true（因为 true 被转成 1）
"1" == true // true（字符串"1"转成数字 1，true 转成 1）
"" == false // true
null == undefined // true
而 ===会在比较前先检查类型，类型不同直接返回 false，更加安全可预测。
在 JavaScript 中，函数是第一等公民，这意味着它们可以像任何其他变量一样被传递、赋值给变量、作为参数传入、作为返回值返回。
三种定义方式：
// 函数声明（会提升）
function add(a, b) {
return a + b;
}
// 函数表达式（不会提升）
const subtract = function(a, b) {
return a - b;
};
// 箭头函数（ES6 新增，简洁，没有自己的 this）
const multiply = (a, b) => a * b;
作用域决定了变量在哪里能被访问到。JavaScript 有三种作用域：
var 声明的变量，只在函数内部可访问let和 const 声明的变量，只在 {} 内部可访问闭包是 JavaScript 最强大的特性之一。简单说，闭包就是一个函数'记住'了它被定义时的作用域，即使它后来在其他地方执行。
function createCounter() {
let count = 0; // 这个变量被'封闭'在返回的函数中
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
// count 变量没有被销毁，它被闭包'记住'了
应用场景：创建私有变量、模块化、函数柯里化、防抖节流等。
JavaScript 的继承机制与众不同——它采用原型链实现继承，而不是传统的'类继承'（ES6 的 class 只是语法糖，底层仍是原型）。
核心概念：
prototype 属性__proto__ 属性（指向其构造函数的 prototype）__proto__ 一路向上找，直到找到或到达 nullfunction Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};
const alice = new Person('Alice');
alice.sayHello(); // 对象自身没有 sayHello，但它的原型上有
这就是为什么所有数组都可以用 push()、map()——它们都定义在 Array.prototype 上。
JavaScript 是单线程的，但它通过事件循环实现了非阻塞的异步操作。
异步方案演进：
setTimeout(() => {
console.log('3 秒后执行');
}, 3000);
问题：多个异步操作嵌套时，会形成'回调地狱'。
fetch('/api/user')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
用链式调用解决嵌套问题。
async function getUserData() {
try {
const response = await fetch('/api/user');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
让异步代码'看起来像'同步代码，最直观易读。
事件循环机制：JS 维护一个'调用栈'和两个'任务队列'——微任务队列（Promise.then 等）和宏任务队列（setTimeout、事件回调等）。每执行完一个宏任务，都会清空所有微任务，然后再取下一个宏任务。这保证了任务的执行顺序。
在浏览器中，JavaScript 可以访问一系列 API：
document.getElementById()、document.createElement() 等，用于增删改查网页元素window、navigator、location、history 等，控制浏览器本身addEventListener，响应用户的点击、输入等操作cookie、localStorage、sessionStorage、IndexedDB，在浏览器端保存数据fetch、XMLHttpRequest，与服务器通信2009 年，Ryan Dahl 将 Chrome 的 V8 引擎搬到了服务器上，创造了Node.js。从此，JavaScript 可以写后端了。
Node.js 的核心能力：
fs 模块读写文件http 模块创建 Web 服务器process 对象获取环境信息如果你不喜欢 JavaScript 的某些特性，可以用其他语言写代码，然后'编译'成 JavaScript 运行：
JavaScript 的标准化版本叫ECMAScript（简称 ES）。2009 年的 ES5 奠定了现代 JS 的基础，2015 年的 ES6 是一次里程碑式的大更新。此后，ECMA 组织改为每年发布一个新版本，持续为语言注入活力。
重要版本与特性：
| 版本 | 年份 | 关键特性 |
|---|---|---|
| ES3 | 1999 | 正则表达式、异常处理 |
| ES5 | 2009 | 严格模式、JSON、数组方法（forEach/map 等） |
| ES6/ES2015 | 2015 | let/const、箭头函数、类、模块、Promise、解构赋值、模板字符串 |
| ES2016 | 2016 | Array.includes、幂运算符 |
| ES2017 | 2017 | async/await、Object.entries/values |
| ES2018 | 2018 | Rest/Spread 属性、Promise.finally |
| ES2019 | 2019 | Array.flat、Object.fromEntries |
| ES2020 | 2020 | 可选链 (?.)、空值合并 (??)、BigInt、globalThis |
| ES2021 | 2021 | String.replaceAll、逻辑赋值运算符 |
| ES2022 | 2022 | 类私有字段、顶层 await |
| ES2024 | 2024 | 管道运算符、Temporal API（全新日期时间处理） |
JavaScript 从 1995 年诞生至今，已经走过了三十多个年头。它从一个'被误解的小儿科目'，成长为全球使用最广、生态最丰富、应用场景最多元的编程语言之一。
它的魅力在于：
如果你刚接触编程，JavaScript 会是一个很好的起点；如果你是老手，它依然值得你持续探索。正如一位开发者所说：'任何能用 JavaScript 写出来的应用，最终都会用 JavaScript 写出来'——这句话虽然夸张，但也侧面印证了这门语言的强大与包容。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online