JavaScript - 浅拷贝和深拷贝

原创

愤怒的小鸟

修改于 2021-01-21 02:53:18

63500

代码可运行

文章被收录于专栏：web shareweb share

运行总次数：0

代码可运行

浅拷贝

先拷贝，只是简单的对象引用，并没有真正的从内存中开辟一块空间。

深拷贝

将一个对象从内存中完整的拷贝一份出来，开辟一个新的区域空间来存放对象。

js中的浅拷贝

基本数据类型：名字和值都存在栈内存中
引用数据类型，名字存在栈内存中，值存在堆内存中。

实现的几种方式

Object.assign()
如果数组元素包含对象, 数组的方法concat为浅拷贝
扩展运算符

js中的深拷贝

使用JSON.parse序列化，这样子可以解决大多数情况，但不能处理函数。
使用递归，来动手写一个深拷贝。

实现的几种方式

元素全部为基础类型的数组, 数组的方法concat为深拷贝
数组的方法map、filter、slice
let a = {}, let b = JSON.pase(JSON.stringify(a));

注: JSON.stringify()转换对象过程中，undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined。

递归拷贝方法实现

// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
    // 定义一个变量
    let result;
    // 如果当前需要深拷贝的是一个对象的话
    if (typeof target === 'object') {
    // 如果是一个数组的话
        if (Array.isArray(target)) {
            result = []; // 将result赋值为一个数组，并且执行遍历
            for (let i in target) {
                // 递归克隆数组中的每一项
                result.push(deepClone(target[i]))
            }
         // 判断如果当前的值是null的话；直接赋值为null
        } else if(target===null) {
            result = null;
         // 判断如果当前的值是一个RegExp对象的话，直接赋值    
        } else if(target.constructor===RegExp){
            result = target;
        }else {
         // 否则是普通对象，直接for in循环，递归赋值对象的所有值
            result = {};
            for (let i in target) {
                result[i] = deepClone(target[i]);
            }
        }
     // 如果不是对象的话，就是基本数据类型，那么直接赋值
    } else {
        result = target;
    }
     // 返回最终结果
    return result;
}