深拷贝与浅拷贝

原创已于 2023-07-24 08:53:26 修改 · 84 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2023-06-24 22:26:08 首次发布

文章介绍了JavaScript中深拷贝和浅拷贝的概念，以及它们的区别。深拷贝创建了全新对象，包括复杂对象的所有层级，而浅拷贝只复制第一层属性，对深层对象引用。文章提供了几种实现浅拷贝和深拷贝的方法，包括遍历、展开运算符、object.assign、JSON.parse和JSON.stringify，以及lodash库的cloneDeep方法。

深拷贝： 创建一个新的对象，去拷贝另一个对象的属性和属性值，

如果属性值是对象类型，就创建一个新的对象，拷贝这个属性值。依次类推把对象所有深层次的属性值都拷贝一遍

浅拷贝： 创建一个新的对象，去拷贝另一个对象的属性和属性值

如果属性值是对象类型，只是把对象的地址拿过来用了。只是拷贝的第一层的属性，第二层用的还是原来的

浅拷贝的实现方式：

1.遍历

function shallowCopy(obj){
    let copyObj={};
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            copyObj[key] = obj[key];
        }
    }
    return copyObj;
}

2.展开运算符

let obj1 = {a:1,b:{c:1}}
let obj2 = {...obj1}
console.log(obj2)

3.object.assign

var obj1 = { a: {b: "daqiao"} };
var obj2 = Object.assign({}, obj1);
obj2.a.b = "xoapxin";
console.log(obj1.a.b); //xiaoxin

深拷贝的实现方式

1.手写递归:遍历这个对象，直到里面都是基本数据类型

function clone(obj){
  const newObj = {};
  let keys = Object.keys(obj);
  let key = null;
  let data = null;
  for(let i = 0; i<keys.length;i++){
    key = keys[i];
    data = obj[key];
    if(data && typeof data === 'object'){
      newObj[key] = clone(data)
    }else{
      newObj[key] = data;
    }
  }
  return newObj
}

2.JSON.parse(JSON.stringfy())

let arr1 = [1, {
    name: ' daqiao'
}];
let arr2 = JSON.parse(JSON.stringify(arr1));
arr2[1].name = 'xiaoxin'; 
console.log(arr1, arr2) //1  daqiao   1  xiaoxin

3.使用第三方库



<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<script>
var obj1={
a:1,
b:2,
c:[1,2,3]}
var obj2=clon(obj1)//深拷贝
var obj3=_.cloneDeep(obj2)//浅拷贝

 </script>