js浅拷贝与深拷贝
JS 拷贝
2023-06-13 09:16:40 时间
浅拷贝
只拷贝了基本类型数据和引用类型数据的指针,叫浅拷贝
被拷贝的对象里,如果没有引用类型的数据,可以使用浅拷贝,方便快捷。
如果有引用类型,那么存在被篡改的风险,更应该使用深拷贝
浅拷贝方法
1、手撸一个浅拷贝函数
1function shallowClone(obj) {
2 const newObj = {};
3 for(let prop in obj) {
4 if(obj.hasOwnProperty(prop)){
5 newObj[prop] = obj[prop];
6 }
7 }
8 return newObj;
9}
10
2、Object.assign / 展开运算符
1var obj = {
2 age: 18,
3 nature: ["smart", "good"],
4 names: {
5 name1: "fx",
6 name2: "xka"
7 },
8 love: function () {
9 console.log("fx is a great girl")
10 }
11}
12var newObj = Object.assign({}, fxObj);
13
3、数组的slice、concat方法
深拷贝
完全拷贝了基本类型和引用类型内部所有数据,叫深拷贝
深拷贝方法
1、JSON暴力转换
1const obj2=JSON.parse(JSON.stringify(obj1));
但是这种方式存在弊端,会忽略undefined、symbol、函数、正则。
1const obj = {
2 name: "A",
3 name1: undefined,
4 name2: /[a-zA-Z0-9]/g ,
5 name3: function() {},
6 name4: Symbol("A")
7}
8const obj2 = JSON.parse(JSON.stringify(obj));
9console.log(obj2); // {name: "A"}
2、手撸深拷贝函数(循环+递归)
1function deepClone(obj, hash = new WeakMap()) {
2 if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作
3 if (obj instanceof Date) return new Date(obj);
4 if (obj instanceof RegExp) return new RegExp(obj);
5 // 可能是对象或者普通的值 如果是函数的话是不需要深拷贝
6 if (typeof obj !== "object") return obj;
7 // 是对象的话就要进行深拷贝
8 if (hash.get(obj)) return hash.get(obj);
9 let cloneObj = new obj.constructor();
10 // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
11 hash.set(obj, cloneObj);
12 for (let key in obj) {
13 if (obj.hasOwnProperty(key)) {
14 // 实现一个递归拷贝
15 cloneObj[key] = deepClone(obj[key], hash);
16 }
17 }
18 return cloneObj;
19}
20
相关文章
- JS中的indexOf方法
- Js排序算法_js 排序算法
- 【尚硅谷】JavaScript基础&实战丨JS入门到精通_01-06
- js filter过滤数组_js一个数组过滤另一个数组
- JS设置定时器_js设置定时器
- 这些js原型及原型链面试题你能做对几道_2023-02-27
- Typecho | 博客css和js无法加载 前台样式崩了 https相关
- 自写脚本实现上线前本地批量压缩混淆 js , css 代码。详解编程语言
- Js删除字符串中的指定字符串详解编程语言
- JS实时链接Oracle让数据库访问更便捷(js实时连接oracle)
- JavaScript探索之旅掌握Oracle和JS的完美融合(js与oracle)
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- 使用Oracle和JS开发新一代应用仿真世界(oracle js)
- 在table中插入多行的js代码(与insertAdjacentHTML相似的功能)
- js获取TreeView控件选中节点的Text和Value值的方法
- 多种方式实现JS调用后台方法进行数据交互
- Js+Jq获取URL参数的集中方法示例代码
- JS获取单击按钮单元格所在行的信息
- node.js中的querystring.parse方法使用说明
- js从Cookies里面取值的简单实现