JS每日一题：深拷贝与浅拷贝的区别？如何实现一个深拷贝

MiracleWong 发布于2019-08-26 13:37 / 2168人阅读

摘要：期深拷贝与浅拷贝的区别如何实现一个深拷贝在回答这个问题前，我们先来回顾一下中两大数据类型基本类型引用类型基本类型基本类型就是值类型存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配引用类型引用类型存放在堆内存中的对象，变量实际保

20190311期

深拷贝与浅拷贝的区别？如何实现一个深拷贝

在回答这个问题前，我们先来回顾一下ＪＳ中两大数据类型

基本类型 Undefined、Null、Boolean、Number、String

引用类型 Object Array

基本类型

基本类型就是值类型, 存放在栈(stack)内存中的简单数据段，数据大小确定，内存空间大小可以分配

引用类型

引用类型, 存放在堆(heap)内存中的对象，变量实际保存的是一个指针，这个指针指向另一个位置

根据上面的分析，我们分别是两处类型做一个copy处理

let obj = {
    name: "每日一题",
    value: "JS"
}

let obj2 = obj
let obj3 = obj.name

console.log(obj2.value) //JS
console.log(obj3) // 每日一题

// 改变obj2,obj3
obj2.value = "CSS"
obj3 = "HTML"

console.log(obj.value) // CSS
console.log(obj.name) // 每日一题

从上面的输出结束来看，我们可以猜测obj,obj2操作的是同一个对象,而obj和obj3是完全独立的, 说到这里就进入了深浅拷贝

浅拷贝

概念: 对于字符串类型，浅拷贝是对值的复制，对于对象来说，浅拷贝是对对象地址的复制, 也就是拷贝的结果是两个对象指向同一个地址

基本概念回过头去看上面的代码我们就能分析出来其都是浅复制

深拷贝

概念: 深拷贝开辟一个新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

如何实现深拷贝

JSON.stringify()

首先安利一个无脑黑科技骚操作
＊缺点: JSON.stringify()无法正确处理函数

let obj = {
    name: "每日一题",
    value: "JS"
}
console.log(JSON.parse(JSON.stringify(obj))) // 深拷贝了一份obj

let obj = {
    name: "每日一题",
    value: "JS",
    fn: function(){}
}
console.log(JSON.parse(JSON.stringify(obj))) // obj.fn 丢失

递归

讲到深copy很多人都会想到extend方法,没错，这玩意deep为true确实能深copy，我们就过来翻一翻他的源码

这边以大家熟悉的jquery为例

// 源码地址 https://github.com/jquery/jquery/blob/5bdc85b82b84e5459462ddad9002f22d1ce74f21/src/core.js#L125

// 只取核心逻辑代码,感兴趣的可以自行去源码地址查看具体实现
// 有英文注释，我就不蹩脚翻译了
// 整体思路就是递归对象，判断类型，处理类型
    for ( ; i < length; i++ ) {

        // Only deal with non-null/undefined values
        if ( ( options = arguments[ i ] ) != null ) {

            // Extend the base object
            for ( name in options ) {
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we"re merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                    ( copyIsArray = Array.isArray( copy ) ) ) ) {
                    src = target[ name ];

                    // Ensure proper type for the source value
                    if ( copyIsArray && !Array.isArray( src ) ) {
                        clone = [];
                    } else if ( !copyIsArray && !jQuery.isPlainObject( src ) ) {
                        clone = {};
                    } else {
                        clone = src;
                    }
                    copyIsArray = false;

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don"t bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

总结

浅拷贝是复制,两个对象指向同一个地址

深拷贝是新开栈,两个对象指向不同的地址

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

云服务器 GPU云服务器深拷贝和浅拷贝深拷贝 javascript深拷贝 java实现文件拷贝

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109181.html

JS 中的深拷贝与浅拷贝

摘要：什么是深拷贝浅拷贝见名知义，无论是深拷贝还是浅拷贝，都是的问题。使用如下以上就是关于中的深拷贝与浅拷贝的知识和如何进行深拷贝的知识了，如果有错或者有其他方式的话，欢迎在下面留言评论啦前言最近在写项目的时候涉及到一些父子组件传递个对象或者数组通信啥的，或者是直接复制添加对象啥的，直接使用赋值的时候总会出错。一查原来是浅拷贝的问题，就从网上找了点资料，汇总到这里来了。 1 什么是深拷贝...

ztyzz 2019-08-23 13:41 评论0 收藏0
JS中的深拷贝与浅拷贝

摘要：深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用，深拷贝在计算机中开辟了一块内存地址用于存放复制的对象，而浅拷贝仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用，深拷贝在计算机中开辟了一块内存地址用于存放复制的对象，而浅拷贝仅仅是指向被...

wuyumin 2019-08-22 16:11 评论0 收藏0
JS中深拷贝与浅拷贝

摘要：地址传递引用类型则是地址传递，将存放在栈内存中的地址赋值给接收的变量。即对象的浅拷贝会对主对象进行拷贝，但不会复制主对象里面的对象。相关知识点 1.javascript变量包含两种不同数据类型的值：基本类型和引用类型。基本类型值指的是简单的数据段，包括es6里面新增的一共是有6种，具体如下：number、string、boolean、null、undefined、symbol。引...

ranwu 2019-08-23 15:41 评论0 收藏0
谈谈深拷贝与浅拷贝

摘要：前言关于深拷贝和浅拷贝其实是两个比较基础的概念，但是我还是想整理一下，因为里面有很多小细节还是很有意思的。那深拷贝就是两者指向不同的内存地址，是真正意义上的拷贝。谈谈是我们经常用到的方法，其实这个方法就是浅拷贝。前言关于深拷贝和浅拷贝其实是两个比较基础的概念，但是我还是想整理一下，因为里面有很多小细节还是很有意思的。深拷贝和浅拷贝的区别深拷贝和浅拷贝是大家经常听到的两个名词，两...

Awbeci 2019-08-23 12:26 评论0 收藏0
低门槛彻底理解JavaScript中的深拷贝和浅拷贝

摘要：案例中的赋值就是典型的浅拷贝，并且深拷贝与浅拷贝的概念只存在于引用类型。修改修改经测试，也只能实现一维对象的深拷贝。经过验证，我们发现提供的自有方法并不能彻底解决的深拷贝问题。在说深拷贝与浅拷贝前，我们先看两个简单的案例： //案例1 var num1 = 1, num2 = num1; console.log(num1) //1 console.log(num2) //1 num...

wind3110991 2019-08-22 16:02 评论0 收藏0