正文

揭秘JS参数传递的奥秘：深拷贝与浅拷贝大不同，轻松掌握变量传递技巧

/0 浏览量
0826

在JavaScript中，参数传递是一个基础但常常让人困惑的概念。特别是在处理对象和数组时，理解深拷贝与浅拷贝的区别至关重要。本文将深入探讨JavaScript中的参数传递机制，并详细解释深拷贝与浅拷贝的差异，帮助你轻松掌握变量传递的技巧。

参数传递：浅拷贝与深拷贝的区别

在JavaScript中，当你将一个变量传递给函数时，实际上传递的是对该变量的引用。这意味着，如果函数内部修改了该变量，原始变量的值也会受到影响。这种传递方式被称为浅拷贝（Shallow Copy）。

浅拷贝

浅拷贝只复制对象或数组的表面属性，而不复制其内部嵌套的对象或数组。简单来说，浅拷贝会复制父级对象，但不会复制子级对象。

let obj = { a: 1, b: { c: 2 } };
let copy = obj;

copy.b.c = 3;

console.log(obj.b.c); // 输出：3

在上面的例子中，copy 是 obj 的浅拷贝。当我们修改 copy.b.c 时，由于 b 是同一个对象，obj.b.c 的值也会改变。

深拷贝

深拷贝则不同，它会复制对象或数组的所有层级，包括嵌套的对象和数组。这意味着，即使修改了深拷贝后的对象，原始对象也不会受到影响。

let obj = { a: 1, b: { c: 2 } };
let copy = JSON.parse(JSON.stringify(obj));

copy.b.c = 3;

console.log(obj.b.c); // 输出：2

在这个例子中，我们使用 JSON.parse(JSON.stringify(obj)) 来创建 obj 的深拷贝。由于深拷贝复制了所有层级，所以修改 copy.b.c 不会影响 obj.b.c。

如何实现深拷贝

虽然 JSON.parse(JSON.stringify(obj)) 可以实现深拷贝，但它有局限性，例如不能复制函数、循环引用等。因此，我们需要手动实现深拷贝。

以下是一个简单的深拷贝函数示例：

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

  let copy;

  if (Array.isArray(obj)) {
    copy = [];
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepCopy(obj[i]);
    }
  } else {
    copy = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepCopy(obj[key]);
      }
    }
  }

  return copy;
}

这个函数会递归地复制对象的所有属性，包括嵌套的对象和数组。

总结

理解JavaScript中的浅拷贝与深拷贝对于编写高效、可靠的代码至关重要。通过本文的介绍，你应该已经掌握了参数传递的奥秘，并能够根据需要选择合适的拷贝方式。在处理复杂的数据结构时，深拷贝可以帮助你避免潜在的问题，确保数据的独立性。

-- 展开阅读全文 --