浅谈JS 浅拷贝与深拷贝的实现

最新推荐文章于 2024-03-13 22:16:37 发布

帅沐沐的外星工作室

最新推荐文章于 2024-03-13 22:16:37 发布

阅读量202

点赞数

分类专栏：华山论剑之前端文章标签： JavaScript 深拷贝浅拷贝

本文链接：https://blog.csdn.net/qq_37469957/article/details/81585912

版权

华山论剑之前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

首要声明：什么数据类型才有拷贝一说？毋庸置疑，数组和对象[Array&Object]

浅拷贝：

 * --- 拷贝数据的方法(影响原数据就是浅拷贝)
 *     1.直接复制给变量  //浅拷贝
 *     2.Object.assign()  //对象浅拷贝
 *     3.Array.prototype.concat()  //数组浅拷贝
 *     4.Array.prototype.slice()   //数组浅拷贝

深拷贝：

----方式一：

//无嵌套对象或者数组浅拷贝
function simpleDeepClone(target){
       return JSON.parse(JSON.stringify(target));
}

----方式二：

//嵌套对象或者数组深拷贝
//定义检测数据类型的函数
function checkType(target) {
    return Object.prototype.toString.call(target).slice(8, -1);
}

//实现深度拷贝
function clone(target) {
    //判断拷贝的数据类型
    let result, targetType = checkType(target);
    if (targetType === 'Object') {
        result = {};
    } else if (targetType === 'Array') {
        result = [];
    } else {
        return target;
    }
    //遍历目标数据
    for (let i in target) {
        //获取数据对象的每一个值
        let value = target[i];
        //判断目标结构里面是否存在对象/数组
        if (checkType(value) === 'Object' || checkType(value) === 'Array') {
            //继续遍历
            result[i] = clone(value);
        } else { //获取到的value值是基本的数据类型或者函数
            result[i] = value;
        }
    }
    return result;
}