javaScript 深浅拷贝

javaScript深浅拷贝

在这里插入图片描述

浅拷贝

自己创建一个新的对象,来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象,但如果属性是引用数据类型,复制的就是内存中的地址,如果其中一个对象改变了这个内存中的地址,肯定会影响到另一个对象。

object.assign

object.assign是ES6中object 的一个方法该方法可以用于 JS 对象的合并等多个用途其中一个用途就是可以进行浅拷贝

object.assign 的语法为:0bject.assign(target,..sources)
let target = {}
let source = {a: {b: 1}}
Object.assign(target,source)
console.log(target)
source.a.b = 10
console.log(source)
console.log(target)

输出:

{ a: { b: 1 } }
{ a: { b: 10 } }
{ a: { b: 10 } }

object.assign 特性

  • 它不会拷贝对象的继承属性
  • 它不会拷贝对象的不可枚举的属性
  • 可以拷贝 Symbol类型的属性
let obj1 = {a: {b: 1}, sym: Symbol(1)}
Object.defineProperty(obj1,"innumerable",{value:'不可枚举类型',enumerable: false
})let obj2 = {}
Object.assign(obj2,obj1)
obj1.a.b = 2console.log("obj1",obj1)
console.log("obj2",obj2)

在这里插入图片描述

扩展运算符 …

/*对象的拷贝 */
let obj = {a: 1, b: {c: 1}}
let obj2 = {...obj}
obj.a = 2
console.log(obj) //{a:2,b:{c:1}} console.log(obj2); //{a:1,b:{c:1}}
obj.b.c = 2
console.log(obj) //{a:2,b:{c:2}} console.log(obj2); //{a:1,b:{c:2}}
/*数组的拷贝 */
let arr = [1, 2, 3]
let newArr = [...arr];//跟arr.slice()是一样的效果

输出

{ a: 2, b: { c: 1 } }
{ a: 2, b: { c: 2 } }

concat 拷贝数组

数组的 concat 方法其实也是浅拷贝

let arr = [1, 2, 3];
let newArr = arr.concat();
newArr[1] = 100
console.log(arr); // [ 1, 2, 3 ]
console.log(newArr);//[1, 100, 3 ]
[ 1, 2, 3 ]  
[ 1, 100, 3 ]

slice 拷贝数组

slice 方法仅仅针对数组类型

slice 的语法为:arr.slice(begin,end);
let arr = [1, 2, {val: 4}];
let newArr = arr.slice();
newArr[2].val = 1000;
console.log(arr);//[1,2,{val: 1000 }]

输出

[ 1, 2, { val: 1000 } ]

浅拷贝示例

const shallowClone = (target) => {if (typeof target === 'object' && target !== null) {const cloneTarget = Array.isArray(target) ? [] : {};for (let prop in target) {if (target.hasOwnProperty(prop)) {cloneTarget[prop] = target[prop]return cloneTarget;} else {return target}}}
}

浅拷贝总结

浅拷贝只是创建了一个新的对象,复制了原有对象的基本类型的值
对于复杂引用数据类型其在堆内存中完全开辟了一块内存地址并将原有的对象完全复制过来存放

深拷贝

将一个对象从内存中完整地拷贝出来一份给目标对象并从堆内存中开辟一个全新的空间存放新对象,且新对象的修改并不会改变原对象,二者实现真正的分离。

JSON.stringfy

在这里插入图片描述

let obj1 = {a: 1, b: [1, 2, 3]}
let str = JSON.stringify(obj1);
let obj2 = JSON.parse(str);
console.log(obj2); //{a:1,b:[1,2,3]}
obj1.a = 2;
obj1.b.push(4);
console.log(obj1); //{a:2,b:[1,2,3,4]}
console.log(obj2); //{a:1,b:[1,2,3]}

输出:

{ a: 1, b: [ 1, 2, 3 ] }   
{ a: 2, b: [ 1, 2, 3, 4 ] }
{ a: 1, b: [ 1, 2, 3 ] } 

JSON.stringfy 拷贝注意点

1.拷贝的对象的值中如果有函数、undefined、symbol这几种类型,经过JSON.stringify序列化之后的字符串中这个键值对会消失
2.拷贝 Date 引用类型会变成字符串
3.无法拷贝不可枚举的属性
4.无法拷贝对象的原型链
5.拷贝 RegExp 引用类型会变成空对象
6.对象中含有 NaN、Infinity 以及 -Infinity,JSON 序列化的结果会变成 null
7.无法拷贝对象的循环应用,即对象成环(obj[key]=obj)

