一文详解JavaScript数据类型的分类、种类、判断方法及深浅差异

引言

在 JavaScript 编程中，数据类型是构建所有程序的基础，理解它的分类、判断方式以及不同类型的核心差异，是写出健壮代码、避免隐蔽 Bug 的关键。本文将全面拆解 JS 数据类型的相关知识点，从分类到实操，帮你彻底吃透这一基础核心内容。

一、JS 数据类型的分类与具体种类

JavaScript 数据类型分为两大类别，共计8 种具体类型，这一划分是基于数据的存储方式、访问机制的本质差异而来。

1. 两大核心分类

• 基础数据类型（也叫原始数据类型、值类型）
• 引用数据类型（也叫复杂数据类型、引用类型）

2. 8 种具体数据类型

（1）基础数据类型（7 种）

基础数据类型是不可再分的最小数据单元，直接存储具体的值，具体包括：

1. String：字符串类型，用于表示文本数据，如 "Hello JS"、'123'（单引号、双引号、反引号均可包裹）；
2. Number：数值类型，包含整数、浮点数以及特殊数值，如 100、3.14、NaN（非数字）、Infinity（无穷大）；
3. Boolean：布尔类型，仅包含两个值，用于表示真假状态：true（真）和 false（假）；
4. Undefined：未定义类型，只有一个值 undefined，表示变量已声明但未赋值，或访问不存在的对象属性时的返回值；
5. Null：空值类型，只有一个值 null，表示一个有意指向的 “空对象”，通常用于手动清空变量的引用；
6. Symbol：ES6 新增的唯一标识类型，每个 Symbol 实例都是独一无二的，用于解决对象属性名冲突问题，如 Symbol('name')；
7. BigInt：ES10 新增的大整数类型，用于表示超出 Number 类型安全范围（±2^53-1）的整数，后缀以 n 标识，如 9007199254740993n。

（2）引用数据类型（1 种，核心为 Object）

引用数据类型本质是对数据的引用，存储的是内存地址，而非具体值，核心类型为 Object，常见的衍生 / 内置类型都属于 Object 的子类：

• 普通对象：{ name: "张三", age: 20 }；
• 数组：[1, 2, 3, "JS"]（本质是有序索引的对象）；
• 函数：function fn() { return 1; }（本质是可执行的对象）；
• 正则表达式：/^\d+$/；
• 日期对象：new Date() 等。

二、判断 JavaScript 数据类型的常用方法

在开发中，我们经常需要判断变量的数据类型，不同方法有各自的适用场景和局限性，以下是 4 种核心判断方式：

1. typeof 操作符：基础数据类型首选

typeof 是最常用的基础判断方法，返回一个表示数据类型的字符串，语法：typeof 变量/值。

适用场景与示例

// 基础数据类型判断（除 null 外均准确）
console.log(typeof "abc"); // "string"
console.log(typeof 123); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof Symbol("id")); // "symbol"
console.log(typeof 123n); // "bigint"
 
// 引用数据类型判断（局限性：均返回 "object" 或 "function"）
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof /abc/); // "object"
console.log(typeof function(){}); // "function"（唯一能准确区分的引用类型）
 
// 经典坑：null 会返回 "object"
console.log(typeof null); // "object"

局限性

• 无法区分 null 和普通对象，对 null 会误判为 "object"；
• 无法区分数组、正则、普通对象等引用类型，均返回 "object"。

2. instanceof 操作符：判断引用类型的具体子类

instanceof 基于原型链判断，用于检测一个对象是否是某个构造函数的实例，语法：变量 instanceof 构造函数。

适用场景与示例

// 区分不同引用类型
const arr = [1, 2, 3];
const obj = { name: "张三" };
const fn = function() {};
const reg = /^\d+$/;
const date = new Date();
 
console.log(arr instanceof Array); // true
console.log(obj instanceof Object); // true
console.log(fn instanceof Function); // true
console.log(reg instanceof RegExp); // true
console.log(date instanceof Date); // true
 
// 基础数据类型返回 false（除了通过构造函数创建的包装对象）
console.log(123 instanceof Number); // false
console.log(new Number(123) instanceof Number); // true

局限性

• 无法判断基础数据类型（包装对象除外，不推荐使用包装对象）；
• 原型链可被修改，可能导致判断结果失真；
• 无法跨窗口 / 跨框架判断（不同窗口的构造函数原型不同）。

3. Object.prototype.toString.call ()：万能判断方法

这是最准确、最通用的判断方式，通过调用 Object 原型上的 toString 方法，返回格式为 "[object 类型名]" 的字符串，能精准区分所有数据类型。

适用场景与示例

// 基础数据类型全准确
console.log(Object.prototype.toString.call("abc")); // "[object String]"
console.log(Object.prototype.toString.call(123)); // "[object Number]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call(Symbol("id"))); // "[object Symbol]"
console.log(Object.prototype.toString.call(123n)); // "[object BigInt]"
 
// 引用数据类型全准确
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call(function(){})); // "[object Function]"
console.log(Object.prototype.toString.call(/abc/)); // "[object RegExp]"
console.log(Object.prototype.toString.call(new Date())); // "[object Date]"

