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 个值分别是：true 和 false。
  • null，一个表明 null 值的特殊关键字。JavaScript 是大小写敏感的，因此 null 与 Null、NULL或变体完全不同。
  • 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

分析

• 引用类型（数组）
• 一般情况下引用类型的值会作为数据的有序或无序集合即一个数组中包含着许多的数据，通常他们的数据体量都较为庞大，所以一般引用类型的数据都存放在堆内存中，并且在栈内存中开辟一个地址单元指向其堆内存中的地址
• 在数组进行复制的时候，本质上复制的是数组在堆内存中的地址，也就是 team和players这两个变量指向的是同一个数组，那么当其中一个对其进行改变的时候，另一个也会受到一定的影响
• 那么如何解决这个问题？
  • 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直接使用。不过，它可能不适用于旧版浏览器或某些特殊环境，需要根据实际情况选择合适的方法。