浅拷贝和深拷贝只针对于引用数据类型
浅拷贝是复制另一个对象的内存地址，被复制的对象或新对象修改属性，另一个对象也会跟着变化。
深拷贝是开辟新的栈，新旧对象指针指向不同的内存地址（栈），其中一个对象属性改变，不会相互影响。
简单说浅拷贝只复制对象的第一层属性，而深拷贝复制所有层的属性
一.浅拷贝举例
var obj = {
name: '小红',
info: {
age: 20
}
}
var obj2 = obj;
obj.info.age=1000;
console.log(obj,obj2);
obj2跟着obj变化了
image.png
二.深拷贝方法
方法1. JSON.parse(JSON.stringify(obj))，弊端是：
- 会将对象值为Infinity、-Infinity、NaN的序列化的结果为
null - 会将对象值为undefined、function，序列化的结果会把function或 undefined对应的属性丢失
- 会将对象值为RegExp、Error对象，序列化的结果为空对象
{} - 会将对象值为date对象，序列化的结果为字符串
eg:
var defaults = {
a1: Infinity,
a2: -Infinity,
a3: NaN,
b1: undefined,
b2: function() {
console.log(0)
},
c1: new RegExp('\\w+'),
c2: new Error('错了'),
d: new Date(),
limit: {
a: 1,
b: 2
}
};
var settings1 = JSON.parse(JSON.stringify(defaults));
defaults.a3 = 888;
console.log(settings1, defaults);
JSON.parse(JSON.stringify(obj))结果
方法2. $.extend()，需要引入jquery，弊端是：
- 会将对象值为undefined，序列化的结果会把undefined对应的属性丢失
eg:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
var settings2 = $.extend(true, {}, defaults);
defaults.a3 = 888;
console.log(settings2, defaults);
$.extend()结果
方法3. _.cloneDeep，需要引入loadsh实用工具库，暂无发现弊端
eg:
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
var settings3 = _.cloneDeep(defaults);
defaults.a3 = 888;
console.log(settings3, defaults);
_.cloneDeep结果
4.自己封装的公共方法 适合所有
var Animal={
name: "duobi",
skin: ["red", "green"],
child: {
xxx: "xxx"
},
say: function(){
console.log("I am ", this.name, " skin:", this.skin)
}
}
function deep(dest, obj){
var o = dest;
for (var key in obj) {
if (typeof obj[key] === 'object'){ //判断是不是对象(是不是数组或对象)
//constructor判断类型是数组还是对象
o[key] = (obj[key].constructor===Array)?[]:{};
deep(o[key], obj[key]);
} else {
o[key] = obj[key]
}
}
return o;
};
var x = deep({},Animal);
Animal.child.xxx = 'aaa';
console.log(Animal);
console.log(x);
END ，四种方法性能对比
var x = {};
for (var i = 0; i < 2000; i++) {
x[i] = {};
for (var j = 0; j < 1000; j++) {
x[i][j] = Math.random();
}
}
var start1 = Date.now();
var y0 = JSON.parse(JSON.stringify(x));
console.log('JSON.stringify', Date.now() - start1);
var start2 = Date.now();
var y = $.extend(true, {}, x);
console.log('extend', Date.now() - start2);
var start3 = Date.now();
var y1 = _.cloneDeep(x);
console.log('cloneDeep', Date.now() - start3);
var start4 = Date.now();
var y2 = deep({}, x);
console.log('封装方法', Date.now() - start4);
image.png
image.png
image.png
- 封装方法 > $.extend() > _.cloneDeep > JSON.parse(JSON.stringify(obj))
大家选择自己喜欢的方法即可
有不对的地方请大佬们多多指教，再会
原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。
