您的当前位置:首页>全部文章>文章详情

前端:javascript浅拷贝与深拷贝的区别

发表于:2022-03-29 09:26:17浏览:861次TAG: #javascript #浅拷贝 #深拷贝

如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,如果B没改变,那就是深拷贝。

1.浅拷贝
浅拷贝是指,对基本类型的值拷贝,以及对象类型的地址拷贝。
什么是基本类型?在js中,我们知道的基本类型有字符串,数字,布尔值。当我们写这样的代码,就是浅拷贝。

var a = 1;
var b = a; //浅拷贝
b = 2;     //改变b的值,并不会影响到a,因为浅拷贝对基本类型而言就是值拷贝
console.log(a);//1

结果:a还是1,和b没有关系。
这个道理,在对象中也一样适用。JavaScript中还有对象类型(也叫引用数据类型),对象类型的浅拷贝则只是拷贝了地址。

var p1 = {
    name: 'jack'
}
var p2 = p1;
p2.name = 'rose';
console.log(p1);//{name: 'rose'}

p2保存的是和p1一模一样的内存地址,就好像你去配了一把钥匙给张三,张三拿着钥匙一样可以去你家把冰箱里的酸奶喝了。

2.深拷贝
深拷贝是指,除了拷贝基本类型的值,还完全复刻了对象类型。
一个对象在内存中是固定存在的,我们如果要对其进行深拷贝,唯一的办法就是创建一个新的对象,里面的值完全复刻原来的对象。
就刚才例子,我们稍加改造

var p1 = {
    name: 'jack'
}
var p2 = {
    name: p1.name
};
p2.name = 'rose';
console.log(p1);//{name: 'jack'}

这样一来,我们对p2进行改造,就不会影响到p1了,这就是深拷贝。
所以我们用这种方法实现深拷贝是可以的,但是如果对象的属性太多,就会很繁琐。下面讲讲如何实现深拷贝的通用方法?

3.深拷贝 Object.assign()

Object.assign()是一种可以对非嵌套对象进行深拷贝的方法,如果对象中出现嵌套情况,那么其对被嵌套对象的行为就成了普通的浅拷贝。如果没有嵌套,是可以用这个方法的。

var p1 = {
    name: 'jack'
}
var p2 = {}
Object.assign(p2,p1);
p2.name = 'rose';
console.log(p1);//{name: 'jack'}

还有一种类似的方法,就是用JSON进行转换

var p1 = {
    name: 'jack',
    age:12
}
var p2 = JSON.parse(JSON.stringify(p1));
p2.name = 'rose';

实际开发中,可能这种方式用的更多一些,比如把一些数据转成json存储到本地缓存,需要用到的时候,我们再反序列化。

4.深拷贝的实现方式
a、采用递归去拷贝所有层级属性

function deepCopy(dest,src){
  var dest = dest || {};
  for(var key in src){
    //如果对象的属性又是对象,则递归处理
    if(typeof src[key] === "object"){
        dest[key]= (src[key].constructor === Array)?[]:{}; 
        deepCopy(dest[key],src[key]);
    }else{
        dest[key]=src[key];
    }
  }
  return dest;
}

测试:

var p1 = {
    name: 'jack',
    age:12,
    toy: {
        name:'car'
    }
}
var p2 = deepCopy({},p1);

可以看到,操作p2并不会影响到p1,这就是递归方式的深拷贝。

b、通过JSON对象来实现深拷贝

function deepClone2(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}

缺点: 无法实现对对象中方法的深拷贝,会显示为undefined

c、通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝,false为浅拷贝

d、lodash函数库实现深拷贝

let result = _.cloneDeep(test)

e、Reflect法

// 代理法
function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error('obj 不是一个对象!')
    }
    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [...obj] : { ...obj }
    Reflect.ownKeys(cloneObj).forEach(key => {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    })
    return cloneObj
}

f、手动实现深拷贝

let obj1 = {
   a: 1,
   b: 2
}
let obj2 = {
   a: obj1.a,
   b: obj1.b
}
obj2.a = 3;
alert(obj1.a); // 1
alert(obj2.a); // 3

g、如果对象的value是基本类型的话,也可以用Object.assign来实现深拷贝,但是要把它赋值给一个空对象

var obj = {
    a: 1,
    b: 2
}
var obj1 = Object.assign({}, obj); // obj赋值给一个空{}
obj1.a = 3;
console.log(obj.a);// 1

h、用slice实现对数组的深拷贝

// 当数组里面的值是基本数据类型,比如String,Number,Boolean时,属于深拷贝
// 当数组里面的值是引用数据类型,比如Object,Array时,属于浅拷贝
var arr1 = ["1","2","3"]; 
var arr2 = arr1.slice(0);
arr2[1] = "9";
console.log("数组的原始值:" + arr1 );
console.log("数组的新值:" + arr2 );

i、用concat实现对数组的深拷贝

// 当数组里面的值是基本数据类型,比如String,Number,Boolean时,属于深拷贝
var arr1 = ["1","2","3"];
var arr2 = arr1.concat();
arr2[1] = "9";
console.log("数组的原始值:" + arr1 );
console.log("数组的新值:" + arr2 );
// 当数组里面的值是引用数据类型,比如Object,Array时,属于浅拷贝
var arr1 = [{a:1},{b:2},{c:3}];
var arr2 = arr1.concat();
arr2[0].a = "9";
console.log("数组的原始值:" + arr1[0].a ); // 数组的原始值:9
console.log("数组的新值:" + arr2[0].a ); // 数组的新值:9

j、直接使用var newObj = Object.create(oldObj),可以达到深拷贝的效果。

function deepClone(initalObj, finalObj) {
  var obj = finalObj || {};
  for (var i in initalObj) {
    var prop = initalObj[i];        // 避免相互引用对象导致死循环,如initalObj.a = initalObj的情况
    if(prop === obj) {
      continue;
    }
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }
  return obj;
}

k、使用扩展运算符实现深拷贝

// 当value是基本数据类型,比如String,Number,Boolean时,是可以使用拓展运算符进行深拷贝的
// 当value是引用类型的值,比如Object,Array,引用类型进行深拷贝也只是拷贝了引用地址,所以属于浅拷贝
var car = {brand: "BMW", price: "380000", length: "5米"}
var car1 = { ...car, price: "500000" }
console.log(car1); // { brand: "BMW", price: "500000", length: "5米" }
console.log(car); // { brand: "BMW", price: "380000", length: "5米" }