引言

在 JavaScript 編程中，數(shù)據(jù)類型是構(gòu)建所有程序的基礎(chǔ)，理解它的分類、判斷方式以及不同類型的核心差異，是寫出健壯代碼、避免隱蔽 Bug 的關(guān)鍵。本文將全面拆解 JS 數(shù)據(jù)類型的相關(guān)知識(shí)點(diǎn)，從分類到實(shí)操，幫你徹底吃透這一基礎(chǔ)核心內(nèi)容。

一、JS 數(shù)據(jù)類型的分類與具體種類

JavaScript 數(shù)據(jù)類型分為兩大類別，共計(jì)8 種具體類型，這一劃分是基于數(shù)據(jù)的存儲(chǔ)方式、訪問(wèn)機(jī)制的本質(zhì)差異而來(lái)。

1. 兩大核心分類

• 基礎(chǔ)數(shù)據(jù)類型（也叫原始數(shù)據(jù)類型、值類型）
• 引用數(shù)據(jù)類型（也叫復(fù)雜數(shù)據(jù)類型、引用類型）

2. 8 種具體數(shù)據(jù)類型

（1）基礎(chǔ)數(shù)據(jù)類型（7 種）

基礎(chǔ)數(shù)據(jù)類型是不可再分的最小數(shù)據(jù)單元，直接存儲(chǔ)具體的值，具體包括：

1. String：字符串類型，用于表示文本數(shù)據(jù)，如 "Hello JS"、'123'（單引號(hào)、雙引號(hào)、反引號(hào)均可包裹）；
2. Number：數(shù)值類型，包含整數(shù)、浮點(diǎn)數(shù)以及特殊數(shù)值，如 100、3.14、NaN（非數(shù)字）、Infinity（無(wú)窮大）；
3. Boolean：布爾類型，僅包含兩個(gè)值，用于表示真假狀態(tài)：true（真）和 false（假）；
4. Undefined：未定義類型，只有一個(gè)值 undefined，表示變量已聲明但未賦值，或訪問(wèn)不存在的對(duì)象屬性時(shí)的返回值；
5. Null：空值類型，只有一個(gè)值 null，表示一個(gè)有意指向的 “空對(duì)象”，通常用于手動(dòng)清空變量的引用；
6. Symbol：ES6 新增的唯一標(biāo)識(shí)類型，每個(gè) Symbol 實(shí)例都是獨(dú)一無(wú)二的，用于解決對(duì)象屬性名沖突問(wèn)題，如 Symbol('name')；
7. BigInt：ES10 新增的大整數(shù)類型，用于表示超出 Number 類型安全范圍（±2^53-1）的整數(shù)，后綴以 n 標(biāo)識(shí)，如 9007199254740993n。

（2）引用數(shù)據(jù)類型（1 種，核心為 Object）

引用數(shù)據(jù)類型本質(zhì)是對(duì)數(shù)據(jù)的引用，存儲(chǔ)的是內(nèi)存地址，而非具體值，核心類型為 Object，常見(jiàn)的衍生 / 內(nèi)置類型都屬于 Object 的子類：

• 普通對(duì)象：{ name: "張三", age: 20 }；
• 數(shù)組：[1, 2, 3, "JS"]（本質(zhì)是有序索引的對(duì)象）；
• 函數(shù)：function fn() { return 1; }（本質(zhì)是可執(zhí)行的對(duì)象）；
• 正則表達(dá)式：/^\d+$/；
• 日期對(duì)象：new Date() 等。

二、判斷 JavaScript 數(shù)據(jù)類型的常用方法

在開(kāi)發(fā)中，我們經(jīng)常需要判斷變量的數(shù)據(jù)類型，不同方法有各自的適用場(chǎng)景和局限性，以下是 4 種核心判斷方式：

1. typeof 操作符：基礎(chǔ)數(shù)據(jù)類型首選

typeof 是最常用的基礎(chǔ)判斷方法，返回一個(gè)表示數(shù)據(jù)類型的字符串，語(yǔ)法：typeof 變量/值。

適用場(chǎng)景與示例

// 基礎(chǔ)數(shù)據(jù)類型判斷（除 null 外均準(zhǔn)確）
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"
 
// 引用數(shù)據(jù)類型判斷（局限性：均返回 "object" 或 "function"）
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof /abc/); // "object"
console.log(typeof function(){}); // "function"（唯一能準(zhǔn)確區(qū)分的引用類型）
 
// 經(jīng)典坑：null 會(huì)返回 "object"
console.log(typeof null); // "object"

局限性

