JavaScript专题之深浅拷贝的实现及应用

前端

2023-12-15 12:56:48

JavaScript是一种强大的编程语言，在前端开发中广泛使用。随着应用程序的日益复杂，数据结构也变得更加多样化和层次化。为了有效地处理和管理这些数据，理解和运用深浅拷贝和浅拷贝的概念至关重要。

深浅拷贝与浅拷贝的区别

深拷贝和浅拷贝都是创建对象副本的技术，但它们在实现方式和行为上存在根本差异。

深拷贝：深拷贝会递归地复制对象及其所有属性，包括嵌套的对象。这意味着创建的副本与原始对象完全独立，更改副本不会影响原始对象，反之亦然。
浅拷贝：浅拷贝只复制对象本身的属性，不会递归地复制嵌套的对象。这意味着创建的副本与原始对象共享对嵌套对象的引用。更改副本中的嵌套对象将影响原始对象，反之亦然。

深浅拷贝的实现方法

深拷贝

实现深拷贝有几种方法，最常见的方法是使用JSON.parse()和JSON.stringify()函数。这两个函数可以将对象转换为JSON字符串，然后将JSON字符串解析回对象，从而实现深拷贝。

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

const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.address.street = '456 Elm Street';

console.log(obj1.address.street); // 123 Main Street
console.log(obj2.address.street); // 456 Elm Street

浅拷贝

实现浅拷贝有几种方法，最常见的方法是使用Object.assign()函数。该函数可以将一个或多个对象的属性复制到目标对象中。

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

const obj2 = Object.assign({}, obj1);

obj2.address.street = '456 Elm Street';

console.log(obj1.address.street); // 456 Elm Street
console.log(obj2.address.street); // 456 Elm Street