深浅拷贝

浅拷贝

浅拷贝是拷贝引用(拷贝地址),仍指向同一个地址,所以其中一方改变数据,另一方也会跟着改变

实现方式

  1. 对象
  • Object.assign()
    Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign()复制的对象第一层是深拷贝,第二层及以后每层都是浅拷贝
let obj1 = {
        name: "zhangsan",
        info:{
            sex: "man",
            friend: ["lisi", "wangmazi"]
        }
    };
    let obj3 = Object.assign({}, obj1);
    obj3.name = "qiaojing";
    obj3.info.friend[1] = ["hah", "kek"];
    console.log('obj1',obj1);
    console.log('obj3',obj3);

在这里插入图片描述
从结果我们可以看出:
在obj1中,修改了第一层的name属性,并没有改变源对象的name属性,因此,第一层为深拷贝。而修改friend时,原对象发生了改变,为浅拷贝。

  • 展开运算符
let obj1 = {
        name: "zhangsan",
        info:{
            sex: "man",
            friend: ["lisi", "wangmazi"]
        }
    };
    let obj3 = {...obj1};
    obj3.name = "qiaojing";
    obj3.info.friend[1] = ["hah", "kek"];
    console.log('obj1',obj1);
    console.log('obj3',obj3);

在这里插入图片描述
与使用Object.assign()类似。
2. 数组

  • Array.prototype.concat()
 var arr = ['old', 1, true, null, undefined,{old: 'old'}, ['old']];

    var new_arr = arr.concat();

    new_arr[0] = 'new';
    arr[5].old = 'new';
    arr[6][0] = 'new';

    console.log(arr)
    console.log(new_arr)

在这里插入图片描述

  • Array.prototype.slice()
    var arr = ['old', 1, true, null, undefined,{old: 'old'}, ['old']];

    var new_arr = arr.slice();

    new_arr[0] = 'new';
    arr[5].old = 'new';
    arr[6][0] = 'new';

    console.log(arr)
    console.log(new_arr)

在这里插入图片描述
注意:如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或者数组,就会只拷贝对象和数组的引用,这样我们无论在新旧数组进行了修改,两者都会发生变化。

  • 直接赋值

深拷贝

深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。二者不会相互影响.

  • JSON.parse(JSON.stringify(object)) (数组和对象均适用)
 let a = {
        age: 1,
        jobs: {
            first: 'FE'
        }
    }
    let b = JSON.parse(JSON.stringify(a))
    a.jobs.first = 'native'
    
    console.log('a',a)
    console.log('b',b)

在这里插入图片描述
由上可见,改变a并不会对b有影响.
注意:

  • 会忽略 undefined
  • 会忽略 symbol
  • 不能序列化函数
let a = {
    age: undefined,
    sex: Symbol('male'),
    jobs: function() {},
    name: 'yck'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {name: "yck"}
  • 不能解决循环引用的对象
let obj = {
    a: 1,
    b: {
        c: 2,
   		d: 3
    }
}
obj.a = obj.b;
obj.b.c = obj.a;

let b = JSON.parse(JSON.stringify(obj));
// Uncaught TypeError: Converting circular structure to JSON
  • 实现深拷贝
var deepCopy = function(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值