深浅拷贝方法总结与练习

2024-01-08 10:43:54

深拷贝与浅拷贝简介

在JavaScript中，变量可以存储基本类型值(如字符串、数字、布尔值等)或引用类型值(如对象、数组等)。当我们对一个引用类型值进行赋值时，实际上是将该值的引用复制给了另一个变量。这意味着两个变量指向同一个内存地址，对一个变量的修改也会影响到另一个变量。

这种赋值方式称为浅拷贝。浅拷贝只复制了引用类型值的引用，并没有复制其内部的属性和值。因此，如果我们修改了浅拷贝的变量，也会影响到原始变量。

为了避免这种影响，我们需要进行深拷贝。深拷贝不仅复制了引用类型值的引用，还复制了其内部的属性和值。这样，即使我们修改了深拷贝的变量，也不会影响到原始变量。

浅拷贝常见方法

在JavaScript中，有几种常见的浅拷贝方法：

数组的slice()、concat()、Array.from()方法
对象的Object.assign()方法
...(拓展运算符)
递归方式实现

数组的slice()、concat()、Array.from()方法

这三个方法都可以实现数组的浅拷贝。slice()方法返回一个新数组，该新数组包含原数组中从指定位置到结束位置(不包括结束位置)的所有元素。concat()方法将一个或多个数组合并成一个新数组。Array.from()方法将一个类数组对象(如字符串、NodeList等)转换为数组。

对象的Object.assign()方法

Object.assign()方法可以实现对象的浅拷贝。该方法将一个或多个源对象的属性复制到目标对象。

...(拓展运算符)

拓展运算符(...)可以实现对象的浅拷贝。该运算符将一个对象展开成一个参数列表。

递归方式实现

也可以使用递归的方式实现对象的深拷贝。这种方法通过递归复制对象的所有属性和值，包括嵌套的对象和数组。

练习题

使用浅拷贝的方法实现以下代码的功能：

const originalArray = [1, 2, 3, 4, 5];
const shallowCopyArray = originalArray.slice();

shallowCopyArray[0] = 10;

console.log(originalArray); // 输出：[1, 2, 3, 4, 5]
console.log(shallowCopyArray); // 输出：[10, 2, 3, 4, 5]

使用深拷贝的方法实现以下代码的功能：

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA'
  }
};
const deepCopyObject = JSON.parse(JSON.stringify(originalObject));

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

console.log(originalObject); // 输出：{ name: 'John Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA' } }
console.log(deepCopyObject); // 输出：{ name: 'Jane Doe', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA' } }