深拷贝与浅拷贝

最新推荐文章于 2024-03-22 21:37:04 发布

流年＊痕迹

最新推荐文章于 2024-03-22 21:37:04 发布

阅读量120

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_52007839/article/details/113866144

版权

本文深入探讨了JavaScript中的对象拷贝和合并，包括使用`Object.assign()`、扩展运算符以及自定义浅拷贝和深拷贝实现。同时提到了`JSON.parse(JSON.stringify())`方法的深拷贝限制，以及在Vue中使用lodash库进行深拷贝的方法。这些技巧对于理解和优化JavaScript代码中的数据操作至关重要。

摘要由CSDN通过智能技术生成

const obj1 = {name:'lili',age:18}
const obj2 = {name:'xiaoming',say}
const obj3 = {name:'xiaohua',sex:'nv',child:[obj1,obj2]}

1.Object.assign():用于合并对象本身可枚举的属性，合并至第一个对象上，并返回此目标对象，浅拷贝

const result1 = Object.assign(obj1,obj2,obj3)//合并对象
const result1 = Object.assign({},obj3)//浅拷贝对象

2.扩展运算符,属于浅拷贝

const result2 = {...obj1,...obj2,...obj3}

3.实现浅拷贝

const checkedType = (target) => {
  return Object.prototype.toString.call(target).slice(8, -1);
}
const shallowclone=(target)=>{
  console.log(target)
  let result;
  if(checkedType(target)=="Array"){
      result=[];
  }else if(checkedType(target)=="Object"){
      result={};
  }
  // for..in 遍历数组或者对象的可枚举的key（包含继承的属性）；hasOwnProperty判断是否为对象自身可枚举属性
  // Object.keys:获取到对象可枚举的所有私有属性，返回数组
  for(let key in target){
    if(target.hasOwnProperty(key)){
        result[key]=target[key];
    }
  }
  return result;
}

4.实现深拷贝

const checkedType = (target) => {
  return Object.prototype.toString.call(target).slice(8, -1);
}
const deepClone = (target) => {
  let result;
  if(checkedType(target)==="Array"){
    result = []
  }else if(checkedType(target) ==="Object"){
    result = {}
  }
  for (let key in target){
    if(target.hasOwnProperty(key)){
      if(checkedType(target[key])==='Array'||target[key]==='Object'){
        //判断当键值属于数组或对象，递归的拷贝
        result[key] = deepClone(target[key])
      }else{
        result[key]=target[key];
      }
      
    }
  }
  return result
}