JS深拷贝----采用递归实现(例子+难点解析)

简介: JS深拷贝----采用递归实现(例子+难点解析)

基础知识:


hasOwnProperty(propertyName)方法


作用:检测属性是否为对象的自有属性,如果是,返回true,否者false;


参数propertyName指要检测的属性名;


注意:hasOwnProperty() 只会检查对象的自有属性,对象原型上的属性其不会检测;


代码实现:

function deepCopy(obj) {
  if(typeof obj !== 'object') return
  let newObj = obj instanceof Array ? [] : {}
  for(let key in obj) {
    if(obj.hasOwnProperty(key)) {
      newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key]
    }
  }
  return newObj
}
let jack = {
  name : "jack.ma",
  age:40,
  like:{
      dog:{
          color:'black',
          age:3,
      },
      cat:{
          color:'white',
          age:2
      }
  }
}
let jack2 = deepCopy(jack)
// 比如修改 jack2 中的内容,不会影响到 jack 中的值
jack2.like.dog.color = 'green'
console.log(jack.like.dog.color) // 打印出来的应该是 "black"

难以理解的地方:


这里我举了一个例子来理解 hasOwnProperty


例子:如果你给对象的对象原型上额外绑定属性d,然后再遍历输出对象,你会发现对象原型上的属性也会被输出。因此,为了避免这种情况的发生,我们需要采用 hasOwnProperty 来仅选中对象本身自带的属性。

let p1 = {
  a: 1,
  b: 2,
  c: 3
}
p1.__proto__.d = 4
for(let key in p1) {
  console.log(key + ':' + p1[key])
}
/**
 * a:1
 * b:2
 * c:3
 * d:4
*/


相关文章
|
5天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
5天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
15天前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
21 1
|
1月前
|
算法 Java
Java必刷入门递归题×5(内附详细递归解析图)
Java必刷入门递归题×5(内附详细递归解析图)
21 1
|
1月前
|
自然语言处理 JavaScript 前端开发
Vue.js 深度解析:模板编译原理与过程
Vue.js 深度解析:模板编译原理与过程
|
1月前
|
缓存 JavaScript 网络架构
Vue.js 进阶技巧:keep-alive 缓存组件解析
Vue.js 进阶技巧:keep-alive 缓存组件解析
|
1月前
|
JavaScript 前端开发 API
Vue.js 深度解析:nextTick 原理与应用
Vue.js 深度解析:nextTick 原理与应用
|
1月前
|
JavaScript 前端开发 API
javascript中的浅拷贝和深拷贝
javascript中的浅拷贝和深拷贝
|
1月前
|
JavaScript 前端开发 IDE
JavaScript 中的 structuredClone():详尽解析
您是否知道,现在 JavaScript 中有一种原生的方式可以深拷贝对象?
|
2天前
|
XML 人工智能 Java
Spring Bean名称生成规则(含源码解析、自定义Spring Bean名称方式)
Spring Bean名称生成规则(含源码解析、自定义Spring Bean名称方式)

推荐镜像

更多