循序渐进，逐层递进——理解JavaScript中的赋值、浅拷贝、深拷贝

2023-10-28 21:58:38

JavaScript中赋值、浅拷贝和深拷贝的艺术

在编写JavaScript程序时，正确理解和使用赋值、浅拷贝和深拷贝的概念对于创建健壮可靠的代码至关重要。这些操作决定了变量之间如何传递和存储值，影响着程序的执行方式。

赋值：传递值的复制

赋值操作符（=）用于将一个变量的值复制到另一个变量。这本质上是一个简单的值传递，目标变量获得源变量值的副本。例如：

let a = 10;
let b = a;
console.log(b); // 输出：10

在上述代码中，b 获得了 a 的值副本，为 10。如果修改 a 的值，不会影响 b 的值，因为它们是两个独立的变量。

浅拷贝：引用类型的简单复制

引用类型变量（如数组和对象）存储对其他变量的引用，而不是值本身。当对引用类型变量进行赋值时，目标变量获得对源变量的引用。这意味着，修改源变量的值也会影响目标变量的值。例如：

let a = [1, 2, 3];
let b = a;
console.log(b); // 输出： [1, 2, 3]

在这里，b 获得了对 a 数组的引用。如果修改 a 数组中的元素，b 数组也会受到影响。

深拷贝：引用类型的完整复制

深拷贝是指将一个引用类型变量的值完整复制到另一个引用类型变量中，而不仅仅是复制引用。通过深拷贝，即使修改了源变量的值，也不会影响目标变量的值。

在JavaScript中，可以手动实现深拷贝或使用第三方库。这里是一个手动实现的深拷贝函数：

function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    const copy = [];
    for (const item of obj) {
      copy.push(deepCopy(item));
    }
    return copy;
  }

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