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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析DNS,个人版 1个月
全局流量管理 GTM,标准版 1个月
简介: 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
*/


相关文章
|
4天前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
2天前
|
Rust JavaScript 前端开发
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
|
4天前
|
运维 Cloud Native JavaScript
云端新纪元:云原生技术深度解析深入理解Node.js事件循环及其在异步编程中的应用
【8月更文挑战第27天】随着云计算技术的飞速发展,云原生已成为推动现代软件开发和运维的关键力量。本文将深入探讨云原生的基本概念、核心价值及其在实际业务中的应用,帮助读者理解云原生如何重塑IT架构,提升企业的创新能力和市场竞争力。通过具体案例分析,我们将揭示云原生技术背后的哲学思想,以及它如何影响企业决策和操作模式。
|
5天前
|
JSON JavaScript 前端开发
JS逆向 AST 抽象语法树解析与实践
JS逆向 AST 抽象语法树解析与实践
14 2
|
5天前
|
JavaScript 前端开发 安全
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
18 2
|
26天前
|
存储 NoSQL Redis
redis 6源码解析之 object
redis 6源码解析之 object
49 6
|
2天前
|
监控 网络协议 Java
Tomcat源码解析】整体架构组成及核心组件
Tomcat,原名Catalina,是一款优雅轻盈的Web服务器,自4.x版本起扩展了JSP、EL等功能,超越了单纯的Servlet容器范畴。Servlet是Sun公司为Java编程Web应用制定的规范,Tomcat作为Servlet容器,负责构建Request与Response对象,并执行业务逻辑。
Tomcat源码解析】整体架构组成及核心组件
|
9天前
|
测试技术 Python
python自动化测试中装饰器@ddt与@data源码深入解析
综上所述,使用 `@ddt`和 `@data`可以大大简化写作测试用例的过程,让我们能专注于测试逻辑的本身,而无需编写重复的测试方法。通过讲解了 `@ddt`和 `@data`源码的关键部分,我们可以更深入地理解其背后的工作原理。
11 1
|
19天前
|
开发者 Python
深入解析Python `httpx`源码,探索现代HTTP客户端的秘密!
深入解析Python `httpx`源码,探索现代HTTP客户端的秘密!
51 1
|
19天前
|
开发者 Python
深入解析Python `requests`库源码,揭开HTTP请求的神秘面纱!
深入解析Python `requests`库源码,揭开HTTP请求的神秘面纱!
72 1

推荐镜像

更多
下一篇
云函数