深拷贝和浅拷贝

深拷贝

新的对象

实现方式

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
}
相关推荐
JayceM1 小时前
Vue中v-show与v-if的区别
前端·javascript·vue.js
HWL56791 小时前
“preinstall“: “npx only-allow pnpm“
运维·服务器·前端·javascript·vue.js
德育处主任1 小时前
p5.js 掌握圆锥体 cone
前端·数据可视化·canvas
mazhenxiao1 小时前
qiankunjs 微前端框架笔记
前端
无羡仙2 小时前
事件流与事件委托:用冒泡机制优化前端性能
前端·javascript
秃头小傻蛋2 小时前
Vue 项目中条件加载组件导致 CSS 样式丢失问题解决方案
前端·vue.js
CodeTransfer2 小时前
今天给大家搬运的是利用发布-订阅模式对代码进行解耦
前端·javascript
阿邱吖2 小时前
form.item接管受控组件
前端
韩劳模2 小时前
基于vue-pdf实现PDF多页预览
前端
鹏多多2 小时前
js中eval的用法风险与替代方案全面解析
前端·javascript