美文网首页
JS的深克隆和浅克隆(深拷贝、浅拷贝)

JS的深克隆和浅克隆(深拷贝、浅拷贝)

作者: Cherry丶小丸子 | 来源:发表于2019-08-29 17:52 被阅读0次

什么是深克隆?

我们都知道,JavaScript有六种基本的数据类型。
五种基本的数据类型:string,number,undefined,boolean,null
(在内存中表现为一个值,保存在栈内存中)

一种复杂的数据类型(引用类型):object 【function,array,object】
(在内存中表现为一个指针,保存在堆内存中)

第一种:递归完成深克隆

// 定义一个深拷贝函数  接收目标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;
}

第二种:利用JSON

var arr = [1,2,3,4];
var newarr = JSON.parse(JSON.stringify(arr));

第三种:扩展运算符

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [...arr1];

总结:
浅拷贝(shallow copy):只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存;
深拷贝(deep copy):复制并创建一个一摸一样的对象,不共享内存,修改新对象,旧对象保持不变;实现深拷贝主要有2种方法
(1)递归
(2)JSON.stringify结合JSON.parse (不可以拷贝 undefined , function, RegExp 等等类型的)
(3)扩展运算符(对多层嵌套数据无效)

相关文章

  • Java基础 - 深拷贝和浅拷贝

    Java 的深拷贝和浅拷贝 什么是深拷贝、浅拷贝 (深克隆、浅克隆)? 在 Java 中,数据类型分为 基本数据类...

  • 深克隆--何时是尽头?

    As we all know Java有两种拷贝,浅拷贝和深拷贝,高大上的叫法也叫浅克隆和深克隆。 深克隆有时会碰...

  • JS的深克隆和浅克隆(深拷贝、浅拷贝)

    什么是深克隆? 我们都知道,JavaScript有六种基本的数据类型。五种基本的数据类型:string,numbe...

  • 五、面试总结(五)

    对象 拷贝(clone) 如何实现对象克隆 深拷贝和浅拷贝区别 深拷贝和浅拷贝如何实现激活机制 写clone()方...

  • java克隆

    java克隆 java克隆分为浅克隆和深克隆,概念如下: 浅拷贝(浅克隆)克隆出来的对象的所有变量都含有与原来的对...

  • Java-原型模式

    模式定义: 使用场景: 以克隆层次来区分,可有深克隆和浅克隆两种。 浅克隆实现如下: 运行结果: 浅克隆就是拷贝一...

  • 浅拷贝和深拷贝

    直接赋值 浅拷贝(影子克隆) 深拷贝 应用场景 参考文章

  • 克隆深拷贝浅拷贝

    浅克隆 深拷贝 第二种深拷贝(不推荐使用) this的笔试题

  • 深克隆浅拷贝

    一:直接赋值 改变其中任意一个对象,另一个也会跟着改变 二:浅拷贝(注意里面有个dog对象)实现Cloneable...

  • JS中的深拷贝与浅拷贝

    知乎:js中的深拷贝和浅拷贝? 掘金: js 深拷贝 vs 浅拷贝 前言 首先深拷贝与浅拷贝只针对 Object,...

网友评论

      本文标题:JS的深克隆和浅克隆(深拷贝、浅拷贝)

      本文链接:https://www.haomeiwen.com/subject/czfwectx.html