揭开JavaScript赋值、深拷贝与浅拷贝的面纱：理解数据引用与内存管理

2024-02-19 06:21:48

理解JavaScript中的赋值

在JavaScript中，赋值操作符“=”用于将一个值赋给变量。需要注意的是，赋值操作符仅仅是复制了值本身，而不是复制变量所引用的对象。

let a = 10; // 赋值一个基本数据类型的值
let b = a; // 赋值基本数据类型变量a的值

在这个例子中，变量b被赋予了变量a的值，即10。但是，变量b并没有指向变量a所引用的内存地址，而是创建了自己的内存地址。因此，对变量b的任何修改都不会影响变量a的值。

深拷贝与浅拷贝

在JavaScript中，深拷贝和浅拷贝都是复制对象的方式，但它们之间存在着本质区别。

浅拷贝

浅拷贝只复制对象的第一层属性值，而不会复制嵌套对象或数组。这意味着，如果嵌套对象或数组发生改变，浅拷贝的对象也会受到影响。

let obj1 = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    city: "New York",
  },
};

let obj2 = Object.assign({}, obj1); // 浅拷贝obj1

在这个例子中，变量obj2是一个浅拷贝的obj1。这意味着obj2拥有与obj1相同的第一层属性值，即name和age。但是，obj2对address属性的引用与obj1相同。因此，如果修改obj2的address属性，也会影响obj1的address属性。

深拷贝

深拷贝会复制对象的所有属性值，包括嵌套对象和数组。这意味着，即使嵌套对象或数组发生改变，深拷贝的对象也不会受到影响。

let obj1 = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    city: "New York",
  },
};

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

在这个例子中，变量obj2是一个深拷贝的obj1。这意味着obj2拥有与obj1相同的所有属性值，包括address属性。但是，obj2对address属性的引用与obj1不同。因此，修改obj2的address属性不会影响obj1的address属性。