厦门 外贸网站,郑州seo服务公司,做三维特效的好网站,前台网站开发第十四天挑战(数据的复制)
地址#xff1a;https://javascript30.com/
所有内容均上传至gitee#xff0c;答案不唯一#xff0c;仅代表本人思路
中文详解#xff1a;https://github.com/soyaine/JavaScript30
该详解是Soyaine及其团队整理编撰的#xff0c;是对源代码…第十四天挑战(数据的复制)
地址https://javascript30.com/
所有内容均上传至gitee答案不唯一仅代表本人思路
中文详解https://github.com/soyaine/JavaScript30
该详解是Soyaine及其团队整理编撰的是对源代码的详解强烈推荐大家观看学习!!!
本人giteehttps://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变量的值
引用类型数组
// Lets 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? Its 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 isnt 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]); // 输出 22. 使用递归
递归方法可以更灵活地处理各种数据类型包括数组和对象但需要手动实现。
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]); // 输出 23. 使用 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]); // 输出 2structuredClone() 是目前最推荐的深拷贝实现方式因为它既能处理复杂数据结构包括循环引用又能通过浏览器和Node.js环境的标准API直接使用。不过它可能不适用于旧版浏览器或某些特殊环境需要根据实际情况选择合适的方法。
