前言

JavaScript 作為一門動態(tài)、弱類型的編程語言，數(shù)據(jù)存儲方式與傳統(tǒng)靜態(tài)語言有很大不同。理解 JS 的數(shù)據(jù)類型、內(nèi)存分配機(jī)制以及數(shù)據(jù)存儲的底層原理非常重要。本文將圍繞“數(shù)據(jù)類型”、“語言類型特性”以及“內(nèi)存空間”三個核心點，帶你系統(tǒng)梳理 JavaScript 的數(shù)據(jù)存儲原理。

JavaScript 的數(shù)據(jù)類型

1. 原始類型（基本類型）

原始類型是最基本的數(shù)據(jù)單元，存儲在棧內(nèi)存中，具有不可變性。包括：

• String：字符串，如 "hello"

• Number：數(shù)字，包括整數(shù)和浮點數(shù)，如 42、3.14

• Boolean：布爾值，true 或 false

• null：表示“無”或“空值”

• undefined：變量聲明但未賦值時的默認(rèn)值

• Symbol：ES6 新增，表示獨一無二的值，常用于對象屬性的唯一標(biāo)識

• BigInt：大整數(shù)類型，用于處理超出最大安全整數(shù)范圍的數(shù)值

特點：

• 占用空間小，存儲在棧內(nèi)存

2. 引用類型（復(fù)雜類型）

引用類型用于存儲復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，存儲在堆內(nèi)存中。包括：

• Object：對象，如 {name: "Hua"}

• Array：數(shù)組，如 [1, 2, 3]

• Function：函數(shù)本質(zhì)上也是對象

• Date：日期對象

特點：

• 占用空間大，存儲在堆內(nèi)存
• 變量存儲的是指向堆內(nèi)存的引用（地址）

JavaScript 的類型特性

1. 靜態(tài)語言與動態(tài)語言

• 靜態(tài)語言：在使用前就需要確定變量的類型，編譯時類型已知。例如 Java、C++

• 動態(tài)語言：在使用時不需要確定變量的類型，運行時根據(jù)賦值的變量類型來確定。例如 JavaScript、Python

JS 是動態(tài)類型語言，變量的類型在運行時根據(jù)賦值自動確定。例如：

let a = 10;      // Number
a = "hello";     // String
a = [1, 2, 3];   // Array

2. 強(qiáng)類型與弱類型

• 強(qiáng)類型語言：不支持隱式類型轉(zhuǎn)換，類型不兼容時會報錯

• 弱類型語言：支持隱式類型轉(zhuǎn)換，類型可以自動轉(zhuǎn)換 JS 支持隱式類型轉(zhuǎn)換。例如：

console.log(1 + "2"); // "12"
console.log("5" - 2); // 3

這種靈活性帶來了便利，但也容易引發(fā)類型相關(guān)的 bug。

內(nèi)存空間與數(shù)據(jù)存儲

1. V8 引擎的內(nèi)存空間劃分

V8 是 Chrome 和 Node.js 使用的 JS 引擎。它在執(zhí)行 JS 代碼時，會劃分出三大內(nèi)存空間：

• 代碼空間：存放代碼文本本身
• ?？臻g：用于存儲原始類型變量、函數(shù)調(diào)用上下文等
• 堆空間：用于存儲引用類型數(shù)據(jù)（對象、數(shù)組、函數(shù)等

棧空間（Stack）

• 結(jié)構(gòu)簡單，先進(jìn)后出
• 存儲原始類型和執(zhí)行上下文
• 訪問速度快，空間有限

堆空間（Heap）

• 結(jié)構(gòu)復(fù)雜，無序
• 存儲引用類型數(shù)據(jù)
• 空間大，訪問速度相對慢

2. 原始類型與引用類型的存儲方式

• 原始類型：變量直接存儲值本身，分配在?？臻g
• 引用類型：變量存儲的是指向堆內(nèi)存的地址（引用），實際數(shù)據(jù)存儲在堆空間

示例

let a = 10;           // 原始類型，a 存儲 10
let b = {num: 1};       // 引用類型，b 存儲堆中對象的地址
let c = b;            // c 也指向同一個對象
c.num = 2;
console.log(b.num);     // 2

實戰(zhàn)面試題

看完以上內(nèi)容，相信你已經(jīng)對數(shù)據(jù)類型與其存儲方式已經(jīng)很了解了，讓我們來做一道經(jīng)典的面試題

function foo(person) {
    person.age = 20
    person = {
        name: '小鐘'
    }
    return person
}
let p1 = {
    name: '小華',
    age: 18
}
let p2 = foo(p1)

console.log(p1);
console.log(p2);

運行結(jié)果

輸出為：

{ name: '小華', age: 20 }
{ name: '小鐘' }

過程詳解

• let p1 = { name: '小華', age: 18 }
  這里，p1 是一個引用類型變量，存儲的是對象在堆內(nèi)存中的地址。

• let p2 = foo(p1)
  調(diào)用 foo 時，person 形參獲得了 p1 的地址副本。此時 person 和 p1 都指向同一個對象。

• person.age = 20
  通過 person 修改對象的 age 屬性，由于 person 和 p1 指向同一個對象，所以 p1.age 也變成了 20。

• person = { name: '小鐘' }
  這一步，person 被賦值為一個新對象的地址。此時 person 指向新對象，而 p1 依然指向原來的對象。兩者不再關(guān)聯(lián)。

• return person
  返回的是新對象 { name: '小鐘' }，賦值給 p2。

總結(jié)

JavaScript 的數(shù)據(jù)存儲機(jī)制是理解 JS 語言的基礎(chǔ)。原始類型和引用類型的本質(zhì)區(qū)別在于存儲位置和可變性。原始類型存儲在?？臻g，體積小、不可變；引用類型存儲在堆空間，體積大、可變。JS 作為動態(tài)、弱類型語言，變量類型可以隨時變化，類型之間可以自動轉(zhuǎn)換。

到此這篇關(guān)于JavaScript數(shù)據(jù)類型及其存儲方式的文章就介紹到這了,更多相關(guān)JS數(shù)據(jù)類型及存儲方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論