JS实现深拷贝

桃扇骨 2023-06-16 08:08 69阅读 0赞

#  #

# [JS实现深拷贝][JS] #

## 一、赋值、浅拷贝与深拷贝的区别 ##

![format_png][]

## 二、深拷贝的方法 ##

### 1.JSON转换 ###

var targetObj = JSON.parse(JSON.stringify(copyObj))
    let arr4 = JSON.parse(JSON.stringify(arr))

缺点：

（1）如果对象里有函数,函数无法被拷贝下来

（2）无法拷贝copyObj对象原型链上的属性和方法

（3）当数据的层次很深，会栈溢出

### 2.普通递归函数 ###

function deepCopy( source ) {
    if (!isObject(source)) return source; //如果不是对象的话直接返回
        let target = Array.isArray( source ) ? [] : {} //数组兼容
        for ( var k in source ) {
            if (source.hasOwnProperty(k)) {
                if ( typeof source[ k ] === 'object' ) {
                    target[ k ] = deepCopy( source[ k ] )
                } else {
                    target[ k ] = source[ k ]
                }
            }
        }
        return target
    }
    
    function isObject(obj) {
        return typeof obj === 'object' && obj !== null
    }

缺点：

（1）无法保持引用

（2）当数据的层次很深，会栈溢出

### 3.防栈溢出函数 ###

function cloneLoop(x) {
        const root = {};
    
        // 栈
        const loopList = [
            {
                parent: root,
                key: undefined,
                data: x,
            }
        ];
    
        while(loopList.length) {
            // 深度优先
            const node = loopList.pop();
            const parent = node.parent;
            const key = node.key;
            const data = node.data;
    
            // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
            let res = parent;
            if (typeof key !== 'undefined') {
                res = parent[key] = {};
            }
    
            for(let k in data) {
                if (data.hasOwnProperty(k)) {
                    if (typeof data[k] === 'object') {
                        // 下一次循环
                        loopList.push({
                            parent: res,
                            key: k,
                            data: data[k],
                        });
                    } else {
                        res[k] = data[k];
                    }
                }
            }
        }
    
        return root;
    }

优点：

（1）不会栈溢出

（2）支持很多层级的数据

function copyObject(orig) {
        var copy = Object.create(Object.getPrototypeOf(orig));
        copyOwnPropertiesFrom(copy, orig);
        return copy;
      }
    
    
      function copyOwnPropertiesFrom(target, source) {
        Object
        .getOwnPropertyNames(source)
        .forEach(function (propKey) {
          var desc = Object.getOwnPropertyDescriptor(source, propKey);
          Object.defineProperty(target, propKey, desc);
        });
        return target;
      }
    
      var obj = {
        name: 'Jack',
        age: '32',
        job: 'developer'
      };
    
      var obj2 = copyObject(obj);
      console.log(obj2);
      obj.age = 39;
      obj.name = 'Tom';
      console.log(obj);
      console.log(obj2);

分类: [JavaScript][]

[JS]: https://www.cnblogs.com/dobeco/p/11295316.html
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yb3ViaW4ubWUvaW1hZ2VzL2Nsb25lLnBuZw?x-oss-process=image/format,png
[JavaScript]: https://www.cnblogs.com/dobeco/category/1455525.html

发表评论取消回复

表情：

评论列表（有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读

相关 js递归实现深拷贝

function deepCopy(obj,newObj) { for(var key in obj){ i

阳光穿透心脏的1/2处/ 2023年07月13日 04:15/ 0 赞/ 11 阅读

相关 JS实现深拷贝

[JS实现深拷贝][JS] 一、赋值、浅拷贝与深拷贝的区别 ![format_png][] 二、深拷贝的方法 1.JSON转换 var

桃扇骨/ 2023年06月16日 08:08/ 0 赞/ 70 阅读

相关 JS深拷贝

一、简单介绍 JS中，数据类型分为基本数据类型和引用数据类型。基本数据类型的值是存储在栈内存中的；而引用数据类型的值是存储在堆内存中的，栈中只存储对象在堆中的内存地址

电玩女神/ 2023年02月21日 11:57/ 0 赞/ 23 阅读

相关 js深拷贝的实现

deepClone(obj){ var target = { }; //目标数组 for(var key in o

╰+哭是因爲堅強的太久メ/ 2023年02月10日 15:29/ 0 赞/ 180 阅读

相关前端---JS深拷贝

<html> <head> </head> <body> </body> </html>

清疚/ 2022年12月06日 15:16/ 0 赞/ 185 阅读

相关 js 深拷贝函数

// 定义一个深拷贝函数接收目标target参数 function deepClone(target) { // 定义一个变量

淡淡的烟草味﹌/ 2022年09月08日 04:58/ 0 赞/ 208 阅读

相关 js 实现简易版深拷贝

可以兼容对象和数组类型数据的深拷贝 function copy(ladel){ var obj = { }

柔情只为你懂/ 2022年02月19日 14:25/ 0 赞/ 289 阅读

相关 js实现数组浅拷贝和深拷贝

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。此篇

你的名字/ 2021年10月24日 02:18/ 0 赞/ 413 阅读

相关 js深拷贝与浅拷贝解析与实现

在js的语法中，像Number，String，Boolean这样的基本类型，它们的传值方式是按值传递的，而想对象\{a: 10, b: 20\}，它们的传值是引用传值的对

太过爱你忘了你带给我的痛/ 2021年09月19日 13:28/ 0 赞/ 308 阅读

相关 js深拷贝浅拷贝

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

朱雀/ 2021年08月31日 14:35/ 0 赞/ 509 阅读