深拷贝和浅拷贝

深拷贝

新的对象

实现方式

1.利用JSON.stringify将对象转成JSON字符串,再用JSON.parse把字符串解析成对象

javascript 复制代码
JSON.parse(JSON.stringify())

2.lodash的_.cloneDeep

3.手写递归循环

javascript 复制代码
function deepClone(obj, hash = new WeakMap()) {
  if (obj === null) return obj // 如果是null或者undefined我就不进行拷贝操作
  if (obj instanceof Date) return new Date(obj)
  if (obj instanceof RegExp) return new RegExp(obj)
  // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
  if (typeof obj !== "object") return obj
  // 是对象的话就要进行深拷贝
  if (hash.get(obj)) return hash.get(obj)
  let cloneObj = new obj.constructor()
  // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
  hash.set(obj, cloneObj)
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 实现一个递归拷贝
      cloneObj[key] = deepClone(obj[key], hash)
    }
  }
  return cloneObj
}
相关推荐
程序饲养员18 分钟前
ReactRouter7.5: NavLink 和 Link 的区别是什么?
前端·javascript·react.js
小小小小宇1 小时前
CSS 层叠上下文总结
前端
拉不动的猪1 小时前
设计模式之------命令模式
前端·javascript·面试
Json____1 小时前
springboot框架集成websocket依赖实现物联网设备、前端网页实时通信!
前端·spring boot·websocket·实时通信
uhakadotcom1 小时前
Bun vs Node.js:何时选择 Bun?
前端·javascript·面试
前端snow1 小时前
前端工程师看docker是什么?
前端·javascript·docker
_XU2 小时前
使用FFmpeg和MediaMTX实现本地推流
前端·ffmpeg·音视频开发
鱼樱前端2 小时前
技术路线升级:从“纯前端”到“高价值前端”
前端·javascript
堕落年代2 小时前
Uniapp当中的async/await的作用
前端·javascript·uni-app
酱酱们的每日掘金3 小时前
一键连接 6000 + 应用dify MCP 插件指南、谷歌 AI 编程产品一网打尽、MCP玩出花了丨AI Coding 周刊第 4 期
前端·后端·ai编程·mcp