JS数据类型思维导图:
深拷贝与浅拷贝是针对引用数据类型而言,可分下面几种:
一 JSON.parse(JSON.stringify)深拷贝的局限
1 可以用这个技巧进行数据对象或数组的拷贝
2 如果被拷贝的对象中有function,则拷贝之后的对象就会丢失这个function
3 如果被拷贝的对象中有正则表达式,则拷贝之后的对象正则表达式会变成Object
二 返回一个数组或者对象的浅拷贝: Array.prototype.slice()和Array.prototype.concat();ES6数组的解构赋值
var o1 = ['darko', {age:22}];
var o2 = o1.slice();// 根据Array.prototype.slice()的特性,这里会返回一个o1的浅拷贝对象
console.log(o1 === o2);// => false,说明o2拷贝的是o1的一个实例
o2[0] ='lee';
console.log(o1[0]);// => "darko" o1和o2内部包含的基本类型值,复制的是其实例,不会相互影响
o2[1].age =23;
console.log(o1[1].age);// =>23 o1和o2内部包含的引用类型值,复制的是其引用,会相互影响
三 深浅拷贝实现:
1 浅拷贝实现:
function shallowClone(source) {
if (!source || typeof source !== 'object') {
throw new Error('error arguments');
}
var targetObj = source.constructor === Array ? [] : {};
for (var keys in source) {
if (source.hasOwnProperty(keys)) {
targetObj[keys] = source[keys];
}
}
return targetObj;
}
2 深拷贝实现:
function deepClone(source){
if(!source || typeof source !== 'object'){
throw new Error('error arguments', 'shallowClone');
}
var targetObj = source.constructor === Array ? [] : {};
for(var keys in source){
if(source.hasOwnProperty(keys)){
if(source[keys] && typeof source[keys] === 'object'){
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = deepClone(source[keys]);
}else{
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
// test example
var o1 = {
arr: [1, 2, 3],
obj: {
key: 'value'
},
func: function(){
return 1;
}
};
var o3 = deepClone(o1);
console.log(o3 === o1); // => false
console.log(o3.obj === o1.obj); // => false
console.log(o2.func === o1.func); // => true