正文

JavaScript中数值传递的真相：了解基本类型与引用类型的区别及深浅拷贝技巧

/0 浏览量
0905

在JavaScript中，理解变量是如何传递的对于编写高效和可靠的代码至关重要。本文将深入探讨JavaScript中的基本类型和引用类型，并介绍深浅拷贝的概念和技巧。

基本类型与引用类型的区别

JavaScript中的数据类型可以分为两大类：基本类型和引用类型。

基本类型

基本类型是按值传递的，这意味着当你复制一个基本类型的变量时，你实际上是在复制该变量的值。以下是JavaScript中的基本类型：

  • Number
  • String
  • Boolean
  • null
  • undefined
  • Symbol

举个例子：

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

在这个例子中，a 和 b 都是基本类型 Number 的实例。当我们将 a 的值赋给 b 时，b 会得到一个独立的值，因此改变 b 的值不会影响到 a。

引用类型

引用类型是按引用传递的，这意味着当你复制一个引用类型的变量时，你实际上是在复制指向该对象的引用。以下是JavaScript中的引用类型：

  • Object
  • Array
  • Function

举个例子：

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

在这个例子中，obj1 和 obj2 都是引用类型 Object 的实例。将 obj1 赋值给 obj2 实际上是在复制一个引用，因此修改 obj2 的 value 属性也会影响 obj1。

深浅拷贝技巧

由于JavaScript中的引用类型是按引用传递的，直接复制一个对象会导致两个变量指向同一个对象。如果你想要创建一个对象的独立副本，就需要进行深拷贝或浅拷贝。

浅拷贝

浅拷贝会创建一个新的对象，并复制原始对象的基本类型属性。如果原始对象包含引用类型属性，则新对象和原始对象会共享这些属性。

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

在这个例子中，shallowCopy 是 obj1 的浅拷贝。修改 shallowCopy 的 nested 属性也会影响 obj1。

深拷贝

深拷贝会创建一个新对象，并递归复制原始对象的所有属性，包括基本类型和引用类型属性。这样，原始对象和新对象之间就不会有任何关联。

let obj1 = { value: 10, nested: { value: 20 } };
let deepCopy = JSON.parse(JSON.stringify(obj1));
deepCopy.nested.value = 30;
console.log(obj1.nested.value); // 输出：20

在这个例子中，deepCopy 是 obj1 的深拷贝。修改 deepCopy 的 nested 属性不会影响 obj1。

总结

理解JavaScript中基本类型和引用类型的区别以及深浅拷贝的技巧对于编写高效和可靠的代码至关重要。通过正确地使用这些概念，你可以避免意外修改对象，并确保你的程序按照预期运行。

-- 展开阅读全文 --