js深浅复制

2016-07-07 22:17:00

深浅复制对比

因为JavaScript存储对象都是存地址的，所以浅复制会导致 obj 和obj1 指向同一块内存地址。我的理解是，这有点类似数据双向绑定，改变了其中一方的内容，都是在原来的内存基础上做修改会导致拷贝对象和源对象都发生改变，而深复制一般都是开辟一块新的内存地址，将原对象的各个属性逐个复制出去。对拷贝对象和源对象各自的操作不影响另一方

代码层面实现深浅复制

//数组拷贝

//浅复制，双向改变,指向同一片内存空间
let arr = [1, 2, 3];
let arr1 = arr;
arr1[1] = 'test';
console.log('shallow copy: ' + arr + " " + arr1); //shallow copy: 1,test,3 1,test,3

//深复制，开辟新的内存区

//方法一：slice,原理：slice返回一个新数组
let deepArr = [1, 2, 3];
let deepArr1 = deepArr.slice(0);
deepArr1[1] = 'test';
console.log('deep copy: ' + deepArr + " " + deepArr1); //deep copy: 1,2,3 1,test,3

//方法二：concat，原理：concat返回一个新数组
let deepArr2 = [1, 2, 3];
let deepArr3 = deepArr2.concat();
deepArr3[1] = 'test';
console.log('deep copy: ' + deepArr2 + " " + deepArr3); //deep copy: 1,2,3 1,test,3

//知乎看到的深复制方法，这个函数可以深拷贝对象和数组,很遗憾，对象里的函数会丢失
deepCloneObj = obj => {
let str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object') {
return;
}else if(window.JSON) {
/好处是非常简单易用，但是坏处也显而易见，会丢失很多东西，这会抛弃对象的constructor，
也就是深复制之后，无论这个对象原本的构造函数是什么，在深复制之后都会变成Object。
另外诸如RegExp对象是无法通过这种方式深复制的。
/
str = JSON.stringify(obj);
newobj = JSON.parse(str);
//console.log(JSON.parse(JSON.stringify(/[0-9]/)));
}else {
for(let i in obj) {
newobj[i] = typeof obj[i] === 'object' ? deepCloneObj(obj[i]) : obj[i];
}
}
return newobj;
}

第三方库实现深浅复制

1.jQuery.extend
第一个参数可以是布尔值，用来设置是否深度拷贝的:

jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } );
jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } );
下面是源码，可以看看

jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;

// Handle a deep copy situationif ( typeof target === "boolean" ) {    deep = target;    // skip the boolean and the target    target = arguments[ i ] || {};    i++;}// Handle case when target is a string or something (possible in deep copy)if ( typeof target !== "object" && !jQuery.isFunction(target) ) {    target = {};}// extend jQuery itself if only one argument is passedif ( i === length ) {    target = this;    i--;}for ( ; i

2.lodash —— .clone() / .cloneDeep()
在lodash中关于复制的方法有两个，分别是.clone()和.cloneDeep()。其中.clone(obj, true)等价于.cloneDeep(obj)。使用上，lodash和jquery并没有太大的区别，但看了源码会发现， jQuery 不过60多行。可 lodash 中与深复制相关的代码却有上百行.jQuery 无法正确深复制 JSON 对象以外的对象，lodash 花了大量的代码来实现 ES6 引入的大量新的标准对象。更厉害的是，lodash 针对存在环的对象的处理也是非常出色的。因此相较而言，lodash 在深复制上的行为反馈比jquery好很多，是更拥抱未来的一个第三方库。