js对象拷贝的方法

清疚 2022-12-25 01:51 117阅读 0赞

## json转化方法 ##

1.  适合情况：  
     JSON对象的深度克隆。方法是先JSON.stringify() 转为json字符串， 再JSON.parse() 转为json数组
2.  缺点：  
      a. **如果你的对象里有函数, 函数无法被拷贝下来**  
      b. **无法拷贝copyObj对象原型链上的属性和方法**

var obj = {
        x: 1,
        y: {
            a: 1,
            b: 0,
            c: [1, 2, 3]
        }
    };
    
    // 相同的引用
    var obj2 = obj;
    console.log(obj2 == obj); //true 直接复制只是复制对象的指针，还指向同一个对象
    
    //不同的引用
    var obj3 = JSON.parse(JSON.stringify(obj));
    console.log(obj3 == obj) //false  通过json方法复制后的地址不一样
    console.log(obj3);

## Object.create() ##

var obj = {
        x: 1,
        y: {
            a: 1,
            b: 0,
            c: [1, 2, 3]
        }
    };
    
    var obj2 = Object.create(obj);
    console.log(obj2 == obj); //false  指针地址变了
    console.log(obj2);

## 循环遍历 ##

*  **浅拷贝：**

只是拷贝了基本类型的数据；然而引用类型数据， 只是复制了指针，复制后还是指向该引用。

var obj = {
        x: 1,
        y: {
            a: 1,
            b: 0,
            c: [1, 2, 3]
        }
    };
    
    var obj2 = {};
    
    for (var i in obj) { //for in 会遍历对象的属性，包括实例中和原型中的属性。（需要可访问，可枚举属性）
        obj2[i] = obj[i];
    }
    console.log(obj2);
    
    obj2.y.c.push(4); //给新数组添加一个元素4，会同步反映在新旧数组中
    console.log(obj2.y.c); // [1,2,3,4]
    console.log(obj.y.c); // [1,2,3,4]  浅拷贝只是复制了地址，修改是内存中的数据

*  **深拷贝**  
    深拷贝, 就是遍历那个被拷贝的对象。判断对象里每一项的数据类型。如果不是对象类型, 就直接赋值, 如果是对象类型, 就再次调用递归的方法去赋值。

var obj = {
        x: 1,
        y: {
            a: 1,
            b: 0,
            c: [1, 2, 3]
        }
    };
    
    function getClass(o) { //判断数据类型
        return Object.prototype.toString.call(o).slice(8, -1);
    }
    
    function deepCopy(obj) {
        var result, oClass = getClass(obj);
    
        if (oClass == "Object") result = {}; //判断传入的如果是对象，继续遍历
        else if (oClass == "Array") result = []; //判断传入的如果是数组，继续遍历
        else return obj; //如果是基本数据类型就直接返回
    
        for (var i in obj) {
            var copy = obj[i];
    
            if (getClass(copy) == "Object") result[i] = deepCopy(copy); //递归方法 ，如果对象继续变量obj[i],下一级还是对象，就obj[i][i]
            else if (getClass(copy) == "Array") result[i] = deepCopy(copy); //递归方法 ，如果对象继续数组obj[i],下一级还是数组，就obj[i][i]
            else result[i] = copy; //基本数据类型则赋值给属性
        }
    
        return result;
    }
    
    var obj2 = deepCopy(obj);
    console.log(obj2);

## jQuery extend ##

var obj = {
        x: 1,
        y: {
            a: 1,
            b: 0,
            c: [1, 2, 3]
        }
    };
    var obj2 = $.extend({}, obj);
    console.log(obj2 == obj) //false  复制后的地址不一样
    console.log(obj2);

发表评论取消回复

表情：

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

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

相关阅读

相关 js对象的深拷贝

1、利用json转换，但是对象中的键不能为本身 function cloneJson(o) { return J

￡神魔★判官ぃ/ 2023年01月22日 14:53/ 0 赞/ 153 阅读

相关 js对象拷贝的方法

json转化方法 1. 适合情况： JSON对象的深度克隆。方法是先JSON.stringify() 转为json字符串，再JSON.parse() 转

清疚/ 2022年12月25日 01:51/ 0 赞/ 118 阅读

相关 vue js对象拷贝的方法简单易用

对象拷贝的方法是一个难点，尤其是深拷贝。建议把代码都运行下，帮助理解拷贝。一. json方法 1. 适合情况： JSON对象的深度克隆。方法是先JSO

╰半夏微凉°/ 2022年12月24日 10:51/ 0 赞/ 117 阅读

相关 JS 对象的深拷贝和浅拷贝

内容系转载，仅用于学习交流现象我们先来看一个demo // 我们先申明一个变量str1， // 然后把变量str1负值（拷贝）给变量str2

刺骨的言语ヽ痛彻心扉/ 2022年12月23日 09:41/ 0 赞/ 175 阅读

相关 js 对象拷贝的三种方法，深拷贝函数。

js 对象拷贝的三种方法以下面数据格式obj 为主： const obj = { data: 1, un: undefine

不念不忘少年蓝@/ 2022年10月04日 15:50/ 0 赞/ 197 阅读

相关 js数组、对象、值拷贝方法总结

前言：我们都知道在java中存在基本数据类型和引用数据类型，在对基本数据类型进行拷贝的时候直接使用等号（=）赋值即可，但是对于引用类型拷贝则需要复写Objec

古城微笑少年丶/ 2022年06月13日 07:40/ 0 赞/ 263 阅读

相关 js对象的拷贝

对象浅复制 Object.prototype.clone = function(){ var newObj = {}; for(var i in

Dear 丶/ 2022年05月28日 02:44/ 0 赞/ 142 阅读

相关 js对象拷贝

对象拷贝assign 嵌套的对象不能复制只拷贝一级对象，可循环实现可转换为json对象进行拷贝，再转换为普通对象 [深拷贝与浅拷贝的区别][Link 1]

怼烎@/ 2022年05月11日 08:33/ 0 赞/ 121 阅读

相关 JS拷贝一个对象的疑问

今天写代码时，需要拷贝一个对象，然后改变新对象的属性而不影响原对象属性的值。我用Object.assign()实现了想要的效果。然后我发现Object.assign()

小灰灰/ 2022年03月17日 07:26/ 0 赞/ 156 阅读

相关 [log] js对象拷贝

js对象拷贝深拷贝 var clone = function (obj) { if(obj === null) return null

向右看齐/ 2021年09月16日 12:03/ 0 赞/ 285 阅读