优势与注意事项

• 优势：万能适配，无盲区，判断结果最精准；
• 注意：必须通过 call() 改变 this 指向，直接调用 toString() 会根据对象自身的方法返回结果（如数组调用 toString() 会返回数组元素拼接字符串）。

4. 特殊判断方法：针对特定类型

除了上述通用方法，还有一些针对性的判断方式：

• Array.isArray()：专门判断数组，比 instanceof 更可靠（可跨窗口判断），如 Array.isArray([1,2,3]) // true；
• Number.isNaN()：专门判断是否为真正的 NaN（弥补 typeof NaN 返回 "number" 的缺陷），如 Number.isNaN(NaN) // true，Number.isNaN("123") // false。

三、基础数据类型与引用数据类型的核心区别

基础数据类型和引用数据类型的差异，本质源于存储位置、访问方式的不同，具体体现在以下 5 个核心方面：

1. 存储位置不同

• 基础数据类型：存储在 ** 栈内存（Stack）** 中，栈内存具有容量小、访问速度快、先进后出的特点，直接存储变量的具体值；
• 引用数据类型：实际的数据内容存储在堆内存（Heap）中（堆内存容量大、访问速度较慢），而变量本身在栈内存中存储的是指向堆内存中数据的内存地址（引用地址），相当于给堆内存中的数据贴了一个 “地址标签”。

2. 赋值 / 传参机制不同

基础数据类型：采用值传递，赋值或传参时，会创建一份值的副本，新旧变量 / 函数参数与原变量互不影响，修改其中一个不会改变另一个；

let a = 10;
let b = a; // 复制 a 的值，b 是独立副本
b = 20;
console.log(a); // 10（a 不受 b 修改影响）

引用数据类型：采用引用传递，赋值或传参时，复制的是栈内存中的引用地址，新旧变量 / 函数参数指向堆内存中的同一个数据，修改其中一个会影响所有指向该地址的变量；

let obj1 = { name: "张三" };
let obj2 = obj1; // 复制引用地址，obj1 和 obj2 指向同一个堆内存对象
obj2.name = "李四";
console.log(obj1.name); // "李四"（obj1 受 obj2 修改影响）

3. 可变性不同

基础数据类型：不可变（Immutable），基础类型的值一旦创建就无法修改，我们平时对字符串、数字的 “修改”，本质是创建了一个新的值，而非修改原有的值；

let str = "hello";
str.toUpperCase(); // "HELLO"
console.log(str); // "hello"（原字符串未被修改，返回了新字符串）

引用数据类型：可变（Mutable），我们可以直接修改堆内存中的数据内容（如添加 / 删除对象属性、修改数组元素），无需创建新的对象；

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1,2,3,4]（原数组被直接修改）

4. 比较方式不同

基础数据类型：值比较，判断两个基础类型变量是否相等，只需比较它们的具体值是否一致（== 会进行类型转换，=== 严格比较值和类型）；

console.log(10 === 10); // true
console.log("hello" === "hello"); // true
console.log(10 === "10"); // false（类型不同）

引用数据类型：引用地址比较，判断两个引用类型变量是否相等，比较的是它们是否指向堆内存中的同一个地址，而非数据内容是否一致；

let obj1 = { name: "张三" };
let obj2 = { name: "张三" };
console.log(obj1 === obj2); // false（两个对象在堆内存中是不同的地址，内容相同但引用不同）

5. 访问速度与内存管理不同

• 基础数据类型：存储在栈内存中，访问速度更快，内存由 JavaScript 引擎自动分配和释放，无需手动管理；
• 引用数据类型：存储在堆内存中，访问时需要先通过栈内存的引用地址找到堆内存中的数据，访问速度相对较慢，内存回收由垃圾回收机制（GC）负责，当一个对象没有任何引用指向它时，垃圾回收机制会在合适时机释放其占用的堆内存。

总结

1. JS 数据类型分为基础数据类型（7 种）和引用数据类型（1 种，核心 Object），共计 8 种；
2. 基础类型包含 String、Number、Boolean、Undefined、Null、Symbol、BigInt，引用类型包含所有 Object 衍生类型（数组、函数等）；
3. 类型判断有 4 种核心方式：typeof（基础类型首选）、instanceof（引用类型子类判断）、Object.prototype.toString.call ()（万能精准）、特殊方法（Array.isArray () 等）；
4. 两类数据的核心差异集中在：存储位置（栈 / 堆）、赋值传参（值传递 / 引用传递）、可变性（不可变 / 可变）、比较方式（值比较 / 地址比较）、内存管理（自动释放 / 垃圾回收）。

掌握这些知识点，能帮助我们在开发中更合理地使用变量、避免数据修改冲突、精准判断数据类型，为编写高效、可靠的 JavaScript 代码打下坚实基础。

以上就是一文详解JavaScript数据类型的分类、种类、判断方法及深浅差异的详细内容，更多关于JavaScript数据类型详解的资料请关注脚本之家其它相关文章！