带你读《现代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

相关文章
|
7天前
|
JSON JavaScript 前端开发
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
JavaScript 中,理解数据拷贝的深浅至关重要。浅拷贝(如扩展运算符`...`、`Object.assign()`)仅复制对象第一层,共享内部引用,导致修改时产生意外联动。深拷贝(如自定义递归函数、`_.cloneDeep`或`JSON.parse(JSON.stringify())`)创建独立副本,确保数据隔离。选择哪种取决于性能、数据独立性和资源需求。深拷贝虽慢,但确保安全;浅拷贝快,但需小心引用共享。在面试中,理解这些概念及其应用场景是关键。
15 4
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
|
9天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
18 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
22小时前
|
前端开发 JavaScript 安全
解锁 JavaScript ES6:函数与对象的高级扩展功能
解锁 JavaScript ES6:函数与对象的高级扩展功能
|
5天前
|
JavaScript 前端开发
JS中浅拷贝和深拷贝的区别
JS中浅拷贝和深拷贝的区别
8 0
|
27天前
|
JSON JavaScript 前端开发
总结JavaScript中的深拷贝与浅拷贝
总结JavaScript中的深拷贝与浅拷贝
|
1月前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
20天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
9 0
|
23天前
|
JavaScript 前端开发 安全
深入探索JavaScript中的structuredClone:现代深拷贝的解密指南
深入探索JavaScript中的structuredClone:现代深拷贝的解密指南
14 0
|
1月前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
162 63