JavaScript中的深拷贝和浅拷贝

2020-03-23  本文已影响0人  晴雨稀兮

概述

实现深拷贝

1. 递归复制所有层级的属性

function deepClone(obj) {
    let cloneRes = Array.isArray(obj) ? [] : {};
    if(obj && typeof obj === 'object') {
        for(let key in obj) {
            
            if (obj[key] && typeof obj[key] === 'object') {
                cloneRes[key] = deepClone(obj[key]);
            } else {
                cloneRes[key] = obj[key];
            }
        }
        
    } else {
        cloneRes = obj;
    }
    return cloneRes;
}

2. 利用JSON对象的parse和stringify

var arr = [1,2,[3,4]];
var arr2 = JSON.parse(JSON.stringify(arr));

!!这些不是深拷贝

1.Object.assign()

// 如果被拷贝对象只有一层属性,就是深拷贝,第二层以后就是浅拷贝
var obj = {a: 1, b: 2};
var obj2 = Object.assign({},obj);
obj2.c = 3; // obj = {a: 1, b: 2};  obj2 = {a: 1, b: 2, c:3}

var obj3 = {a: 1, b: 2, c: 3, d: {inner:90}};
var obj4 = Object.assign({}, obj3);
obj4.c = 'c';
obj4.d.inner2 = 100;
// obj3 = {a: 1, b: 2, c: 3, d: {inner:90, inner2: 100}};
// obj3 = {a: 1, b: 2, c: c, d: {inner:90, inner2: 100}};
--------------------------------------------------

Object.assign语法,可以用于合并函数:
Object.assign(target, source1,source2...);  // target: 目标对象; source:源对象,返回目标对象

2.slice()

// 被拷贝数组只有一层,就是浅拷贝,第二层以后就是深拷贝
var arr = [1,2,3];
var arr2 = arr.slice();
arr2.push(4);   // arr: [1,2,3]; arr2:[1,2,3,4];

var arr = [1,2,[3,4]];
var arr2 = arr.slice();
arr2[2][1] = 5; 
arr2.push(6);   // arr:[1,2,[3,5]]; arr2:[1,2,[3,5], 6]

3. 展开运算符

和Object一样,只有第一层是深拷贝,第二层开始就是浅拷贝

var obj5 = {...obj4};
obj5.c = 'c5';
obj5.d.inner5 = 101;
// obj4 = {a: 1, b: 2, c: "c", d: {inner:90,inner2:100,inner5:101}}
// obj5 = {a: 1, b: 2, c: "c5", d: {inner:90,inner2:100,inner5:101}}
上一篇 下一篇

猜你喜欢

热点阅读