function Obj() {this.func = function () {alert(1)};this.obj = {a: 1};this.arr = [1, 2, 3];this.und = undefined;this.reg = /123/;this.date = new Date(0);this.NaN = NaNthis.infinity = Infinity;this.sym = Symbol(1);
}let obj1 = new Obj();
Object.defineProperty(obj1, 'innumerable', {enumerable: false,value: "innumerable"
})
console.log('obj1', obj1)
let str = JSON.stringify(obj1);
let obj2 = JSON.parse(str);
console.log('obj2', obj2)
obj1 Obj {                       func: [Function (anonymous)],  obj: { a: 1 },                 arr: [ 1, 2, 3 ],              und: undefined,                reg: /123/,                    date: 1970-01-01T00:00:00.000Z,NaN: NaN,                      infinity: Infinity,            sym: Symbol(1)
}
obj2 {obj: { a: 1 },arr: [ 1, 2, 3 ],reg: {},date: '1970-01-01T00:00:00.000Z',NaN: null,infinity: null
}

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

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

相关文章

Python 编程中的迭代器、生成器和装饰器探究【第110篇—迭代器】

Python 编程中的迭代器、生成器和装饰器探究 在Python编程中,迭代器(Iterators)、生成器(Generators)和装饰器(Decorators)是三个强大的概念,它们为代码的可读性、效率和灵活性提供…

PaddleOCR的部署教程(实操环境安装、数据集制作、实际应用案例)

文章目录 前言 PaddleOCR简介 一、PaddleOCR环境搭建 因为我之前安装过cuda和cudnn,查看cuda的版本根据你版本安装合适的paddlepaddle版本(之前没有安装过cuda的可以看我这篇文章Ubuntu20.04配置深度学习环境yolov5最简流程) 1.创建一个…

【C++从0到王者】第四十八站:最短路径

文章目录 一、最短路径二、单源最短路径 -- Dijkstra算法1.单源最短路径问题2.算法思想3.代码实现4.负权值带来的问题 三、单源最短路径 -- Bellman-Ford算法1.算法思想2.算法实现3.SPFA优化4.负权回路 四、多源最短路径 -- Floyd-Warshall算法1.算法思想2.算法实现 一、最短路…

antd vue 日期控件的使用(选年份)

Ant Design Vue-------DatePicker 今天就讲讲Ant Design Vue下的控件----DatePicker 日期选择框 结合项目中的需求,先讲一下选择年份如何使用,需求: (1)将库中存的年份读出到DatePicker控件里面; &…

Windows 10上安装Docker

在Windows 10上安装Docker需要使用Docker Desktop for Windows,这是一个完全包含Docker工具和Docker Engine的应用程序,让你可以在Windows环境中运行容器化应用程序。以下是安装Docker Desktop for Windows的步骤: 系统要求检查: …

推荐收藏!字节AI Lab-NLP算法(含大模型)面经总结!

节前,我们组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂同学、参加社招和校招面试的同学,针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何备战、面试常考点分享等热门话题进行了深入的讨论。 今天整理…

Python调用ChatGPT API使用国内中转key 修改接口教程

大家好,我是淘小白~ 有的客户使用4.0的apikey ,直接使用官方直连的apikey消费很高,有一位客户一个月要消费2万,想使用4.0中转的apikey,使用中转的apikey 需要修改官方的openai库,下面具体说下。 1、首先确保安装的op…

Java ElasticSearch-Linux面试题

Java ElasticSearch-Linux面试题 前言1、守护线程的作用?2、链路追踪Skywalking用过吗?3、你对G1收集器了解吗?4、你们项目用的什么垃圾收集器?5、内存溢出和内存泄露的区别?6、什么是Spring Cloud Bus?7、…

安装ProxySQL,教程及安装链接(网盘自提)

一、网盘下载,本地直传 我网盘分享的是proxysql-2.5.5-1-centos8.x86_64.rpm,yum或者dnf直接安装就行 提取码:rhelhttps://pan.baidu.com/s/1nmx8-h8JEhrxQE3jsB7YQw 官方安装地址 官网下载地址https://repo.proxysql.com/ProxySQL/ 二、…

