正文

掌握JavaScript数值传递：详解基本类型和对象拷贝技巧

/0 浏览量
1010

JavaScript 作为一种广泛使用的编程语言，其变量的传递方式是理解其行为的关键。在 JavaScript 中，变量的传递分为基本类型传递和对象传递两种。本文将详细探讨这两种传递方式，并介绍几种对象拷贝的技巧。

基本类型传递

JavaScript 中有 7 种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol 和 BigInt。当这些类型的数据被传递时，实际上传递的是值的副本。

例子

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

在上面的例子中，变量 a 和 b 都是指向同一个值 5 的引用。当修改 a 的值时，b 的值并不会改变，因为它们分别存储了 5 的副本。

对象传递

在 JavaScript 中，对象（包括数组、函数等）是通过引用传递的。这意味着当你将一个对象赋值给另一个变量时，你实际上是在复制指向该对象的引用，而不是复制对象本身。

例子

let obj1 = { value: 10 };
let obj2 = obj1;
console.log(obj1, obj2); // 输出：{ value: 10 } { value: 10 }
obj1.value = 20;
console.log(obj1, obj2); // 输出：{ value: 20 } { value: 20 }

在上述例子中，变量 obj1 和 obj2 都指向同一个对象。修改 obj1 的属性也会影响到 obj2，因为它们共享同一个对象。

对象拷贝技巧

由于对象是通过引用传递的，直接复制对象会导致两个变量共享同一个对象。以下是一些常用的对象拷贝技巧：

1. 浅拷贝

浅拷贝会复制对象及其包含的基本类型值，但不会复制对象中的嵌套对象。

let obj1 = { value: 10, nested: { detail: 20 } };
let obj2 = { ...obj1 }; // 使用展开运算符进行浅拷贝

2. 深拷贝

深拷贝会复制对象及其所有嵌套对象，确保两个对象完全独立。

let obj1 = { value: 10, nested: { detail: 20 } };
let obj2 = JSON.parse(JSON.stringify(obj1)); // 使用 JSON 方法进行深拷贝

3. 手动深拷贝

对于复杂的对象，可以使用递归来手动实现深拷贝。

function deepCopy(obj) {
  let copy;

  // Handle the 3 simple types, and null or undefined
  if (null == obj || "object" != typeof obj) return obj;

  // Handle Date
  if (obj instanceof Date) {
    copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }

  // Handle Array
  if (obj instanceof Array) {
    copy = [];
    for (let i = 0, len = obj.length; i < len; i++) {
      copy[i] = deepCopy(obj[i]);
    }
    return copy;
  }

  // Handle Object
  if (obj instanceof Object) {
    copy = {};
    for (let attr in obj) {
      if (obj.hasOwnProperty(attr)) copy[attr] = deepCopy(obj[attr]);
    }
    return copy;
  }

  throw new Error("Unable to copy obj! Its type isn't supported.");
}

总结

理解 JavaScript 中的数值传递和对象拷贝对于编写高效、可靠的代码至关重要。通过本文的介绍，你应该能够更好地掌握这些概念，并在实际开发中灵活运用。

-- 展开阅读全文 --