JS逐日一题：深拷贝与浅拷贝的区分？怎样完成一个深拷贝

2024年5月28日 211次阅读 来源: febobo

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点推送当天的参考答案

  • 注 毫不仅限于完成当天使命，更多是查漏补缺，进修群内别的同砚优异的答题思绪

点击到场答题

    原文作者：febobo
    原文地址: https://segmentfault.com/a/1190000018495759
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