前端手撕代码——手撕深、浅拷贝

月下独Coding

已于 2023-06-16 17:49:29 修改

阅读量129

点赞数

分类专栏：前端手写代码文章标签：前端 javascript 开发语言

于 2023-06-16 16:41:41 首次发布

本文链接：https://blog.csdn.net/Zhouyunfeier/article/details/131249729

版权

前端手写代码专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章介绍了JavaScript中对象拷贝的概念，提供了浅拷贝的实现函数`shallowCopy`和解决循环引用问题的深拷贝函数`deepClone`。通过示例`obj1`和`obj2`展示了深拷贝如何处理复杂对象和循环引用的情况。

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

浅拷贝

浅拷贝只能拷贝一层对象

// 浅拷贝只能拷贝一层对象
function shallowCopy(params){
  if(!params || typeof params !== 'object'){
    return params;
  }
  let newObject = Array.isArray(params) ? [] : {};
  for(let key in params){
    if(params.hasOwnProperty(key)){
      newObject[key] = params[key];
    }
  }
  return newObject;
}

深拷贝

// 深拷贝解决循环引用爆栈的问题
function deepClone(source, map = new Map()){
  // 为空
  if(source == null) return source;
  // 为日期类型
  if(source instanceof Date) return new Date(source);
  // 为Reg类型
  if(source instanceof RegExp) return new RegExp(source);
  // 如果是函数的话也不需要深拷贝
  if(typeof source !== 'object') return source;
  
  if(map.has(source)) return map.get(source);

  let newObj = Array.isArray(source) ? []: {};
  map.set(source, newObj);
  for(let key in source){
    if(source.hasOwnProperty(key)){
      newObj[key] = deepClone(source[key], map);
    }
  }
  return newObj;
}

const obj1 = {
  name: 123,
  num: 111,
  arr: [1, 2, 3],
  child: {
    arr: [1,2,3,4]
  },
  next: 'obj1',
}

obj1.next = obj1;

const obj2 = deepClone(obj1);
console.log(obj1);
console.log(obj2);
console.log(obj1['child'] === obj2['child']);