深入浅出，剖析js值类型引用类型及深浅拷贝

前端

2024-01-18 17:19:36

JavaScript中的值类型与引用类型

JavaScript中，变量可以存储两种类型的数据：值类型和引用类型。

值类型
值类型存储实际值，每个值类型变量都存储自己的值，它们彼此独立。常见的JavaScript值类型包括：

数字（如：1、3.14、-5）
字符串（如：'hello'、"world"）
布尔值（如：true、false）
undefined
null

引用类型
引用类型存储指向另一个值的指针，而不是实际值。引用类型变量存储的指针指向堆内存中的对象，而这些对象包含实际值。常见的JavaScript引用类型包括：

对象（如：{name: 'John Doe', age: 30}）
数组（如：[1, 2, 3, 4, 5]）
函数（如：function myFunction() { ... }）

深浅拷贝与浅拷贝

当将一个引用类型变量的值赋给另一个引用类型变量时，可以进行深拷贝或浅拷贝。

深拷贝
深拷贝会复制对象及其所有属性的值，创建一个完全独立的新对象。即使原始对象或其属性发生变化，新对象的值也不会受到影响。

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

const obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝

obj2.name = 'Jane Doe';
obj2.address.street = '456 Elm Street';

console.log(obj1); // { name: 'John Doe', age: 30, address: { ... } }
console.log(obj2); // { name: 'Jane Doe', age: 30, address: { ... } }

浅拷贝
浅拷贝只复制对象及其所有属性的引用，而不是实际值。如果原始对象或其属性发生变化，新对象的值也会受到影响。

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

const obj2 = obj1; // 浅拷贝

obj2.name = 'Jane Doe';
obj2.address.street = '456 Elm Street';

console.log(obj1); // { name: 'Jane Doe', age: 30, address: { ... } }
console.log(obj2); // { name: 'Jane Doe', age: 30, address: { ... } }