JavaScript 简单类型与复杂类型-堆和栈

深入理解JavaScript中的简单类型（基本数据类型）与复杂类型（引用数据类型）如何在内存中存储对于编写高效、无误的代码至关重要。本文将探讨这两种类型的差异，以及它们在内存中的存储机制——栈（Stack）和堆（Heap），并通过实例说明这些概念的实际应用。

内存基础：栈与堆

栈（Stack）

栈是一种后进先出（LIFO, Last In First Out）的数据结构，通常用于存储函数调用信息和局部变量。由于其结构特性，栈操作非常快速且直接，访问栈顶元素的时间复杂度为O(1)。

特点：
- 存储简单类型值。
- 每个线程拥有独立的栈空间。
- 固定大小，分配速度快。

堆（Heap）

堆是一种动态分配的内存区域，适合于存储大小不固定的对象或需要长期存在的数据。与栈不同，堆上的数据没有特定的顺序，因此访问速度较慢，但灵活性更高。

特点：
- 存储复杂类型值。
- 所有线程共享同一块堆内存。
- 动态分配，管理相对复杂。

简单类型 vs 复杂类型

简单类型（基本数据类型）

JavaScript中有六种简单类型：

undefined
null
boolean
number
string
symbol (ES6新增)

特性

按值传递：当简单类型的值被作为参数传递给函数时，实际上是创建了一个副本，这意味着对参数的任何修改都不会影响原始值。
```
function changeValue(x) {
    x = 10;
}
let a = 5;
changeValue(a);
console.log(a); // 输出: 5
```
存储位置：简单类型的值直接存储在栈中，占用固定大小的空间。

复杂类型（引用数据类型）

常见的复杂类型包括：

Object
Array
Function
其他自定义对象

特性

按引用传递：当一个复杂类型的值被作为参数传递给函数时，传递的是该对象的引用地址而不是副本。因此，在函数内部对该对象所做的任何更改都会反映到原始对象上。
```
function modifyObject(obj) {
    obj.name = "World";
}
let obj = { name: "Hello" };
modifyObject(obj);
console.log(obj.name); // 输出: World
```
存储位置：复杂类型的值实际存储在堆中，而栈中仅保存指向堆内存的引用地址。

实际案例分析

案例1：简单类型的比较

let num1 = 10;
let num2 = 10;
console.log(num1 === num2); // 输出: true

let str1 = "test";
let str2 = "test";
console.log(str1 === str2); // 输出: true

在这个例子中，num1和num2、str1和str2都存储了相同的值，并且因为它们是简单类型，所以比较结果为true。

案例2：复杂类型的比较

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
console.log(arr1 === arr2); // 输出: false

let obj1 = { key: "value" };
let obj2 = obj1;
console.log(obj1 === obj2); // 输出: true

这里，arr1和arr2虽然包含相同的内容，但由于它们是不同的对象实例，各自的引用地址不同，所以比较结果为false。而obj1和obj2指向同一个对象，因此比较结果为true。

案例3：浅拷贝 vs 深拷贝

由于复杂类型是按引用传递的，直接赋值不会复制对象本身，而是复制了引用。为了创建对象的独立副本，我们需要使用深拷贝技术。

let original = { a: 1, b: { c: 2 } };
let shallowCopy = Object.assign({}, original);
let deepCopy = JSON.parse(JSON.stringify(original));

original.b.c = 3;

console.log(shallowCopy.b.c); // 输出: 3
console.log(deepCopy.b.c);    // 输出: 2

此示例展示了浅拷贝（shallowCopy）只复制了顶层属性的引用，而深拷贝（deepCopy）则完全复制了整个对象树。

总结

感谢您的阅读！如果你有任何问题或想分享自己的经验，请在评论区留言交流！