js对象深拷贝

由于引用类型(数组、对象)是按地址传递,直接拷贝是浅拷贝,即修改拷贝后的变量,原变量也会改变。有时需要深拷贝一个对象,这时就需要遍历彻底复制,使原对象和拷贝对象完全脱离关系。

代码:

    function deepCloneObj(obj){
        var i;
        var o = Array.isArray(obj) ? [] : {};
        for(i in obj){
            if(obj.hasOwnProperty(i)){
                o[i] = typeof obj[i] === "Object"? deepCloneObj(obj[i]) : obj[i];
            }
        }
        return o;
    }

实现细节:假定传入的是一个引用类型,首先判定传入的是数组还是对象,根据判定结果,确定o是初始化为空数组还是空对象。之后遍历传入引用类型的自有属性,并判定属性是否为对象,如果是的话做递归,否则直接复制给o。

数组实例:

    var arr1 = ["sfsag","akghak","[‘fafa‘,‘gaag‘,‘rwet‘]",125];
    console.log(arr1);//["sfsag", "akghak", "[‘fafa‘,‘gaag‘,‘rwet‘]", 125]
    var arr2 = deepCloneObj(arr1);
    arr1.push("newstr");
    console.log(arr1);//["sfsag", "akghak", "[‘fafa‘,‘gaag‘,‘rwet‘]", 125, "newstr"]
    console.log(arr2);//["sfsag", "akghak", "[‘fafa‘,‘gaag‘,‘rwet‘]", 125]

对象实例:

    var obj1 = {sgsh:{sfwg:‘ssgsg‘},asga:[‘aff‘,‘ghh‘,‘wegwer‘,12],segg:1};
    console.log(obj1);//Object {sgsh: Object, asga: Array[4], segg: 1}
    var obj2 = deepCloneObj(obj1);
    obj1[‘newstr‘] = [‘fsg‘,‘gsr‘];
    console.log(obj1);//Object {sgsh: Object, asga: Array[4], segg: 1, newstr: Array[2]}
    console.log(obj2);//Object {sgsh: Object, asga: Array[4], segg: 1}
时间: 2024-10-11 16:56:27

js对象深拷贝的相关文章

js对象深拷贝浅拷贝

对象的深拷贝于浅拷贝 对于基本类型,浅拷贝过程就是对值的复制,这个过程会开辟出一个新的内存空间,将值复制到新的内存空间.而对于引用类型来书,浅拷贝过程就是对指针的复制,这个过程并没有开辟新的堆内存空间,只是将指向该内存的地址进行了复制.然而对引用类型的浅拷贝会出现一个问题,那就是修改其中一个对象的属性,则另一个对象的属性也会改变.产生了问题那必然有相对解决的方法, 就这样深拷贝就开始入场了,深拷贝会开辟新的栈,两个对象对应两个不同的地址,这样一来,改一个对象的属性,也不会改变另一个对象的属性.

js 对象深拷贝

/* *p需要拷贝的对象 * */ var deepCopy=function(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; } } return c; }

4个方面彻底说清JS的深拷贝/浅拷贝

首先,本文适用于业务需要,急需知道如何深拷贝JS对象的开发者.第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 第一类 你只需要一行黑科技代码就可以实现深拷贝 var copyObj = { name: 'ziwei', arr : [1,2,3] } var targetObj = JSON.parse(JSON.stringify(copyObj)) 此时 copyObj.arr !== targetObj.arr 已经实现了深拷贝 别着急走,利用window.JSON的方法做深拷

js对象浅拷贝和深拷贝详解

js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var

js对象拷贝

在JS中,一般的=号传递的都是对象/数组的引用,并没有真正地拷贝一个对象,那如何进行对象的深度拷贝呢?如果你对此也有疑问,这篇文章或许能够帮助到你 一.对象引用.浅层拷贝与深层拷贝的区别 js的对象引用传递理解起来很简单,参考如下代码: var a = {name:'wanger'} var b = a ; a===b // true b.name = 'zhangsan' a.name //'zhangan' 上述代码中,使用了=进行赋值,于是b指向了a所指向的栈的对象,也就是a与b指向了同一

JS 中深拷贝的几种实现方法

JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空,并且是对象或者是 if (obj && typeof obj === "object") { for (key i

JS对象继承与原型链

1.以复制方式实现的继承 1.1浅拷贝 基本类型的复制 1 var parent = { 2 lanage: "chinese" 3 } 4 5 var child = { 6 name: "xxx", 7 age: 12 8 } 9 10 function extend(parent, child) { 11 var child = child || {}; 12 for (const propertype in parent) { 13 child[proper

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <