关于 JS 中栈与堆，以及几种深拷贝实现剖析

2023-09-21 23:05:32

在计算机科学中，栈（stack）和堆（heap）是两种基本的数据结构，用于在内存中存储和管理数据。它们在 JavaScript 中也发挥着重要作用，理解堆和栈有助于我们更好地理解 JavaScript 的内存管理机制和数据存储方式。此外，深拷贝作为一种高级的拷贝技术，在处理复杂数据结构时尤为重要，它能帮助我们实现对象或数据的完整复制，避免浅拷贝带来的引用复制问题。

栈与堆概述

栈

栈是一种后进先出（Last In First Out, LIFO）的数据结构，它遵循“先进后出”的原则。数据总是被压入栈顶，从栈顶弹出。栈在内存中是连续分配的，这意味着栈中的元素总是存储在相邻的内存地址中。栈常用于函数调用、递归调用和局部变量的存储。

堆

堆是一种特殊的树形数据结构，它满足堆的性质：每个节点的值都大于或等于其子节点的值。堆在内存中是非连续分配的，这意味着堆中的元素可以存储在内存的任何位置。堆常用于优先级队列、排序和内存管理。

堆与栈的比较

特征	栈	堆
数据结构	后进先出（LIFO）	树形
内存分配	连续	非连续
访问方式	先进后出	根节点到叶节点
常用场景	函数调用、递归调用、局部变量存储	优先级队列、排序、内存管理

深拷贝与浅拷贝

在 JavaScript 中，对象是引用类型，这意味着变量存储的是对象的引用，而不是对象本身。当我们对对象进行赋值时，实际上是将对象的引用复制给另一个变量。这种浅拷贝（shallow copy）只复制对象的引用，而不复制对象本身的数据。

深拷贝（deep copy）则不同，它会复制对象本身的数据，生成一个新的对象，与原对象完全独立。这确保了即使原对象发生变化，深拷贝的对象也不会受到影响。深拷贝通常用于复杂数据结构的拷贝，如包含对象数组或嵌套对象的复杂对象。

实现深拷贝的方法

使用 JSON.parse() 和 JSON.stringify()

JSON.parse() 和 JSON.stringify() 是 JavaScript 内置的 JSON 数据转换函数。我们可以利用它们来实现深拷贝。首先，使用 JSON.stringify() 将对象转换为 JSON 字符串，然后使用 JSON.parse() 将 JSON 字符串解析为一个新的对象。这种方法简单易用，但对于包含循环引用或函数的对象可能会出现问题。

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

const deepCopy = JSON.parse(JSON.stringify(originalObject));

console.log(deepCopy); // { name: 'John Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA', zip: '12345' } }

使用递归

对于包含循环引用或函数的对象，我们可以使用递归来实现深拷贝。递归是一种函数调用自身的方法，它可以用来遍历对象的所有属性，并为每个属性创建深拷贝。

const deepCopy = (obj) => {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
};

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  },
  friends: [
    { name: 'Jane Doe', age: 25 },
    { name: 'John Smith', age: 35 }
  ]
};

const deepCopy = deepCopy(originalObject);

console.log(deepCopy);

使用第三方库

JavaScript 中有很多第三方库可以帮助我们实现深拷贝，如 lodash、ramda 和 deep-copy。这些库提供了更高效、更健壮的深拷贝实现，并且可以处理循环引用和函数对象。

const deepCopy = require('lodash.clonedeep');

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  },
  friends: [
    { name: 'Jane Doe', age: 25 },
    { name: 'John Smith', age: 35 }
  ]
};

const deepCopy = deepCopy(originalObject);

console.log(deepCopy);