• 無(wú)法區(qū)分 null 和普通對(duì)象，對(duì) null 會(huì)誤判為 "object"；
• 無(wú)法區(qū)分?jǐn)?shù)組、正則、普通對(duì)象等引用類型，均返回 "object"。

2. instanceof 操作符：判斷引用類型的具體子類

instanceof 基于原型鏈判斷，用于檢測(cè)一個(gè)對(duì)象是否是某個(gè)構(gòu)造函數(shù)的實(shí)例，語(yǔ)法：變量 instanceof 構(gòu)造函數(shù)。

適用場(chǎng)景與示例

// 區(qū)分不同引用類型
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
 
// 基礎(chǔ)數(shù)據(jù)類型返回 false（除了通過(guò)構(gòu)造函數(shù)創(chuàng)建的包裝對(duì)象）
console.log(123 instanceof Number); // false
console.log(new Number(123) instanceof Number); // true

局限性

• 無(wú)法判斷基礎(chǔ)數(shù)據(jù)類型（包裝對(duì)象除外，不推薦使用包裝對(duì)象）；
• 原型鏈可被修改，可能導(dǎo)致判斷結(jié)果失真；
• 無(wú)法跨窗口 / 跨框架判斷（不同窗口的構(gòu)造函數(shù)原型不同）。

3. Object.prototype.toString.call ()：萬(wàn)能判斷方法

這是最準(zhǔn)確、最通用的判斷方式，通過(guò)調(diào)用 Object 原型上的 toString 方法，返回格式為 "[object 類型名]" 的字符串，能精準(zhǔn)區(qū)分所有數(shù)據(jù)類型。

適用場(chǎng)景與示例

// 基礎(chǔ)數(shù)據(jù)類型全準(zhǔn)確
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]"
 
// 引用數(shù)據(jù)類型全準(zhǔn)確
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]"

優(yōu)勢(shì)與注意事項(xiàng)

• 優(yōu)勢(shì)：萬(wàn)能適配，無(wú)盲區(qū)，判斷結(jié)果最精準(zhǔn)；
• 注意：必須通過(guò) call() 改變 this 指向，直接調(diào)用 toString() 會(huì)根據(jù)對(duì)象自身的方法返回結(jié)果（如數(shù)組調(diào)用 toString() 會(huì)返回?cái)?shù)組元素拼接字符串）。

4. 特殊判斷方法：針對(duì)特定類型

除了上述通用方法，還有一些針對(duì)性的判斷方式：

• Array.isArray()：專門判斷數(shù)組，比 instanceof 更可靠（可跨窗口判斷），如 Array.isArray([1,2,3]) // true；
• Number.isNaN()：專門判斷是否為真正的 NaN（彌補(bǔ) typeof NaN 返回 "number" 的缺陷），如 Number.isNaN(NaN) // true，Number.isNaN("123") // false。

三、基礎(chǔ)數(shù)據(jù)類型與引用數(shù)據(jù)類型的核心區(qū)別

基礎(chǔ)數(shù)據(jù)類型和引用數(shù)據(jù)類型的差異，本質(zhì)源于存儲(chǔ)位置、訪問(wèn)方式的不同，具體體現(xiàn)在以下 5 個(gè)核心方面：

1. 存儲(chǔ)位置不同

• 基礎(chǔ)數(shù)據(jù)類型：存儲(chǔ)在 ** 棧內(nèi)存（Stack）** 中，棧內(nèi)存具有容量小、訪問(wèn)速度快、先進(jìn)后出的特點(diǎn)，直接存儲(chǔ)變量的具體值；
• 引用數(shù)據(jù)類型：實(shí)際的數(shù)據(jù)內(nèi)容存儲(chǔ)在堆內(nèi)存（Heap）中（堆內(nèi)存容量大、訪問(wèn)速度較慢），而變量本身在棧內(nèi)存中存儲(chǔ)的是指向堆內(nèi)存中數(shù)據(jù)的內(nèi)存地址（引用地址），相當(dāng)于給堆內(nèi)存中的數(shù)據(jù)貼了一個(gè) “地址標(biāo)簽”。

2. 賦值 / 傳參機(jī)制不同

基礎(chǔ)數(shù)據(jù)類型：采用值傳遞，賦值或傳參時(shí)，會(huì)創(chuàng)建一份值的副本，新舊變量 / 函數(shù)參數(shù)與原變量互不影響，修改其中一個(gè)不會(huì)改變另一個(gè)；

let a = 10;
let b = a; // 復(fù)制 a 的值，b 是獨(dú)立副本
b = 20;
console.log(a); // 10（a 不受 b 修改影響）

