前端手写源码系列(三）——手写_deepClone深浅拷贝

真的很上进2024-08-28 20:57

目录

一、基本类型和引用类型

基本类型：string,number,boolean,null,undefiend,symbol

引用类型：Function,Array,Object

1、基本数据类型的特点：直接存储在栈(stack)中的数据

2、引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

二、深浅拷贝概念

浅拷贝就是创建一个新对象，这个对象对原始对象进行了精确拷贝。

  • 若属性是基本类型，拷贝的就是属性的值；
  • 若属性是引用类型，拷贝的就是内存地址，
  • 若其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝 就是将一个对象完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，修改新对象不会影响到原对象。

三、浅拷贝实现方式

1、Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

js 复制代码 
var obj = { a: {a: "kobe", b: 39} };
var initalObj = Object.assign({}, obj);
initalObj.a.a = "wade";
console.log(obj.a.a); // wade
// 注意：当object只有一层的时候，是深拷贝
let obj = {
  username: 'kobe'
};
let obj2 = Object.assign({},obj);
obj2.username = 'wade';
console.log(obj);//{username: "kobe"}

2、Array.prototype.concat() 修改新对象会改到原对象

3、Array.prototype.slice()

js 复制代码 
let a = ["1", "2", {
	age: 18,
	sex: "man",
	sports: ["football", "running", "swimming"]
}];

let b = a.slice(2);
console.log(b);
// [{
// 	age: 18,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// }];
b[0].age = "19"
console.log(a);
// ["1","20",{
// 	age: 19,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// }];
console.log(b);
// [{
// 	age: 19,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// }];

四、深拷贝实现方式

1、JSON.parse(JSON.stringify())

js 复制代码 
let a = {
	age: 18,
	sex: "man",
	sports: ["football", "running", "swimming"]
};

let b = JSON.parse(JSON.stringify(a));
console.log(a);
//  {
// 	age: 18,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// };
console.log(b);
//  {
// 	age: 18,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// };
a.sports.push("basketball")
console.log(a);
//  {
// 	age: 18,
// 	sex: "man",
// 	sports:["football","running","swimming","basketball"]
// };
console.log(b);
//  {
// 	age: 18,
// 	sex: "man",
// 	sports:["football","running","swimming"]
// };

对数组深拷贝之后，改变原数组不会影响到拷贝之后的数组。

但是该方法有以下几个问题。

(1)、会忽略 undefined

(2)、会忽略 symbol

(3)、不能序列化函数

(4)、不能解决循环引用的对象

(5)、不能正确处理new Date()

(6)、不能处理正则

2、手写递归方法

3、函数库lodash

js 复制代码 
const _ = require('lodash');
let originalObject = {
  name: 'John',
  age: 30,
  address: {
    city: 'Beijing',
    zipCode: '10001'
  }
};
let clonedObject = _.cloneDeep(originalObject);
console.log(clonedObject); // 输出: { name: 'John', age: 30, address: { city: 'Beijing', zipCode: '10001' } }
console.log(clonedObject === originalObject); // 输出: false，表明两个对象不是同一个
console.log(clonedObject.address === originalObject.address); // 输出: false，表明地址对象也是深拷贝的

五、手写深拷贝

面试简版：

js 复制代码 
function deepClone(obj) {
  // 如果是 值类型 或 null，则直接return
  if(typeof obj !== 'object' || obj === null) {
    return obj
  }

  // 定义结果对象
  let copy = {}

  // 如果对象是数组，则定义结果数组
  if(obj instanceof Array) {
    copy = []
  }

  // 遍历对象的key
  for(let key in obj) {
    // 如果key是对象的自有属性
    if(obj.hasOwnProperty(key)) {
      // 递归调用深拷贝方法
      copy[key] = deepClone(obj[key])
    }
  }

  return copy
}

调用深拷贝方法，若属性为值类型，则直接返回；若属性为引用类型，则递归遍历。这就是我们在解这一类题时的核心的方法。

进阶版:

  • 解决拷贝循环引用问题
  • 解决拷贝对应原型问题
js 复制代码 
// 递归拷贝 (类型判断)
function deepClone(value,hash = new WeakMap){ // 弱引用，不用map，weakMap更合适一点
  // null 和 undefiend 是不需要拷贝的
  if(value == null){ return value;}
  if(value instanceof RegExp) { return new RegExp(value) }
  if(value instanceof Date) { return new Date(value) }
  // 函数是不需要拷贝
  if(typeof value != 'object') return value;
  let obj = new value.constructor(); // [] {}
  // 说明是一个对象类型
  if(hash.get(value)){
    return hash.get(value)
  }
  hash.set(value,obj);
  for(let key in value){ // in 会遍历当前对象上的属性 和 __proto__指代的属性
    // 补拷贝 对象的__proto__上的属性
    if(value.hasOwnProperty(key)){
      // 如果值还有可能是对象 就继续拷贝
      obj[key] = deepClone(value[key],hash);
    }
  }
  return obj
  // 区分对象和数组 Object.prototype.toString.call
}
js 复制代码 
// test

var o = {};
o.x = o;
var o1 = deepClone(o); // 如果这个对象拷贝过了 就返回那个拷贝的结果就可以了
console.log(o1);

完整版：

js 复制代码 
const getType = obj => Object.prototype.toString.call(obj);

const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null;

const canTraverse = {
  '[object Map]': true,
  '[object Set]': true,
  '[object Array]': true,
  '[object Object]': true,
  '[object Arguments]': true,
};
const mapTag = '[object Map]';
const setTag = '[object Set]';
const boolTag = '[object Boolean]';
const numberTag = '[object Number]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const regexpTag = '[object RegExp]';
const funcTag = '[object Function]';

const handleRegExp = (target) => {
  const { source, flags } = target;
  return new target.constructor(source, flags);
}

const handleFunc = (func) => {
  // 箭头函数直接返回自身
  if(!func.prototype) return func;
  const bodyReg = /(?<={)(.|\n)+(?=})/m;
  const paramReg = /(?<=\().+(?=\)\s+{)/;
  const funcString = func.toString();
  // 分别匹配 函数参数 和 函数体
  const param = paramReg.exec(funcString);
  const body = bodyReg.exec(funcString);
  if(!body) return null;
  if (param) {
    const paramArr = param[0].split(',');
    return new Function(...paramArr, body[0]);
  } else {
    return new Function(body[0]);
  }
}

const handleNotTraverse = (target, tag) => {
  const Ctor = target.constructor;
  switch(tag) {
    case boolTag:
      return new Object(Boolean.prototype.valueOf.call(target));
    case numberTag:
      return new Object(Number.prototype.valueOf.call(target));
    case stringTag:
      return new Object(String.prototype.valueOf.call(target));
    case symbolTag:
      return new Object(Symbol.prototype.valueOf.call(target));
    case errorTag: 
    case dateTag:
      return new Ctor(target);
    case regexpTag:
      return handleRegExp(target);
    case funcTag:
      return handleFunc(target);
    default:
      return new Ctor(target);
  }
}

const deepClone = (target, map = new WeakMap()) => {
  if(!isObject(target)) 
    return target;
  let type = getType(target);
  let cloneTarget;
  if(!canTraverse[type]) {
    // 处理不能遍历的对象
    return handleNotTraverse(target, type);
  }else {
    // 这波操作相当关键，可以保证对象的原型不丢失！
    let ctor = target.constructor;
    cloneTarget = new ctor();
  }

  if(map.get(target)) 
    return target;
  map.set(target, true);

  if(type === mapTag) {
    //处理Map
    target.forEach((item, key) => {
      cloneTarget.set(deepClone(key, map), deepClone(item, map));
    })
  }

  if(type === setTag) {
    //处理Set
    target.forEach(item => {
      cloneTarget.add(deepClone(item, map));
    })
  }

  // 处理数组和对象
  for (let prop in target) {
    if (target.hasOwnProperty(prop)) {
      cloneTarget[prop] = deepClone(target[prop], map);
    }
  }
  return cloneTarget;
}
相关推荐
小_太_阳4 分钟前
Scala_【1】概述
开发语言·后端·scala·intellij-idea
向宇it5 分钟前
【从零开始入门unity游戏开发之——unity篇02】unity6基础入门——软件下载安装、Unity Hub配置、安装unity编辑器、许可证管理
开发语言·unity·c#·编辑器·游戏引擎
智慧老师14 分钟前
Spring基础分析13-Spring Security框架
java·后端·spring
lxyzcm15 分钟前
C++23新特性解析：[[assume]]属性
java·c++·spring boot·c++23
轻口味27 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami30 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
古希腊掌管学习的神42 分钟前
[LeetCode-Python版]相向双指针——611. 有效三角形的个数
开发语言·python·leetcode
赵钰老师42 分钟前
【R语言遥感技术】“R+遥感”的水环境综合评价方法
开发语言·数据分析·r语言
V+zmm101341 小时前
基于微信小程序的乡村政务服务系统springboot+论文源码调试讲解
java·微信小程序·小程序·毕业设计·ssm
就爱学编程1 小时前
重生之我在异世界学编程之C语言小项目：通讯录
c语言·开发语言·数据结构·算法
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库