前端手写源码系列(三）——手写_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;
}
相关推荐
Mxuan几秒前
vscode webview 插件开发（精装篇）
前端
Mxuan1 分钟前
vscode webview 插件开发（交付篇）
前端
Mxuan2 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录3 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee3 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我3 分钟前
React 开发通关指南：用 HTML 的思维写 JS🚀🚀
前端·react.js·html
guojl4 分钟前
深度解读jdk8 ConcurrentHashMap设计与源码
java
Mxuan5 分钟前
vscode webview 插件开发（毛坯篇）
前端
FogLetter6 分钟前
前端性能优化：深入理解回流与重绘
前端·css
m0_6873998411 分钟前
写一个Ununtu C++ 程序，调用ffmpeg API， 来判断一个数字电影的视频文件mxf 是不是Jpeg2000？
开发语言·c++·ffmpeg
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！03Coze扣子平台完整体验和实践（附国内和国际版对比）04华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南05免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解072024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理08C#调用WechatOCR.exe实现本地OCR文字识别09DeepSeek各版本说明与优缺点分析10Coze平台 创建AI智能体的详细步骤指南