30天JS挑战(第十四天)------数据的复制

第十四天挑战(数据的复制)

地址:https://javascript30.com/

所有内容均上传至gitee,答案不唯一,仅代表本人思路

中文详解:https://github.com/soyaine/JavaScript30

该详解是Soyaine及其团队整理编撰的,是对源代码的详解强烈推荐大家观看学习!!!

本人gitee:https://gitee.com/thats-all-right-ha-ha/30-days—js-challenge

官方代码

本期内容是关于基本数据类型和引用数据类型在复制时的特性和解决方法

基础类型

//start with strings, numbers and booleans
let age = 100;
let age2 = age;
console.log(age, age2);
age = 200;
console.log(age, age2);let name = 'Wes';
let name2 = name;
console.log(name, name2);
name = 'wesley';
console.log(name, name2);

分析

  • 基础数据类型:
    • 布尔值(Boolean),有 2 个值分别是:truefalse
    • null,一个表明 null 值的特殊关键字。JavaScript 是大小写敏感的,因此 nullNullNULL或变体完全不同。
    • undefined,和 null 一样是一个特殊的关键字,undefined 表示变量未赋值时的属性。
    • 数字(Number),整数或浮点数,例如: 42 或者 3.14159
    • 任意精度的整数(BigInt),可以安全地存储和操作大整数,甚至可以超过数字的安全整数限制。
    • 字符串(String),字符串是一串表示文本值的字符序列,例如:"Howdy"
    • 代表(Symbol,在 ECMAScript 6 中新添加的类型)。一种实例是唯一且不可改变的数据类型。
  • 基础数据类型的值均存储在栈中,每个值都有一个独立的内存空间,在a变量复制给b变量的时候复制的是一个具体的值,在a变量进行更改的时候,不会影响到b变量的值

引用类型(数组)

// Let's say we have an array
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];// and we want to make a copy of it.
const team = players;console.log(players, team);
// You might think we can just do something like this:
// team[3] = 'Lux';// however what happens when we update that array?// now here is the problem!// oh no - we have edited the original array too!// Why? It's because that is an array reference, not an array copy. They both point to the same array!// So, how do we fix this? We take a copy instead!
const team2 = players.slice();// one way// or create a new array and concat the old one in
const team3 = [].concat(players);// or use the new ES6 Spread
const team4 = [...players];
team4[3] = 'heeee hawww';
console.log(team4);const team5 = Array.from(players);// now when we update it, the original one isn't changed

分析

  • 引用类型(数组)
  • 一般情况下引用类型的值会作为数据的有序或无序集合即一个数组中包含着许多的数据,通常他们的数据体量都较为庞大,所以一般引用类型的数据都存放在堆内存中,并且在栈内存中开辟一个地址单元指向其堆内存中的地址
  • 在数组进行复制的时候,本质上复制的是数组在堆内存中的地址,也就是 teamplayers这两个变量指向的是同一个数组,那么当其中一个对其进行改变的时候,另一个也会受到一定的影响
  • 那么如何解决这个问题?
    • slice方法:slice方法会返回一个新的数组,这个数组的值是原数组的浅拷贝,slice的返回的数组和原数组是两个数组,不会造成影响
    • concat:方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组
    • 展开运算符
    • 创建新的数组实例

引用类型(对象)

// with Objects
const person = {
name: 'Wes Bos',
age: 80
};// and think we make a copy:
// const captain = person;
// captain.number = 99;// how do we take a copy instead?
const cap2 = Object.assign({}, person, { number: 99, age: 12 });
console.log(cap2);// We will hopefully soon see the object ...spread
// const cap3 = {...person};// Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.const wes = {
name: 'Wes',
age: 100,
social: {
twitter: '@wesbos',
facebook: 'wesbos.developer'
}
};console.clear();
console.log(wes);const dev = Object.assign({}, wes);const dev2 = JSON.parse(JSON.stringify(wes));

分析

  • 对象也是引用类型,和数组的存储原理基本一致,这里直接上解决方法
  • 解决方法
  • Object.assign():将一个或者多个源对象中所有可枚举的自有属性复制到目标对象,并返回修改后的目标对象。
  • JSON.parse & JSON.stringify:后者将对象转换成字符串,前者将字符串再复原成对象

扩展知识

引用类型的深拷贝

数组和对象的深拷贝在JavaScript中是一个常见需求,尤其是在处理复杂数据结构时,以确保原始数据不被无意修改。深拷贝意味着复制对象及其嵌套对象的实际值,而不仅仅是复制引用地址。以下是实现深拷贝的几种方法:

1. 使用 JSON.stringify()JSON.parse()

这种方法简单易用,但是有其局限性,比如不能复制函数、undefined、Symbol、循环引用等。

javascriptCopy codeconst obj = {a: 1,b: {c: 2,d: 3,},
};const arr = [1, [2, 3], { a: 4 }];const deepCopiedObj = JSON.parse(JSON.stringify(obj));
const deepCopiedArr = JSON.parse(JSON.stringify(arr));// 修改深拷贝后的对象和数组,不会影响原始数据
deepCopiedObj.b.c = 20;
deepCopiedArr[1][0] = 200;console.log(obj.b.c); // 输出 2
console.log(arr[1][0]); // 输出 2

2. 使用递归

递归方法可以更灵活地处理各种数据类型,包括数组和对象,但需要手动实现。

javascriptCopy codefunction deepCopy(value, hash = new WeakMap()) {if (typeof value !== 'object' || value === null) {return value;}if (hash.has(value)) {return hash.get(value);}let copy = Array.isArray(value) ? [] : {};hash.set(value, copy);for (let key in value) {if (value.hasOwnProperty(key)) {copy[key] = deepCopy(value[key], hash);}}return copy;
}const obj = { a: 1, b: { c: 2 } };
const arr = [1, [2, 3], { a: 4 }];const deepCopiedObj = deepCopy(obj);
const deepCopiedArr = deepCopy(arr);deepCopiedObj.b.c = 20;
deepCopiedArr[1][0] = 200;console.log(obj.b.c); // 输出 2
console.log(arr[1][0]); // 输出 2

3. 使用 structuredClone()

从 ES2021 开始,structuredClone() 方法提供了一种官方、高效的深拷贝解决方案,支持大多数数据类型,包括循环引用,但不支持复制函数。

javascriptCopy codeconst obj = { a: 1, b: { c: 2 } };
const arr = [1, [2, 3], { a: 4 }];const deepCopiedObj = structuredClone(obj);
const deepCopiedArr = structuredClone(arr);deepCopiedObj.b.c = 20;
deepCopiedArr[1][0] = 200;console.log(obj.b.c); // 输出 2
console.log(arr[1][0]); // 输出 2

structuredClone() 是目前最推荐的深拷贝实现方式,因为它既能处理复杂数据结构,包括循环引用,又能通过浏览器和Node.js环境的标准API直接使用。不过,它可能不适用于旧版浏览器或某些特殊环境,需要根据实际情况选择合适的方法。

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

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

相关文章

后端开发技术面试指南

工作10多年,每年都会帮组里面试一些新同学校招社招的都有,下面我就从一个面试官的视角来给大家拆解一下如何淡然应对后端开发技术面试。 1.一面多为电话面试 (1)问七问八 ①简历要注重内容,形式上不丑没有错别字即可。之前收到过一个工作5…

经典语义分割(一)利用pytorch复现全卷积神经网络FCN

经典语义分割(一)利用pytorch复现全卷积神经网络FCN 这里选择B站up主[霹雳吧啦Wz]根据pytorch官方torchvision模块中实现的FCN源码。 Github连接:FCN源码 1 FCN模型搭建 1.1 FCN网络图 pytorch官方实现的FCN网络图,如下所示。 1.2 backbone FCN原…

为raspberrypi编译bpftrace调试工具

基于eBPF的嵌入式应用调试 笔者之前写过几篇有关于使用eBPF调试Linux内核和应用的博客,其中提到,在嵌入式设备上使用BCC或bpftrace是不可行的;主要原因在于嵌入式设备的资源有限,而这两个调试工具依赖python/clang/llvm等库&…

Scratch 第十六课-弹珠台游戏

第十六课-弹珠台游戏 大家好,今天我们一起做一款弹珠台scratch游戏,我们也可以叫它弹球游戏!这款游戏在刚出来的时候非常火爆。小朋友们要认真学习下! 这节课的学习目标 物体碰撞如何处理转向问题。复习键盘对角色的控制方式。…

STL-内存的配置与释放

STL-内存的配置与释放 STL有两级空间配置器,默认是使用第二级。第二级空间配置器会在某些情况下去调用第一级空间配置器。空间配置器都是在allocate函数内分配内存,在deallocate函数内释放内存。 第一级空间配置器 第一级配置器只是对malloc函数和fre…

【自然语言处理】BitNet b1.58:1bit LLM时代

论文地址:https://arxiv.org/pdf/2402.17764.pdf 相关博客 【自然语言处理】BitNet b1.58:1bit LLM时代 【自然语言处理】【长文本处理】RMT:能处理长度超过一百万token的Transformer 【自然语言处理】【大模型】MPT模型结构源码解析(单机版)…

