JavaScript基本数据类型与引用数据类型的区别是什么

在 JavaScript 中，数据类型分为基本数据类型（Primitive Types）与引用数据类型（Reference Types）。两者的根本区别在于内存存储机制、变量赋值时的传递行为、比较判断规则以及数据本身的可变性：基本类型直接按值保存在栈内存中，赋值时复制数据本身，比较时核对数值；引用类型则把具体实体保存在堆内存中，栈内存只存放指向该堆地址的指针，赋值与传递的是内存引用，比较时对比内存地址是否一致。

两类数据类型的划分与基本特征

JavaScript 规范中共定义了 8 种数据类型，其中 7 种为基本数据类型，1 种为引用数据类型：

• 基本数据类型（7种）：Number、String、Boolean、Undefined、Null、Symbol（ES6新增，表示独一无二的值）以及 BigInt（ES2020新增，用于大整数运算）。
• 引用数据类型（1种）：Object。在实际开发中，普通对象（Object）、数组（Array）、函数（Function）、日期（Date）、正则表达式（RegExp）、Map 与 Set 等，底层原型链均继承自 Object。

内存存储位置：栈内存与堆内存

理解两种数据类型差异的基石在于计算机内存模型。运行 JavaScript 代码时，JavaScript 引擎会将内存划分为不同的管理区域，其中最核心的是栈内存（Stack）与堆内存（Heap）。

栈内存是一块连续且结构严谨的线性内存空间，由系统自动分配和释放。栈内存具备极高的读写速度，适合存储大小固定、占用空间小的数据。基本数据类型的值大小固定，因此它们直接存放在栈内存中的变量访问单元内。

堆内存是一块结构相对松散、动态分配的内存区域。由于引用类型的结构通常高度动态（例如对象可以随时增加属性、数组可以无限扩容），它们无法预先确定固定的空间大小。因此，JavaScript 引擎在堆内存中为对象实体分配存储空间，并在栈内存中分配一个固定大小的指针（即该对象在堆中的物理内存地址），供变量在代码运行时寻址访问。

图1展示了基本类型与引用类型的存储差异：基本类型直接存放于栈内，引用类型在栈中保存指针并指向堆中的实体。

变量赋值与传递：值拷贝 vs 引用地址共享

存储机制的差异直接决定了变量在被赋值、传递时的不同表现：

1. 基本类型的赋值是“值复制”

当把一个基本类型的变量赋给另一个变量时，系统会在栈内存中开辟一个全新的存储格，并将原变量的值完整复制一份存入。这两个变量从此相互独立，对其中一个变量的修改绝不会波及另一个。

let scoreA = 90;
let scoreB = scoreA; // scoreB 获取了数值 90 的全新独立副本

scoreB = 100;
console.log(scoreA); // 输出: 90 (scoreA 未受到任何影响)
console.log(scoreB); // 输出: 100

2. 引用类型的赋值是“引用地址复制”

当把一个引用类型的变量赋值给另一个变量时，复制的不是堆内存中的实际对象，而是栈内存中保存的引用指针地址。赋值完成后，两个变量内部的指针指向堆内存中的同一个实体对象。因此，通过任何一个变量修改对象的属性，都会直接影响到另一个变量。

let player1 = { name: "Tom", level: 1 };
let player2 = player1; // 仅复制了指针地址，两者指向堆内存中同一对象

player2.level = 5;
console.log(player1.level); // 输出: 5 (player1 中的属性同步改变)
console.log(player2.level); // 输出: 5

图2通过两个典型场景演示了值复制的独立性与引用共享带来的连带修改效应。

3. 函数参数传递机制

在 JavaScript 中，所有函数的形参传递本质上都是按值传递（Pass by Value）。对于基本类型，传递的是数值本身；对于引用类型，传递的则是栈内存中“引用地址的副本”。

