JavaScript对象浅拷贝和深拷贝

男娘i 2022-12-26 04:43 171阅读 0赞

### JavaScript对象浅拷贝和深拷贝 ###

*  1. 基本概念
 *  2. 浅拷贝
 *  3. 深拷贝
 *   *  3.1 深拷贝JSON方法
     *  3.2 深拷贝手写递归方法
 *  4. 第三方库的浅拷贝和深拷贝
 *   *  4.1 jquery
     *  4.2 lodash
 *  5. 其他补充
 *   *  5.1 Object.assign是浅拷贝还是深拷贝

# 1. 基本概念 #

对象是引用类型，在声明引用类型的时候，对象是存储在堆内存中的，而js不能直接操作内存，所以引用类型的变量实际上是一个指针，指针指向存储在堆内存中的对象，例：

const obj = { }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70]

# 2. 浅拷贝 #

const obj1 = { 
    	name: '小明'
    }
    const obj2 = obj1
    obj1.name = '小红'
    console.log(obj1.name) // 小红
    console.log(obj2.name) // 小红

**浅拷贝实际上拷贝的只是对象的引用，他们的指针指向是堆内存中同一个对象**，当修改obj1中name的值为小红时，因为obj2也指向的这个对象，所以obj2中name的值也为小红。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70 1]

# 3. 深拷贝 #

浅拷贝因为指针都指向堆内存中的同一个对象，所以修改对象的值所有指向这个对象的变量都会改变，有时候我们并不想所有都改变，所以就要用到深拷贝，深拷贝是将对象在内存中完全的拷贝一份出来，让变量指针都指向不同的对象，这样修改其中一个对象的值就不会影响其他对象，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70 2]

## 3.1 深拷贝JSON方法 ##

深拷贝最简单的方法是使用JSON.parse和JSON.stringify，如下：

const obj1 = { 
    	name: '小明'
    }
    const obj2 = JSON.parse(JSON.stringify(obj1))
    obj1.name = '小红'
    console.log(obj1.name) // 小红
    console.log(obj2.name) // 小明

可以看到改变obj1的name之后obj2的name并没有受到影响，**但是这个方法有个问题，当对象中有值为function、undefined、symbol，不会被拷贝**，如：

const obj1 = { 
    	name: '小明',
    	show() { },
    	age: undefined,
    }
    const obj2 = JSON.parse(JSON.stringify(obj1))
    console.log(obj1) // {name: "小明", age: undefined, show: ƒ}
    console.log(obj2) // {name: "小红"}
    obj1.show() // true
    obj2.show() // obj2.show is not a function

## 3.2 深拷贝手写递归方法 ##

这个方法挺好，缺点是如果对象嵌套过深会有一定的性能消耗。

# 4. 第三方库的浅拷贝和深拷贝 #

推荐直接用第三方库，省事~

## 4.1 jquery ##

jquery中浅拷贝与深拷贝都是通过extend方法，通过参数区分，如：

$.extend(true, obj1, obj2) // 深拷贝
    $.extend(obj1, obj2) // 浅拷贝

## 4.2 lodash ##

lodash中使用cloneDeep方法进行深拷贝，这也是我用的最多的方法。

import _ from 'lodash'
    const obj1 = {
    	name: '小明',
    	show() {},
    	age: undefined,
    }
    const obj2 = _.cloneDeep(obj1)

# 5. 其他补充 #

## 5.1 Object.assign是浅拷贝还是深拷贝 ##

属于浅拷贝，引用阮一峰ECMAScript 6中的一段话来解释：

> Object.assign()方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70]: /images/20221120/f15f179d09604d4e8088f6f0a9d66088.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70 1]: /images/20221120/f7d7bb06a7cb470e8cb58de8053541f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70 2]: /images/20221120/da4a0a904bc541d4977f60f6915e954e.png