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
*/


相关文章
|
11天前
|
前端开发 JavaScript 安全
javascript:void(0);用法及常见问题解析
【6月更文挑战第3天】JavaScript 中的 `javascript:void(0)` 用于创建空操作或防止页面跳转。它常见于事件处理程序和超链接的 `href` 属性。然而,现代 web 开发推荐使用 `event.preventDefault()` 替代。使用 `javascript:void(0)` 可能涉及语法错误、微小的性能影响和XSS风险。考虑使用更安全的替代方案,如返回 false 或箭头函数。最佳实践是保持代码清晰、安全和高性能。
18 0
|
18小时前
|
存储 JavaScript 前端开发
【JavaScript】JavaScript 中的 Class 类:全面解析
【JavaScript】JavaScript 中的 Class 类:全面解析
5 1
|
19小时前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
7 2
|
19小时前
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
7 2
|
19小时前
|
自然语言处理 JavaScript 前端开发
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
7 3
|
22小时前
|
JavaScript Linux 开发者
【Node.js】从基础到精通(二)—— Path 模块全解析
【Node.js】从基础到精通(二)—— Path 模块全解析
6 0
|
22小时前
|
JavaScript 安全 前端开发
【Node.js】从入门到精通(一)—— fs 模块全解析
【Node.js】从入门到精通(一)—— fs 模块全解析
3 0
|
1天前
|
SQL 自然语言处理 JavaScript
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
ES6,作为ECMAScript 2015的简称,标志着JavaScript编程语言的一个重要进化节点。它不是渐进的变化,而是一次飞跃式的更新,为开发者带来了一系列强大的新特性与语法糖,极大提升了代码的简洁性、可读性和运行效率。从新的变量声明方式let与const,到优雅的箭头函数、模板字符串,再到让对象操作更为灵活的解构赋值与增强的对象字面量,ES6的每项改进都旨在让JavaScript适应日益复杂的应用场景,同时保持其作为脚本语言的活力与魅力。本文是深入探索这些核心特性的起点,为你铺开一条通向高效、现代JavaScript编程实践
19 0
|
3天前
|
JavaScript Serverless
JS实现递归功能
JS实现递归功能
|
6天前
|
JavaScript 前端开发
深入解析JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法、继承机制以及面向对象编程的优势
【6月更文挑战第12天】本文探讨JavaScript中的面向对象编程,解释了对象的基本概念,如属性和方法,以及基于原型的结构。介绍了创建对象的四种方法:字面量、构造函数、Object.create()和ES6的class关键字。还阐述了继承机制,包括原型链和ES6的class继承,并强调了面向对象编程的代码复用和模块化优势。
17 0

推荐镜像

更多