(译文)JavaScript基础——JavaScript中的深拷贝
在JavaScript中如何拷贝一个对象?
通过引用调用
function mutate(obj) {obj.a = true;
}
const obj = {a: false};
mutate(obj)
console.log(obj.a); // prints true
mutate可以对obj进行改动,然后外面的obj的值也变化了。
浅拷贝:Object.assign()
一种拷贝方式是这种方法: Object.assign(target, sources...).
const obj = /* ... */;
const copy = Object.assign({}, obj);
但是这种拷贝只是浅拷贝:
function mutateDeepObject(obj) {obj.a.thing = true;
}
const obj = {a: {thing: false}};
const copy = Object.assign({}, obj);
mutateDeepObject(copy)
console.log(obj.a.thing); // prints true
JSON.parse
通过转换为字符串,然后再转回来:
const obj = /* ... */;
const copy = JSON.parse(JSON.stringify(obj));
这样不好的地方是你会处理一个大的字符串,并且无法处理
循环对象:
const x = {};
const y = {x};
x.y = y; // Cycle: x.y.x.y.x.y.x.y.x...
const copy = JSON.parse(JSON.stringify(x)); // throws!
而且像Maps, Sets, RegExps, Dates, ArrayBuffers和其他内置对象序列化的时候可能都有问题。
结构化克隆
它是一种算法,将一个值转换为另外一个值。而且能处理对象循环依赖和大部分的内置对象。比如调用postMessage发消息给window或者WebWorker的时候就用到。
比如像这样:obj是被深拷贝过的
function structuralClone(obj) {return new Promise(resolve => {const {port1, port2} = new MessageChannel();port2.onmessage = ev => resolve(ev.data);port1.postMessage(obj);});
}
const obj = /* ... */;
const clone = await structuralClone(obj);
历史API
如果你用过history.pushState()去构建一个单页应用(SPA),你应该知道你可以根据当前URL保存一个state object。这个state object是结构化拷贝的,并且是同步的。
function structuralClone(obj) {const oldState = history.state;history.replaceState(obj, document.title);const copy = history.state;history.replaceState(oldState, document.title);return copy;
}
const obj = /* ... */;
const clone = structuralClone(obj);
不好的地方是Safari限制replaceState的调用次数。
通知API
function structuralClone(obj) {return new Notification('', {data: obj, silent: true}).data;
}
const obj = /* ... */;
const clone = structuralClone(obj);
性能如何
结论是:
1 如果你不处理对象依赖和内置对象,可以直接用 JSON.parse(JSON.stringify())
2 如果你要可靠的跨浏览器支持:用MessageChannel
原文:
https://dassur.ma/things/deep-copy/#call-by-reference
作者知乎/公众号:前端疯
转载于:https://www.cnblogs.com/xunxing/p/a255ce21d8d85939ec4ce56def8cc0b0.html
(译文)JavaScript基础——JavaScript中的深拷贝相关推荐
- VN-SGG JavaScript 基础(中)
[VN-SGG] JavaScript 基础(中) JavaScript视频课程笔记[入门到精通],这只是笔记!!! 主要内容: this,对象,原型对象,垃圾回收,数组: call.apply,ar ...
- JavaScript基础函数体中的唯一var模式(002)
全局变量是不好的.所以在声名变量的时候,应该采用函数体中的唯一var模式(Single var Pattern).这个模式有不少好处: 提供了一个唯一的地方来查看函数体中声名的变量 在使用一个变量之前 ...
- JavaScript基础: DOM中操作属性以及自定义属性
上一篇聊了一些常用的事件以及演示其如何使用,演示的时候发现一件事情,那就是DOM操作不单是得到元素,还可以修改元素的属性.现在开始如何操作其属性. 普通自带的属性 这些属性是某些标签自带的属性比如sr ...
- JavaScript基础JavaScript的常用编码惯例(007)
采用一定的编码惯例,可以使得项目中的代码提到较高的一致性,可读性和可预测性. 1.缩进 缩 进可以提高代码的可读性.不过错误的缩进也可能导致代码的误读.有人认为缩进应该使用tab,另外的一些人主张采用 ...
- JavaScript基础笔记
今日内容 1. JavaScript基础 JavaScript: * 概念: 一门客户端脚本语言* 运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎* 脚本语言:不需要编译,直接 ...
- Web前端之JavaScript基础
Web前端之JavaScript基础 JavaScript介绍 变量 变量类型 基本的数据类型Number String Boolean underfined null typeof运算符 引用的数据 ...
- JavaScript-百炼成仙(第1节掌握JavaScript基础1.1-1.21)
文章目录 1.1 第一章 初入宗门 1.2 第二章 直接量 1.3 第三章 数据类型 1.4 第四章 数据类型 扩展内容: 1.5 第五章 基础考核 1.6 第六章 何老 1.7 第七章 对象数据类型 ...
- javascript百炼成仙 第一章 掌握JavaScript基础 1.12 JavaScript运算符
题目一出,真是几家欢喜几家愁,那些复习得好的,自然可以款款而谈,可是那些本身基础就薄弱的弟子,立刻尴尬地说不出话来.甚至有的弟子已经举双手表示要放弃比赛.这些举动立刻引来了场外那些大弟子的哄笑.尤其是 ...
- JavaScript基础之基础
JavaScript基础 JavaScript简介 一个完整的JavaScript实现应该由以下三个部分构成: ECMAScript 标准 DOM 文档对象模型 BOM 浏览器对象模型 JS也是一种面 ...
最新文章
- 【注意事项】论文/申报书格式
- 力扣(LeetCode)刷题,简单题(第14期)
- 如何让squid实现动态缓存
- Java学习笔记之:Java JDBC
- python调用hive与java调用区别_Python操作Hive的两种方法总结
- asp.net core使用serilog将日志推送到腾讯云日志服务
- Spring 中的国际化Message的简单例子(ApplicationContext) 不跟框架集成的版本
- python的缩进规则具体是什么_python语句首字缩进规则
- ubuntu18.04 中个性化配置vim方法
- leetcode python3 简单题191. Number of 1 Bits
- idea 光标 快捷键_IntelliJ Idea 常用快捷键
- SiteSucker Pro for Mac 4.3 强大的扒站神器
- 人工智能基础——2.3.2产生式系统
- 重整晋商雄风,再现汇通天下 -------《晋商》阅读笔记第5-6章
- 服务器虚拟内存最佳设置范围,虚拟内存有什么用?虚拟内存设置多少合适?
- python图像处理:核磁共振图像(3D)的缩放
- android基本布局-TableLayout_表格布局
- poi-tl填充动态word表格数据
- 怎么加入到开源社区,开心做开源
- TP-Link基于亚马逊云科技部署面向运营商的IoT云管平台
热门文章
- php namespace原理作用,php 命名空间(namespace)原理与用法实例小结
- Linux多进程拷贝fork,浅析linux中fork函数
- 哪个网站是计算机知识的,电脑知识网站
- Spring Cloud:Eureka Server控制台
- 评估微型计算机的主要指标,微型计算机的工作过程和主要性能指标.doc
- java遍历文件目录
- 在哪儿能找c语言编程题,C语言程序设计的试题及答案
- php多主写数据,多数据库的配置(从主)
- 文件服务器和客户模式有什么区别,客户端和服务器端编程有什么区别?
- elasticsearch dump 教程