解密JavaScript值：从原始类型到引用类型，核心概念一网打尽！169

好的，作为一名中文知识博主，我将以“JavaScript值”为核心，为您撰写一篇深入浅出的文章。

大家好，我是你们的知识博主！今天我们要聊一个JavaScript（JS）的“地基”——值（Value）。你可能觉得这听起来有点抽象，但请相信我，理解JS中值的本质、类型及其行为方式，是你从JS“会用”走向“精通”的关键一步。它不仅关乎你如何声明变量、进行运算，更影响着你对数据存储、内存管理、函数传参以及对象操作的深层理解。废话不多说，让我们一起深入JavaScript值的世界，一探究竟！

JavaScript值的两大阵营：原始值与对象值

在JavaScript中，所有的值都可以被划分为两大基本类别：原始值（Primitive Values）和对象值（Object Values）。这两个阵营从存储方式、可变性到比较行为都有着天壤之别，掌握它们是理解JS一切行为的起点。

第一阵营：原始值（Primitives）——不可变的基石

原始值是JS中最基本的数据类型，它们是不可变的（Immutable），一旦创建就不能被修改。当你对一个原始值进行“修改”操作时，实际上是创建了一个新的原始值。原始值直接存储在栈内存中。目前，JS共有七种原始值：

1. Undefined（未定义）

当一个变量被声明但未赋值时，它的默认值就是`undefined`。它表示“缺少值”或“未初始化”。
let a;
(a); // undefined

2. Null（空）

`null`是一个表示“空值”或“无对象”的特殊原始值。它通常用来表示一个变量应该指向一个对象，但目前没有指向任何对象的情况。它是一个有意为之的空，与`undefined`的“未定义”有所区别。
let b = null;
(b); // null
值得注意的是，`typeof null`的结果是"object"，这是一个历史遗留的Bug，但它本身确实是原始值。

3. Boolean（布尔值）

只有两个值：`true`（真）和`false`（假）。它们是逻辑运算的基础。
let c = true;
let d = false;

4. Number（数字）

JS的`Number`类型采用IEEE 754标准的双精度浮点数表示。这意味着它既可以表示整数，也可以表示浮点数。它还有一些特殊值：

`NaN`（Not-a-Number）：表示一个无效或无法表示的数字。`NaN`的奇特之处在于，它不等于自身（`NaN !== NaN`）。
`Infinity`和`-Infinity`：表示正无穷和负无穷。

let e = 10; // 整数
let f = 3.14; // 浮点数
let g = 0 / 0; // NaN
let h = 1 / 0; // Infinity

5. String（字符串）

由零个或多个16位Unicode字符组成的不可变序列。字符串的“修改”操作（如拼接）实际上是创建了一个新的字符串。
let i = "Hello";
let j = 'World';
let k = `JS值`; // 模板字符串

6. Symbol（符号） - ES6新增

`Symbol`是一种独一无二的原始值，主要用于创建对象的唯一属性键，避免属性名冲突。
const sym1 = Symbol('id');
const sym2 = Symbol('id');
(sym1 === sym2); // false

7. BigInt（大整数） - ES2020新增

`BigInt`可以表示任意精度的整数，解决了`Number`类型在表示大整数时的精度限制（最大安全整数为`2^53 - 1`）。
const bigNum = 9007199254740991n; // 在数字后面加'n'表示BigInt
const anotherBigNum = BigInt("900719925474099123456789");

第二阵营：对象值（Objects）——可变的集合

除了七种原始值之外，JavaScript中所有的其他值都是对象（Objects）。对象是属性的集合，每个属性都包含一个键（字符串或Symbol）和一个值（可以是原始值，也可以是另一个对象）。对象是可变的（Mutable），这意味着你可以在创建后修改它们的属性。对象存储在堆内存中，而栈内存中存储的是指向这些对象的引用地址。

常见的对象类型：

普通对象（Plain Object）：由花括号`{}`创建，是最基本的键值对集合。
let person = { name: "Alice", age: 30 };

数组（Array）：特殊的对象，以数字作为属性键，并提供许多方便的数组操作方法。
let colors = ["red", "green", "blue"];

函数（Function）：可调用的对象，它们是JS中的“一等公民”。
function greet(name) { return `Hello, ${name}!`; }

日期（Date）：处理日期和时间的对象。
let today = new Date();

正则表达式（RegExp）：用于模式匹配的对象。
let emailRegex = /^\S+@\S+\.\S+$/;

还有Map、Set、Promise、Error等等，不一而足。

原始值与对象值的核心区别：深度剖析

理解了原始值和对象值的基本概念后，我们来深入探讨它们在实际编程中最关键的区别，这往往是导致Bug和困惑的根源。