引用數(shù)據(jù)類型：采用引用傳遞，賦值或傳參時(shí)，復(fù)制的是棧內(nèi)存中的引用地址，新舊變量 / 函數(shù)參數(shù)指向堆內(nèi)存中的同一個(gè)數(shù)據(jù)，修改其中一個(gè)會(huì)影響所有指向該地址的變量；

let obj1 = { name: "張三" };
let obj2 = obj1; // 復(fù)制引用地址，obj1 和 obj2 指向同一個(gè)堆內(nèi)存對(duì)象
obj2.name = "李四";
console.log(obj1.name); // "李四"（obj1 受 obj2 修改影響）

3. 可變性不同

基礎(chǔ)數(shù)據(jù)類型：不可變（Immutable），基礎(chǔ)類型的值一旦創(chuàng)建就無(wú)法修改，我們平時(shí)對(duì)字符串、數(shù)字的 “修改”，本質(zhì)是創(chuàng)建了一個(gè)新的值，而非修改原有的值；

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

引用數(shù)據(jù)類型：可變（Mutable），我們可以直接修改堆內(nèi)存中的數(shù)據(jù)內(nèi)容（如添加 / 刪除對(duì)象屬性、修改數(shù)組元素），無(wú)需創(chuàng)建新的對(duì)象；

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

4. 比較方式不同

基礎(chǔ)數(shù)據(jù)類型：值比較，判斷兩個(gè)基礎(chǔ)類型變量是否相等，只需比較它們的具體值是否一致（== 會(huì)進(jìn)行類型轉(zhuǎn)換，=== 嚴(yán)格比較值和類型）；

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

引用數(shù)據(jù)類型：引用地址比較，判斷兩個(gè)引用類型變量是否相等，比較的是它們是否指向堆內(nèi)存中的同一個(gè)地址，而非數(shù)據(jù)內(nèi)容是否一致；

let obj1 = { name: "張三" };
let obj2 = { name: "張三" };
console.log(obj1 === obj2); // false（兩個(gè)對(duì)象在堆內(nèi)存中是不同的地址，內(nèi)容相同但引用不同）

5. 訪問(wèn)速度與內(nèi)存管理不同

• 基礎(chǔ)數(shù)據(jù)類型：存儲(chǔ)在棧內(nèi)存中，訪問(wèn)速度更快，內(nèi)存由 JavaScript 引擎自動(dòng)分配和釋放，無(wú)需手動(dòng)管理；
• 引用數(shù)據(jù)類型：存儲(chǔ)在堆內(nèi)存中，訪問(wèn)時(shí)需要先通過(guò)棧內(nèi)存的引用地址找到堆內(nèi)存中的數(shù)據(jù)，訪問(wèn)速度相對(duì)較慢，內(nèi)存回收由垃圾回收機(jī)制（GC）負(fù)責(zé)，當(dāng)一個(gè)對(duì)象沒(méi)有任何引用指向它時(shí)，垃圾回收機(jī)制會(huì)在合適時(shí)機(jī)釋放其占用的堆內(nèi)存。

總結(jié)

1. JS 數(shù)據(jù)類型分為基礎(chǔ)數(shù)據(jù)類型（7 種）和引用數(shù)據(jù)類型（1 種，核心 Object），共計(jì) 8 種；
2. 基礎(chǔ)類型包含 String、Number、Boolean、Undefined、Null、Symbol、BigInt，引用類型包含所有 Object 衍生類型（數(shù)組、函數(shù)等）；
3. 類型判斷有 4 種核心方式：typeof（基礎(chǔ)類型首選）、instanceof（引用類型子類判斷）、Object.prototype.toString.call ()（萬(wàn)能精準(zhǔn)）、特殊方法（Array.isArray () 等）；
4. 兩類數(shù)據(jù)的核心差異集中在：存儲(chǔ)位置（棧 / 堆）、賦值傳參（值傳遞 / 引用傳遞）、可變性（不可變 / 可變）、比較方式（值比較 / 地址比較）、內(nèi)存管理（自動(dòng)釋放 / 垃圾回收）。

掌握這些知識(shí)點(diǎn)，能幫助我們?cè)陂_(kāi)發(fā)中更合理地使用變量、避免數(shù)據(jù)修改沖突、精準(zhǔn)判斷數(shù)據(jù)類型，為編寫高效、可靠的 JavaScript 代碼打下堅(jiān)實(shí)基礎(chǔ)。

以上就是一文詳解JavaScript數(shù)據(jù)類型的分類、種類、判斷方法及深淺差異的詳細(xì)內(nèi)容，更多關(guān)于JavaScript數(shù)據(jù)類型詳解的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論