带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(2)

简介: 带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(2)

带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(1)https://developer.aliyun.com/article/1349578?groupCode=tech_library


3) 性能优化

深拷贝是一项相对耗费性能的操作,特别是在处理大型对象或嵌套层次很深的对象时。为了提高性能,可以考虑以下几个优化策略:

 

  • 循环拷贝:使用循环代替递归,减少函数调用的开销。这可以通过迭代对象的属性并复制它们来实现。
  • 使用 JSON 序列化与反序列化:JSON.stringify() 方法可以将对象序列化为字符串,JSON.parse() 方法可以将字符串解析为对象。使用这两个方法可以快速实现深拷贝,但它的适用范围受限,无法处理特殊类型(如函数和正则表达式)和循环引用。
  • 使用库函数:许多优秀的 JavaScript 库(如 Lodash、Underscore)提供了高性能的深拷贝函数。这些库经过充分测试和优化,可以满足大多数深拷贝需求。

4 完整的深拷贝实现示例

下面是一个完整的深拷贝函数的实现,综合考虑了上述的处理方法:

 

// 也可以用WeakMap优化function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  const clone = Array.isArray(obj) ? [] : {};
  hash.set(obj, clone);
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
  if (obj instanceof RegExp) {
    const flags = obj.flags;
    const pattern = obj.source;
    return new RegExp(pattern, flags);
  }
  if (typeof obj === 'function') {
    return cloneFunction(obj);
  }
  const keys = [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)];
  for (const key of keys) {
    clone[key] = deepClone(obj[key], hash);
  }
  return clone;}
function cloneFunction(func) {
  const body = func.toString();
  const parameters = body.match(/(.∗?)(.*?)/)[1];
  const functionBody = body.substring(body.indexOf('{') + 1, body.lastIndexOf('}'));
  return new Function(parameters, functionBody);}

2. 浅拷贝的实现

与深拷贝不同,浅拷贝只复制对象的引用,而不创建对象的副本。下面是几种常见的浅拷贝方法:

1)Object.assign()

Object.assign() 方法用于将所有可枚举属性从一个或多个源对象复制到目标对象,并返回目标对象。它只会复制源对象的属性的引用,而不是属性的值。

 

const sourceObj = { name:
 'John', age: 25 };const targetObj = Object.assign({}, sourceObj);
console.log(targetObj); // 输出:{ name: 'John', age: 25 }

 

在上述代码中,我们使用 Object.assign() 方法将源对象的属性复制到目标对象中。targetObj sourceObj 的浅拷贝副本。

2)展开语法(Spread Syntax)

展开语法(Spread Syntax)可以用于将一个对象的所有属性展开到另一个对象中。

const sourceObj = { name: 'John', age: 25 };const targetObj = { ...sourceObj };
console.log(targetObj); // 输出:{ name: 'John', age: 25 }

在上述代码中,我们使用展开语法将源对象的所有属性展开到目标对象中。targetObj sourceObj 的浅拷贝副本。


 

带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(3)https://developer.aliyun.com/article/1349576?groupCode=tech_library

相关文章
|
26天前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
26 2
2024年5月node.js安装(winmac系统)保姆级教程
|
2月前
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
51 4
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
42 4
|
3月前
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
24 3
|
2月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
49 0
|
4月前
|
JavaScript NoSQL 前端开发
|
4月前
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
43 2
|
4月前
|
JavaScript 前端开发
JavaScript中的深拷贝和浅拷贝的实现讲解
在JavaScript中,浅拷贝与深拷贝用于复制对象。浅拷贝仅复制基本类型属性,对于引用类型仅复制引用,导致双方共享同一数据,一方修改会影响另一方。深拷贝则完全复制所有层级的数据,包括引用类型,确保双方独立。浅拷贝可通过简单属性赋值实现,而深拷贝需递归复制各层属性以避免共享数据。
75 1
|
4月前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
32 0
|
4月前
|
JavaScript 前端开发
js中浅拷贝,深拷贝的实现
js中浅拷贝,深拷贝的实现
35 0