网站管理模板,免费企业网站系统,网站建设技术团队,东莞非凡网站建设先放出实现浅拷贝和深拷贝的一些方法(直接食用)#xff1a;
1.浅拷贝#xff1a;
浅拷贝在拷贝对象的时候#xff0c;对于对象最外一层实现的是普通的值拷贝#xff0c;对于对象里面的对象是浅拷贝#xff0c;只复制地址不复制地址对应的值。
/* 方法1.1#xff1a;扩…先放出实现浅拷贝和深拷贝的一些方法(直接食用)
1.浅拷贝
浅拷贝在拷贝对象的时候对于对象最外一层实现的是普通的值拷贝对于对象里面的对象是浅拷贝只复制地址不复制地址对应的值。
/* 方法1.1扩展运算符最简单的方式
*/
const originalObject { a: 1, b: 2, c: {d: 3} };
const shallowCopy { ...originalObject };originalObject.a 10;
console.log(originalObject.a); // 输出 10
console.log(shallowCopy.a); // 输出 1originalObject.c.d 11;
console.log(shallowCopy.c.d); // 输出 11
console.log(originalObject.c.d); // 输出 11/* 方法2Object.assign()
*/
const originalObject { a: 1, b: 2, c: { d: 3} };
const shallowCopy Object.assign({}, originalObject);
originalObject.a 10;
originalObject.c.d 11;console.log(originalObject.a); // 输出 10
console.log(shallowCopy.a); // 输出 1
console.log(originalObject.c.d); // 输出 11
console.log(shallowCopy.c.d); // 输出 11
/* 方法1.3自定义函数实现浅拷贝
*/
function shallowCopyFun(obj) {// 只拷贝对象if (typeof obj ! object || obj null) {return obj;}// 根据 obj 的类型决定新对象是数组还是对象let newObj Array.isArray(obj) ? [] : {};// 遍历 obj并复制其自身属性到新对象for (let key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] obj[key];}}return newObj;
}
const originalObject { a: 1, b: 2, c: { d: 3,e: 4 } };
const shallowCopy shallowCopyFun(originalObject);originalObject.a 10;
console.log(shallowCopy.a); // 输出 1
console.log(originalObject.a); // 输出 10originalObject.c.d 11;
console.log(shallowCopy.c.d); // 输出 11
console.log(originalObject.c.d); // 输出 112.深拷贝
/* 方法2.1Json对象实现深拷贝JSON 序列化和反序列化
*/
const originalObject { a: 1, b: { c: 2 } };
const deepCopy JSON.parse(JSON.stringify(originalObject));originalObject.b.c 10;
console.log(originalObject.b.c); // 输出 10
console.log(deepCopy.b.c); // 输出 2/* 方法2.2递归函数实现
*/
function deepCopyFun(obj) {// 检查值是否是引用类型if (typeof obj ! object || obj null) {return obj;}if (obj instanceof Date) {return new Date(obj);}if (obj instanceof RegExp) {return new RegExp(obj.source, obj.flags);}if (obj instanceof Function) {return obj;}// 初始化一个新的数组或对象let newObj Array.isArray(obj) ? [] : {};for (let key in obj) {// 确保属性属于对象本身不是继承的if (obj.hasOwnProperty(key)) {// 递归复制每个属性newObj[key] deepCopyFun(obj[key]);}}return newObj;
}
const originalObject { a: 1, b: { c: 2 } };
const deepCopy deepCopyFun(originalObject);originalObject.b.c 10;
console.log(originalObject.b.c); // 输出 10
console.log(deepCopy.b.c); // 输出 2
/* 方法2.3concat实现深拷贝concat(arr1, arr2,...)
*/
var arr [1,2,3]
var newArr [].concat(arr)
arr.push(4)
console.log(arr:, arr);
console.log(newArr:, newArr);
/* arr: [ 1, 2, 3, 4 ]newArr: [ 1, 2, 3 ]
*//* 方法2.4slice实现深拷贝slice(idx1, idx2)
*/
var arr [1,2,3]
var newArr arr.slice()
arr.push(4)
console.log(arr:, arr);
console.log(newArr:, newArr);
/* arr: [ 1, 2, 3, 4 ]newArr: [ 1, 2, 3 ]
*//* 方法2.5lodash实现深拷贝_.cloneDeep(value)
value : 要深拷贝的值。
返回拷贝后的值
vue 中使用 a. npm i --save lodash 下载依赖b. import _ from lodash 在 组件 中引入 c. 用法和下面的一样
*/
var objects [{ a: 1 }, { b: 2 }];
var deep _.cloneDeep(objects);
console.log(deep[0] objects[0]);
// false/* 方法2.6扩展符实现深拷贝
*/
var a[1,2,3]
var b[...a];
b.push(4);
console.log(b);//1,2,3,4
console.log(a)//1,2,3为什么会有浅拷贝和深拷贝这要从javaScript数据类型说起。分为基本数据类型和引用数据类型。 基本类型数据都是按照值访问的直接保存和修改在变量里面实际的值。 值类型在存储变量中存储的是值的本身因此叫做值类型即string,Number,Boolean,Undefined,Null其中基本数据类型null返回的是一个空的对象object如果有一个变量我们以后打算存储为对象默认值可以设置成null。 引用类型数据是按照引用访问的即保存在变量对象中的是一个地址该地址与堆内存的实际值相关联。 引用数据类型在存储变量中存储的仅仅是地址引用因此叫做引用数据类型。即通过new关键字创建的对象(系统对象、自定义对象)如Object、Array、Date等。
操作系统控制栈但是它不控制堆。具体堆栈理解可以自行bing 引用类型的值是同时保存在栈内存和堆内存中的对象javascript不允许直接访问内存中的位置也就是说不能直接操作对象的内存空间那我们操作啥呢 实际上是操作对象的引用 所以引用类型的值是按引用访问的。 准确地说引用类型的存储需要内存的栈区和堆区堆区是指内存里的堆内存共同完成栈区内存保存变量标识符和指向堆内存中该对象的指针也可以说是该对象在堆内存的地址。 基本数据类型-在百度上大多数都是说存在栈中的。从知乎回答找到正确答案link。即 字符串 存在堆里栈中为引用地址如果存在相同字符串则引用地址相同。 数字 小整数存在栈中其他类型存在堆中。 其他类型引擎初始化时分配唯一地址栈中的变量存的是唯一的引用。 所以这里我们在来说说深拷贝和浅拷贝的区别 浅拷贝只复制指向某个对象的指针而不是复制对象本身新旧对象共享一块内存。深拷贝复制并创建一个一模一样的对象不共享内存修改新的对象旧对象保持不变。
