对象的深拷贝和浅拷贝总结
本文最后更新于 128 天前，其中的信息可能已经有所发展或是发生改变。
1、赋值
修改新对象原来的对象会发生改变(改变存储空间，联动改变)
let person = {
name: 'Tom',
age: 12,
hobby: ['音乐', '动漫']
}
let copyObj = person;
copyObj.name = '小明';
copyObj.hobby[0] = '看电视'
console.log(copyObj, person);
// { name: '小明', age: 12, hobby: [ '看电视', '动漫' ] } { name: '小明', age: 12, hobby: [ '看电视', '动漫' ] }2、浅拷贝
浅拷贝 基本类型直接拷贝值（新变原不变），引用类型拷贝内存地址（新变原变）
2.1 使用shallowCopy函数完成浅拷贝
let person = {
name: 'Tom',
age: 12,
hobby: ['音乐', '动漫']
}
function shallowCopy(object) {
var target = {}
for (const key in object) {
if (object.hasOwnProperty(key)) {
target[key] = object[key]
}
}
return target
}
let copyObj = shallowCopy(person);
copyObj.name = '小红';
copyObj.hobby[0] = '看电影';
console.log(copyObj, person);
// { name: '小红', age: 12, hobby: [ '看电影', '动漫' ] } { name: 'Tom', age: 12, hobby: [ '看电影', '动漫' ] }2.2 使用ES6中的扩展运算符完成浅拷贝
let person = {
name: 'Tom',
age: 12,
hobby: ['音乐', '动漫']
}
let copyObj = { ...person };
copyObj.age = '20';
copyObj.name = 'Jerry';
copyObj.hobby[0] = '看文学名著'
console.log(copyObj, person)
// { name: 'Jerry', age: '20', hobby: [ '看文学名著', '动漫' ] } { name: 'Tom', age: 12, hobby: [ '看文学名著', '动漫' ] }3、深拷贝
深拷贝 新变原不变（在堆内存中开辟新的区域，修改不会影响原来的）
3.1 使用deepClone函数实现深拷贝
let person = {
name: 'Tom',
age: 12,
hobby: ['音乐', '动漫']
}
function deepClone(object) {
var cloneObj = Array.isArray(object) ? [] : {};
if (object === null) return object
if (object instanceof Date) return new Date(object)
if (object instanceof RegExp) return new RegExp(object)
if (typeof object !== 'object') return object
for (const key in object) {
if (object.hasOwnProperty(key)) {
cloneObj[key] = deepClone(object[key])
}
}
return cloneObj
}
let copyObj = deepClone(person);
copyObj.name = 'Marry';
copyObj.age = 18;
copyObj.hobby[0] = 'football';
console.log(copyObj, person);
// { name: 'Marry', age: 18, hobby: [ 'football', '动漫' ] } { name: 'Tom', age: 12, hobby: [ '音乐', '动漫' ] }3.2 JSON对象可以使用JSON.parse(JSON.stringify(object)) 的方法实现深拷贝
let obj = {
key: 1,
person: {
name: 'Marry',
age: 12
}
}
let copyObj = JSON.parse(JSON.stringify(obj));
copyObj.key = 2;
copyObj.person.name = 'Bob';
copyObj.person.age = 13;
console.log(copyObj,obj)
// { key: 2, person: { name: 'Bob', age: 13 } } { key: 1, person: { name: 'Marry', age: 12 } }4、共用方法
4.1 Object.assign()
Object.assign()可实现深拷贝和浅拷贝（当只有一层时为深拷贝，两层及以上为浅拷贝）
let bookInfo = {
name: '西游记',
autor: '吴承恩',
sellstaus: '良好'
}
let person = {
name: 'Tom',
age: 12,
hobby: ['音乐', '动漫']
}
let copyObj1 = Object.assign({}, bookInfo);
let copyObj2 = Object.assign({}, person);
copyObj1.name = '红楼梦',
copyObj1.autor = '曹雪芹',
copyObj1.sellstaus = '中等'
copyObj2.name = '小明',
copyObj2.age = 22,
copyObj2.hobby[0] = 'basketball'
console.log(copyObj1, copyObj2)
// { name: '红楼梦', autor: '曹雪芹', sellstaus: '中等' } { name: '小明', age: 22, hobby: [ 'basketball', '动漫' ] }4.2 使用Jquery中的extend方法实现深拷贝和浅拷贝
- 浅拷贝 => 语法: $.extend(对象1, 对象2, 对象3, …) => 作用: 把从 对象2 开始的所有对象内的数据进行浅拷贝到 对象1 内 => 实现的是浅拷贝
- 深拷贝 => 语法: $.extend(true, 对象1, 对象2, 对象3, …) => 作用: 把从 对象2 开始的所有对象内的数据进行深拷贝到 对象1 内 => 实现的是深拷贝
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-5-26 1，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