这意味着：如果在函数内部修改了对象属性，外部原对象的对应属性同样会被改变；但如果在函数内部让形参指向一个全新的对象（直接重新赋值），则外部原对象的引用绝不会改变：

function updateData(item, val) {
  val = 999;           // 基本类型形参修改：外部变量不受影响
  item.tag = "active"; // 引用类型属性修改：外部原对象同步变更
  item = { tag: "new" };// 形参被重新绑定全新对象：外部原对象引用不受影响
}

let num = 10;
let conf = { tag: "default" };

updateData(conf, num);
console.log(num);       // 输出: 10
console.log(conf.tag);  // 输出: "active" (非 "new")

比较机制与可变性规则

1. 全等比较（===）的标准差异

基本数据类型在执行全等比较 === 时，比较的是两者的类型与字面值是否相同。只要值相等且类型一致，结果即为 true。

而引用类型在执行 === 比较时，并不检查对象内部的属性键值对是否一样，而是严格比对两个变量在栈内存中所保存的堆内存物理地址。哪怕两个对象的所有属性完全一样，只要它们是由不同语句分别创建的独立堆对象，结果就必然是 false：

// 基本类型比较：按值比对
console.log("hello" === "hello"); // true
console.log(100 === 100);         // true

// 引用类型比较：按物理引用地址比对
let objA = { id: 1 };
let objB = { id: 1 };
let objC = objA;

console.log(objA === objB); // false (即使内容相同，堆内存地址不同)
console.log(objA === objC); // true  (指向同一物理内存地址)

2. 数据可变性（Mutability）

基本数据类型的值是完全不可变的（Immutable）。无论调用多少次字符串、数值或布尔值的方法，都不能改变原始值本身，只能返回一个全新的基本类型值。例如调用 str.toUpperCase() 后，原始变量 str 依然保持原样。

引用数据类型则是天生可变（Mutable）的。我们可以随时向对象添加新属性、修改现有属性值或删除键名，数组也可以调用 push、splice 等原生方法就地修改内容，而无需重新分配内存地址。

对象复制策略：深拷贝与浅拷贝的决策与实现

正因为引用类型的赋值只会复制指针，在实际开发中复制复杂对象时，必须根据数据结构的嵌套深度选择适当的拷贝策略。

图3展示了面对引用数据类型时，如何根据对象结构深度和特殊类型选择正确的复制路径。

1. 浅拷贝操作与局限

浅拷贝仅复制对象的第一层属性。如果第一层属性全为基本类型，复制后完全独立；但若属性包含引用类型（如嵌套子对象或数组），浅拷贝复制的依然是子对象的内存地址：

const original = { title: "Doc", tags: ["tech", "web"] };
// 使用展开运算符进行浅拷贝
const shallowCopy = { ...original };

shallowCopy.title = "New Doc";      // 仅修改第一层：original.title 不受影响
shallowCopy.tags.push("js");       // 修改第二层嵌套数组：
console.log(original.tags);         // 输出: ["tech", "web", "js"] (受到联动篡改！)

2. 深拷贝的现代解决方案

深拷贝会遍历并递归复制目标对象的所有嵌套层级，在堆内存中为每个对象开辟全新的存储空间，从而达到彻底的物理隔离。

• 现代标准方案 structuredClone()：所有主流现代浏览器与 Node.js 17+ 均已内置 structuredClone() 全局函数。它支持解决循环引用问题，并能完美克隆 Date、RegExp、Map、Set、ArrayBuffer 等内置对象。
• 传统 JSON 序列化技巧：JSON.parse(JSON.stringify(obj)) 适合处理纯粹的键值对数据，但会丢失 undefined、Symbol、函数，且会将 Date 转为字符串、无法处理循环引用。

全景对比与选型总结

为了在实际编码、重构和性能排查中快速做出判断，下表对基本数据类型与引用数据类型的各关键维度进行了完整梳理与对照：

图4汇总提炼了两类数据类型在内存模型、赋值逻辑、比较机制与可变性上的全景差异。