题解:CF1889C1-Doremy‘s Drying Plan (Easy Version)

题解:CF1889C1-Doremy’s Drying Plan (Easy Version) 一、 题意描述 1. 题目链接 (1) CF链接 CodeForces (2) 洛谷链接 洛谷 2. 题目翻译 有一个长度为 n n n 的序列,上面有 n n n 个点&#xf…

快速搭建项目运行环境(JDK+Maven+Git+Docker+Mysql+Redis+Node.js+Nginx)+前后端项目分别部署

JDK ①、从oracle官方网站上下载1.8版本中的最新版的JDK https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html ②、把文件通过WinSCP或者XFTP上传到服务器上 ③、解压和配置环境变量 #进入安装包目录,解压 cd /data/tmp tar -zxvf jdk-8…

【AIGC】“光影交织的恋曲:绝美情侣在蓝天下的深情互动“

外貌特征 (Physical Appearance):给远景镜头,这对情侣拥有出众的容貌和气质。男子身材挺拔,五官立体鲜明,阳光洒在他俊朗的脸庞上,更显英气逼人;女子则拥有一头柔顺亮丽的秀发,明亮的眼睛如同星…

代码随想录| 深搜、797.所有可能的路径

回溯算法其实就是深搜&#xff0c;只不过这里的深搜是侧重于在图上搜索&#xff0c;回溯大多是在树上搜索。 797.所有可能的路径 完成 代码 模板题 class Solution {List<List<Integer>> res new ArrayList<>();List<Integer> path new ArrayList…

GPT-4论文精读【论文精读·53】

Toolformer 今天我们来聊一下 GPT 4&#xff0c;但其实在最开始准备这期视频的时候&#xff0c;我是准备讲 Toolformer 这篇论文的&#xff0c;它是 Meta AI 在2月初的时候放出来的一篇论文。说这个大的语言模型可以利用工具了&#xff0c;比如说它就可以去调用各种各样的API&a…

腾讯云优惠券领取的三个渠道,一个比一个优惠!

腾讯云代金券领取渠道有哪些&#xff1f;腾讯云官网可以领取、官方媒体账号可以领取代金券、完成任务可以领取代金券&#xff0c;大家也可以在腾讯云百科蹲守代金券&#xff0c;因为腾讯云代金券领取渠道比较分散&#xff0c;腾讯云百科txybk.com专注汇总优惠代金券领取页面&am…

Unity(第二十四部)UI

在游戏开发中&#xff0c;用户界面&#xff08;UI&#xff09;是至关重要的一部分。它负责与玩家进行交互&#xff0c;提供信息&#xff0c;并增强游戏的整体体验。Unity 提供了强大的工具和功能来创建和管理 UI。 ui的底层就是画布&#xff0c;创建画布的时候会同时创建一个事…

19.2 基于SpringBoot电商项目:一刷(❤❤❤❤)

19.2 基于SpringBoot电商项目一刷 1. 项目介绍2. 准备阶段2.1 idea插件2.2 log4j2日志整合1. 排除springweb依赖的Logback依赖2. 引入log4j2依赖3. log4j2.xml文件3. 用户模块3.1 统一响应对象1. 统一响应对象2. 异常信息枚举类3. 简单案例3.2 业务异常处理1. 自定义业务异常类…

python笔记_位运算

A&#xff0c;原码反码补码 1&#xff0c;二进制 二进制的最高位是符号位&#xff0c;0为正&#xff0c;1为负 例 3 > 0000 0011 -3 > 1000 0011 2&#xff0c;正数 正数的原码&#xff0c;反码&#xff0c;补码都一样&#xff08;三码合一&#xff09; 例 3 > 00…

docker 安装(一)

docker的安装 官方文档&#xff1a;https://docs.docker.com/manuals/ 卸载旧版 首先如果系统中已经存在旧的docker&#xff0c;则先卸载&#xff1a;yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \dock…

C++ STL标准程序库开发指南学习笔记

一、类模板简介&#xff1a; 在现今的C标准模板库中&#xff0c;几乎所有的东西都被设计为template形式&#xff0c;不支持模板&#xff0c;就无法使用标准程序库。模板库可以认为是针对一个或多个尚未明确的类型而编写一套函数或类型。模板是C的一个新特性。通过使用模板&…