1. 存储方式：直接存储 vs. 引用存储

原始值：直接将值存储在变量访问的内存位置（通常是栈内存）。当你声明`let x = 10;`时，变量`x`直接包含数值10。
对象值：将值（即对象本身）存储在堆内存中。变量存储的不是对象本身，而是指向堆内存中该对象的一个引用地址（Reference Address）。当你声明`let obj = { a: 1 };`时，`obj`变量存储的是指向`{ a: 1 }`这个对象在堆内存中地址的指针。

2. 可变性：不可变 vs. 可变

原始值：不可变。当你对一个字符串进行操作（例如`str = str + " world";`）时，JS不会修改原始字符串，而是创建一个新的字符串，并将新的字符串赋值给变量`str`。
let name = "Alice";
name = "Bob"; // 实际上是创建了一个新的字符串"Bob"，而不是修改"Alice"

对象值：可变。你可以修改对象的属性而无需创建新对象。
let person = { name: "Alice" };
= "Bob"; // 修改了person对象内部的name属性
(person); // { name: "Bob" }

3. 比较方式：值比较 vs. 引用比较

这是理解JS值行为的重中之重！

原始值：当使用严格相等运算符`===`进行比较时，如果它们的值和类型都相同，则认为它们相等。这是值比较（Value Comparison）。
let num1 = 10;
let num2 = 10;
(num1 === num2); // true (值相同)
let str1 = "hello";
let str2 = "hello";
(str1 === str2); // true (值相同)

对象值：当使用`===`进行比较时，只有当它们指向内存中的同一个对象（即引用地址相同）时，才被认为是相等的。这是引用比较（Reference Comparison）。即使两个对象拥有完全相同的属性和值，如果它们是不同的对象实例，比较结果依然是`false`。
let obj1 = { a: 1 };
let obj2 = { a: 1 };
(obj1 === obj2); // false (指向不同的内存地址)
let obj3 = obj1;
(obj1 === obj3); // true (obj3和obj1指向同一个内存地址)

4. 函数传参：按值传递 vs. 按引用传递的“假象”

JavaScript中的函数参数传递一直是一个容易混淆的地方。严格来说，JS总是按值传递（Pass by Value）。

当向函数传递原始值时，参数会接收到原始值的一个副本。函数内部对参数的修改不会影响外部的原始值。
function changePrimitive(val) {
val = 20; // 修改的是val的副本
}
let myNum = 10;
changePrimitive(myNum);
(myNum); // 10 (未改变)

当向函数传递对象值时，参数接收到的是对象引用地址的一个副本。这意味着函数内部的参数和外部的变量指向的是同一个对象。因此，函数内部对该对象属性的修改会反映到外部。但这依然是按值传递——传递的是引用地址这个“值”的副本。
function changeObject(obj) {
= 35; // 修改了原始对象
obj = { name: "Peter" }; // 这里是给obj参数赋了一个新对象，不影响外部myPerson
}
let myPerson = { name: "Alice", age: 30 };
changeObject(myPerson);
(); // 35 (被修改了)
(); // "Alice" (因为函数内obj被重新赋值，不再指向myPerson)
这第二个例子清楚地展示了，函数内部对参数引用本身的重新赋值，并不会影响外部变量指向的对象。只有通过参数引用去修改它所指向的对象的属性时，才会影响外部。这就是“按值传递引用”的精髓。

总结与展望

恭喜你，现在你对JavaScript中的值有了更深刻的理解！
我们回顾一下：

原始值：七种类型（Undefined, Null, Boolean, Number, String, Symbol, BigInt），不可变，栈存储，值比较，按值传递。
对象值：所有非原始值，可变，堆存储（变量存储引用地址），引用比较，按值传递（引用地址的副本）。

这些基础概念是构建复杂JS应用和解决日常Bug的基石。当你遇到意想不到的数据变更、比较结果或函数行为时，请第一时间思考：我正在操作的是原始值还是对象值？它们是按值比较还是按引用比较？参数传递时发生了什么？

理解值的本质，你将能更好地掌握变量声明、数据结构、深浅拷贝（对象赋值仅仅是引用赋值，要深拷贝需要额外操作）、以及各种框架和库中数据的处理方式。它能帮助你写出更健壮、更可预测的JavaScript代码。

希望这篇文章能帮助你解开JavaScript值的神秘面纱，让你的JS学习之路更加顺畅！如果你有任何疑问或想讨论更多细节，欢迎在评论区留言。下次再见！

2025-11-10

---

上一篇：零基础JavaScript学习：新手快速掌握前端核心技能

下一篇：JavaScript代码动态执行与外部命令调用深度解析：从浏览器到的安全实践