码迷,mamicode.com
首页 > Web开发 > 详细

JS中的浅拷贝和深拷贝。

时间:2018-11-19 23:05:45      阅读:382      评论:0      收藏:0      [点我收藏+]

标签:null   end   log   str   数组   key   one   fun   []   

//浅拷贝
var o1 = { a: 10, b: 20, c: 30 };
var o2 = o1;
o2.a = 100;
console.log(o1);

//深拷贝
var o1 = { a: 10, b: 20, c: 30 };
var o2 = { a: o1.a, b: o1.b, c: o1.c };
o2.a = 100;
console.log(o1);

//深拷贝 只适用于一维数组
var o1 = { a: 10, b: 20, c: 30 };
var o2 = { ...o1 };
o2.a = 100;
console.log(o1);

//简单深拷贝,将对象转成json字符串再转回来
var o1 = { a: { d: 40 }, b: 20, c: 30 };
var o2 = JSON.parse(JSON.stringify(o1));
o2.a.d = 100;
console.log(o1);

//多维数组
var o1 = { a: { d: 40 }, b: 20, c: 30 };
var o2 = { ...o1 };
o2.a.d = 88;
console.log(o1);

//Object.assign 能够实现一层深拷贝
var o1 = {
    name: "Gucci",
    age: 13,
    gender: "female",
    hobby: {
        a: ‘Chinese‘,
        b: ‘Math‘,
        c: ‘English‘
    }
};
var o2 = Object.assign({}, o1);
o2.hobby.a = "Math";
o1.age = 1000;
console.log(o1);


//终极大杀器 递归复制实现深拷贝

//注意typeof []结果为object
typeof []
"object"
typeof {}
"object"
typeof "111"
"string"
typeof null
"object"

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象,如果是,递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是,简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

  

//运算结果按顺序打印
{ a: 100, b: 20, c: 30 }
{ a: 10, b: 20, c: 30 }
{ a: 10, b: 20, c: 30 }
{ a: { d: 40 }, b: 20, c: 30 }
{ a: { d: 88 }, b: 20, c: 30 }
{ name: ‘Gucci‘,
  age: 1000,
  gender: ‘female‘,
  hobby: { a: ‘Math‘, b: ‘Math‘, c: ‘English‘ } }
[ 2, 2, 3, 4 ] [ 1, 2, 3, 4 ]

  

JS中的浅拷贝和深拷贝。

标签:null   end   log   str   数组   key   one   fun   []   

原文地址:https://www.cnblogs.com/ft039x/p/9986285.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!