【JavaScript】浅拷贝与深拷贝

引言

浅拷贝、深拷贝是对引用类型而言的。

引用类型的变量对应一个栈区地址,这个栈区地址处存储的值是存放的真正的数据的堆区地址。

基本数据类型的变量也对应一个栈区地址,但是该地址存储的是其真正的值。

let a = b发生了什么?

在这里插入图片描述

let obj2 = obj1发生了什么?

在这里插入图片描述

JavaScript的数据类型:

在这里插入图片描述

什么是浅拷贝?

浅拷贝(shallow copy)创建的新对象拷贝的是原对象的属性的栈区地址。

在这里插入图片描述

图中同名变量的栈区地址相同,不同名变量的栈区地址不同。

a_ab_b都是复制了原来栈区地址的值,对_a的修改不会影响a,对_b的修改却会影响b,因为它们相当于let _b = b的关系。

什么是深拷贝?

深拷贝(deep copy)拷贝对象的堆区数据为新副本,如此新旧对象不会互相影响。

在这里插入图片描述

浅拷贝的方法有哪些?

1.JavaScript中对象的合并,Object.assign本身是浅拷贝。

const originalObject = {a:1,b:{c:1}}
const shallowCopy = Object.assign({}, originalObject);
console.log(shallowCopy === originalObject);//false,比较的是栈区地址
shallowCopy.a = 2;
shallowCopy.b.c = 2;
console.log(originalObject.a);// 1
console.log(originalObject.b.c);// 2

缺陷:Object.assign不会拷贝继承属性、不可枚举属性。

2.展开语法

let newObj = {...obj}

3.数组的cancat方法

const newArr = oldArr.concat([])

4.数组的slice方法

const newArr = oldArr.slice(start[,end]);

5.浅拷贝细致点看,是先创建一个新对象,然后将原对象的属性直接复制到新对象,所以也可以自己写一个浅拷贝函数:

function shallowCopy(obj) {if(obj === null || typeof obj !== 'object') return obj;const newObj = {};for (let key in obj) {// 会遍历原型链上的可枚举属性obj.hasOwnProperty(key) && (newObj[key] = obj[key]);}return newObj;
}
// Object.prototype.d = 1;
const obj1 = { a: 1, b: { c: 1 } };
const obj2 = shallowCopy(obj1);
obj2.a = 2;
obj2.b.c = 2;

也可以不用每次判断是否是自有属性:

function shallowCopy(obj) {if(obj === null || typeof obj !== 'object') return obj;const newObj = {};Object.getOwnPropertyNames(obj).forEach(key=>{newObj[key] = obj[key];})return newObj;
}

6.lodash库的浅拷贝方法

如何实现深拷贝?

1.JSON.stringify()JSON.parse()

function deepClone(obj){if(obj === null || typeof obj !== 'object') return obj;return JSON.parse(JSON.stringify(obj));
}

缺陷:

  • 丢失function、undefined、Symbol这几种类型的键值对
  • NaN、Infinity的值会转为null
  • Date会变为字符串
  • RegExp会变成空对象
  • 不能拷贝不可枚举属性及原型链上的属性
  • 不能解决循环引用

2.lodash库的深拷贝方法

3.手动实现深拷贝函数基础版:

function deepClone(obj) {if(obj === null || typeof obj !== 'object') return obj;const newObj = new obj.constructor();for (let key in obj) {if (obj.hasOwnProperty(key)){newObj[key] = typeof obj[key] === "object" ? arguments.callee(obj[key]) : obj[key];}}return newObj;
}

const newObj = new obj.constructor()相比于使用{},保持了原型链的继承。

缺陷:

  • 不能处理循环引用,可能会导致堆栈溢出
  • ArrayDateRegExpMapSet对象的处理不好
  • 不能拷贝不可枚举属性和Symbol类型属性

4.手动实现深拷贝函数进阶版:

//判断是否为复杂数据类型
const isComplexDataType = obj => (typeof obj === 'object' || typeof obj === 'function') && (obj !== null);const deepClone = function(obj,hash = new WeakMap()){if(hash.has(obj)) return hash.get(obj);//如果参数为Date, RegExp, Set, Map, WeakMap, WeakSet等引用类型,则直接生成一个新的实例let type = [Date,RegExp,Set,Map,WeakMap,WeakSet];if(type.includes(obj.constructor)) return new obj.constructor(obj);//遍历传入参数所有属性描述符let allDesc = Object.getOwnPropertyDescriptors(obj);//继承原型let cloneObj = Object.create(Object.getPrototypeOf(obj),allDesc);// 获取所有 Symbol 类型键let symKeys = Object.getOwnPropertySymbols(obj);// 拷贝 Symbol 类型键对应的属性if (symKeys.length > 0) {symKeys.forEach(symKey => {cloneObj[symKey] = isComplexDataType(obj[symKey]) ? deepClone(obj[symKey], hash) : obj[symKey]})}// 哈希表设值hash.set(obj,cloneObj);//Reflect.ownKeys(obj)拷贝不可枚举属性和符号类型for(let key of Reflect.ownKeys(obj)){// 如果值是引用类型并且非函数则递归调用deepClonecloneObj[key] =(isComplexDataType(obj[key]) && typeof obj[key] !== 'function') ? deepClone(obj[key],hash) : obj[key];}return cloneObj;
};

参考资料:

  • JavaScript中浅拷贝和深拷贝的区别与实现
  • JavaScript深拷贝和浅拷贝看这篇就够了
  • 关于堆栈的讲解(我见过的最经典的)
  • 深入理解js数据类型与堆栈内存
  • js中深浅拷贝的实现方式(含图解原理)
  • JavaScript深拷贝看这篇就行了!(实现完美的ES6+版本)
  • 【JavaScript】arguments.callee的作用及替换方案
  • [javascript核心-15] 手写完美深拷贝代码实现🍌
  • JS中JSON序列化JSON.stringify的坑点和处理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/100379.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

this关键字在不同上下文中的值是如何确定的?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

vsftpd使用

安装vsftpd yum install vsftpd -y版本:3.0.2三种访问方式:匿名访问、本地用户访问、虚拟用户访问 虚拟用户访问配置 # 1. 配置虚拟用户 cd /etc/vsftpd mv vsftpd.conf vsftpd.conf.bak grep -v "#" vsftpd.conf.bak > vsftpd.conf ech…

利用互斥锁实现多个线程写一个文件

代码 #include <stdio.h> #include <pthread.h> #include <string.h> #include <unistd.h>FILE *fp;//线程函数1 void *wrfunc1(void *arg); //线程函数2 void *wrfunc2(void *arg); //线程函数3 void *wrfunc3(void *arg);//静态创建互斥锁 pthread_…

Python爬虫技术系列-03requests库案例-完善

Python爬虫技术系列-03requests库案例 参考1 Requests基本使用1.1 Requests库安装与使用1.1.1 Requests库安装1.1.2 Rrequests库介绍1.1.3 使用Requests一般分为三个步骤1.1.4 requests的公共方法 2 Requests库使用案例2.1 GET请求携带参数和headers2.2 POST请求&#xff0c;写…

(8)SpringMVC中的视图类型及其特点,以及视图控制器view-controller的配置

SpringMVC的视图 转发和重定向的区别及其原理,参考文章 视图类型及特点 视图的作用就是将Model中的数据渲染到页面上并展示给用户,SpringMVC中视图对应的View接口有三种实现类对应三种视图解析器 默认有转发视图InternalResourceView和重定向视图RedirectView以及Thymeleaf…

edu 156 div2 c

#include <bits/stdc.h> using namespace std; using ll long long; void solve(){string s;cin>>s;//s s;ll t;cin>>t;//t--;ll pos,k;ll len 0;for(int i 0 ; i < s.length() ; i){if(len s.length() - i > t){pos t - len;//第几个字符k i;…

【接口干货】热门、免费api集合

手机号码归属地&#xff1a;可根据手机号码查询其省市区、运营商区号行政区划代码等信息。 上亿条数据囊括最新的170、166、147等号段&#xff0c;更新及时、准确度高。 短信验证码&#xff1a;可用于登录、注册、找回密码、支付认证等等应用场景。支持三大运营商&#xff0c;…

Cpolar内网穿透工具在windows和Linux上具体使用

Cpolar内网穿透工具在windows和Linux上具体使用 一、Linux上部署的项目通过内网穿透实现外网访问项目二、Windows上部署的项目通过内网穿透实现外网访问项目 一、Linux上部署的项目通过内网穿透实现外网访问项目 一个免费的内网穿透方式&#xff0c;简单方便。 网址&#xff1a…

CCF中国开源大会专访|毛晓光:“联合”是开源走向“共赢”的必由之路

受访嘉宾 | 毛晓光 记者 | 朱珂欣 2023 CCF 中国开源大会&#xff08; CCF ChinaOSC &#xff09;拟于 2023 年 10 月 21 日至 22 日在湖南省长沙市北辰国际会议中心召开。 作为第二届 CCF 中国开源大会&#xff0c;本届大会将组织特邀报告、高峰论坛和领域分论坛等不同类…

智能电表怎么远程读数?

随着科技的飞速发展&#xff0c;智能电表已经成为了家庭用电管理的重要工具。相比传统的电表&#xff0c;智能电表具有远程读数、自动抄表、用电分析等功能&#xff0c;让家庭用电更加便捷、智能。那么&#xff0c;智能电表是如何实现远程读数的呢?下面小编来为大家讲解一下智…

JVM 运行时数据区和垃圾收集算法

在 《深入理解 Java 虚拟机》一书中&#xff0c;作者将运行时数据区和垃圾收集算法放在开头章节&#xff0c;说明了这两个知识点是进一步学习 JVM 的基础知识点&#xff0c;相比后续的 垃圾收集器和 JMM&#xff0c;它也更加的简单。 运行时数据区 运行时数据区是《Java 虚拟…

Centos7使用nginx搭建rtmp流媒体服务器

为什么写这篇文章 2023年10月份&#xff0c;公司系统中有个需求&#xff0c;需要使用摄像头记录工程师在维修设备时的工作状态&#xff0c;找到了一家做执法记录仪的厂商&#xff0c;通过厂商发过来的文档了解到该执法记录仪支持通过rtmp协议推流至服务器&#xff0c;第一次接…

【SQL】MySQL中的存储引擎、事务、锁、日志

存储引擎&#xff1a; 数据库管理系统&#xff08;DBMS&#xff09;使用数据存储引擎进行创建、查询、更新和删除数据。 MySQL5.5之前默认的存储引擎是MyISAM&#xff0c;5.5及之后版本默认的存储引擎是InnoDB。(my.ini中指定的) MyISAM&#xff1a;不支持事务&#xff0c;不支…

F. Vasilije Loves Number Theory

Problem - F - Codeforces 思路&#xff1a;分析一下题意&#xff0c;对于第一种操作来说&#xff0c;每次乘以x&#xff0c;那么nn*x&#xff0c;然后问是否存在一个a使得gcd(n,a)1并且n*a的约数个数等于n&#xff0c;有最大公约数等于1我们能够知道其实这两个数是互质的&…

『Linux项目自动化构建工具』make/Makefile

前言 如题可知,make/Makefile为在Linux下的项目自动化构建工具; 在上一篇文章『Linux - gcc / g』c程序翻译过程 中讲解了C/C程序的翻译过程; 而make/Makefile即可以看成,是Makefile在使用gcc/g使在Linux环境下能够更好的高效率的进行项目构建; 在此之前首先要对make/Makefile…

【PostgreSQL内核学习(十八)—— (数据库表参数)】

数据库表参数 default_reloptions 函数案例 声明&#xff1a;本文的部分内容参考了他人的文章。在编写过程中&#xff0c;我们尊重他人的知识产权和学术成果&#xff0c;力求遵循合理使用原则&#xff0c;并在适用的情况下注明引用来源。 本文主要参考了《PostgresSQL数据库内核…

【2023研电赛】安谋科技企业命题特别奖:面向独居老人的智能居家监护系统

本文为2023年第十八届中国研究生电子设计竞赛安谋科技企业命题特别奖分享&#xff0c;参加极术社区的【有奖活动】分享2023研电赛作品扩大影响力&#xff0c;更有丰富电子礼品等你来领&#xff01;&#xff0c;分享2023研电赛作品扩大影响力&#xff0c;更有丰富电子礼品等你来…

Meta Semantic Template for Evaluation of Large Language Models

本文是LLM系列文章&#xff0c;针对《Meta Semantic Template for Evaluation of Large Language Models》的翻译。 大型语言模型评估的元语义模板 摘要1 引言2 相关工作3 方法4 实验5 结论 摘要 大型语言模型(llm)是否真正理解语言的语义&#xff0c;或者只是记住训练数据?…

dart的Websocket为什么找不到onOpen方法?

我主要使用的是JAVA&#xff0c;而JAVA使用Websocket时&#xff0c;Websocket一定会有个onOpen方法。 ClientEndpoint public class WebsocketListener {OnOpenpublic void onOpen(Session session) throws IOException {}OnMessagepublic void onMessage(ByteBuffer byteBuff…

按关键字搜索淘宝商品API接口获取商品销量、优惠价、商品标题等参数示例

关键词搜索商品接口的作用是提供搜索功能&#xff0c;让用户根据关键词在电商平台上搜索商品&#xff0c;并根据搜索条件和偏好获取相关的商品列表和推荐结果&#xff0c;提高用户购物体验和准确度。对于电商平台而言&#xff0c;这个接口也能帮助用户发现更多商品、提升销量和…