如何在 Mac 上成功轻松地恢复 Excel 文件

Microsoft Excel 的 Mac 版本始终略落后于 Windows 版本,这也许可以解释为什么如此多的用户渴望学习如何在 Mac 上恢复 Excel 文件。 但导致重要电子表格不可用的不仅仅是 Mac 版 Excel 的不完全稳定性。用户有时会失去注意力并删除错误的文件,存储设备…

2024-03-03 c++

🌸 MFC进度条控件 | Progress Control 1。新建MFC项目(基于对话框、静态库) 2。添加控件,删除初始的3个多余控件 加1个progress control,修改其marquee为true,添加变量:变量名为test_progress。…

Angular基础---HelloWorld---Day1

文章目录 1. 创建Angular 项目2.对Angular架构的最基本了解3.创建并引用新的组件(component)4.对Angular架构新的认识(多组件)5.组件中业务逻辑文件的编辑(ts文件)6.标签中属性的绑定(1) ID的绑定(2) class…

String和String Builder

String和StringBuilder的区别 String类 String类代表字符串。java程序中所有字符串文字(例如“abc”)都被实现为此类的实例。 String类源码是用final修饰的,它们的值在创建后不能被更改。字符串缓冲区支持可变字符串。 String对象是不可变…

STM32 (2)

1.stm32编程模型 将C语言程序烧录到芯片中会存储在单片机的flsah存储器中,给芯片上电后,Flash中的程序会逐条进入到CPU中去执行,进而CPU去控制各种模块(即外设)去实现各种功能。 2.寄存器和寄存器编程 CPU通过控制其…

Apache POI的简单介绍与应用

介绍 Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。PS: 一般情况下,POI 都是用于操作 Excel 文件,如图: Apache POI 的应用场景&…

SQL无列名注入

SQL无列名注入 ​ 前段时间,队里某位大佬发了一个关于sql注入无列名的文章,感觉好像很有用,特地研究下。 关于 information_schema 数据库: ​ 对于这一个库,我所知晓的内容并不多,并且之前总结SQL注入的…

设计模式-桥接模式实践案例

桥接模式(Bridge Pattern)是一种结构型设计模式,用于将抽象与实现分离,使它们可以独立地变化。这种模式通过提供一个桥接结构,可以将实现接口的实现部分和抽象层中可变化的部分分离开来。 以下是一个使用 Java 实现桥…

【数据结构】_包装类与泛型

目录 1. 包装类 1.1 基本数据类型和对应的包装类 1.2 (自动)装箱和(自动)拆箱 1.2.1 装箱与拆箱 1.2.2 自动(显式)装箱与自动(显式)拆箱 1.3 valueOf()方法 2. 泛型类 2.1 泛…

【深度学习笔记】计算机视觉——目标检测和边界框

目标检测和边界框 前面的章节(例如 sec_alexnet— sec_googlenet)介绍了各种图像分类模型。 在图像分类任务中,我们假设图像中只有一个主要物体对象,我们只关注如何识别其类别。 然而,很多时候图像里有多个我们感兴趣…

某大型制造企业数字化转型规划方案(附下载)

目录 一、项目背景和目标 二、业务现状 1. 总体应用现状 2. 各模块业务问题 2.1 设计 2.2 仿真 2.3 制造 2.4 服务 2.5 管理 三、业务需求及预期效果 1. 总体业务需求 2. 各模块业务需求 2.1 设计 2.2 仿真 2.3 制造 2.4 服务 2.5 管理 四、…

在vue中对keep-alive的理解,它是如何实现的,具体缓存的是什么?

对keep-alive的理解,它是如何实现的,具体缓存的是什么? (1)keep-alive有以下三个属性:注意:keep-alive 包裹动态组件时,会缓存不活动的组件实例。主要流程 (2&#xff09…

数字化转型导师坚鹏:证券公司数字化营销

证券公司数字化营销 ——借力数字化技术实现零售业务的批量化、精准化、场景化、智能化营销 课程背景: 很多证券公司存在以下问题: 不知道如何提升证券公司数字化营销能力? 不知道证券公司如何开展数字化营销工作? 不知道…

胎神游戏集第二期

延续上一期 一、海岛奇胎 #include<bits/stdc.h> #include<windows.h> #include<stdio.h> #include<conio.h> #include<time.h> using namespace std; typedef BOOL (WINAPI *PROCSETCONSOLEFONT)(HANDLE, DWORD); PROCSETCONSOLEFONT SetCons…