Clone object using jQuery.extend() in javascript
在 Javascript 中,如何複製物件?
一般情況下都會想使用 = 的方式來複製,不過可能會得到以下結果:
var obj = {'a': 1, 'b': 2};
var new_obj = obj;
new_obj.c = 3;
//result
obj = {'a': 1, 'b': 2, 'c': 3};
新物件是有了原始物件的內容沒錯,但是一修改到 new_obj 物件內容, obj 也會跟著異動。
原因是這種方式會變成 reference,所以行不通,而 jQuery 所提供的 clone() 僅適用於 DOM 的複製。
不過還是可以使用 jQuery.extend() 方法來達成:
/*
* clone object by jQuery.extend (deep copy)
* @param: source / 來源物件
* @param: append / 附加的值 (非必要)
*/
function clone (source, append) {
if ('undefined' !== typeof append) {
var obj = jQuery.extend({}, source);
return jQuery.extend(true, obj, append);
} else {
return jQuery.extend(true, {}, source);
}
}
//run
var obj = {'a': 1, 'b': 2};
var new_obj = clone(obj, {'c': 3});
//result
obj = {'a': 1, 'b': 2};
new_obj = {'a': 1, 'b': 2, 'c': 3};
延伸閱讀:
在 Javascript 中,如何複製物件?
一般情況下都會想使用 = 的方式來複製,不過可能會得到以下結果:
var obj = {'a': 1, 'b': 2};
var new_obj = obj;
new_obj.c = 3;
//result
obj = {'a': 1, 'b': 2, 'c': 3};
新物件是有了原始物件的內容沒錯,但是一修改到 new_obj 物件內容, obj 也會跟著異動。
原因是這種方式會變成 reference,所以行不通,而 jQuery 所提供的 clone() 僅適用於 DOM 的複製。
不過還是可以使用 jQuery.extend() 方法來達成:
/*
* clone object by jQuery.extend (deep copy)
* @param: source / 來源物件
* @param: append / 附加的值 (非必要)
*/
function clone (source, append) {
if ('undefined' !== typeof append) {
var obj = jQuery.extend({}, source);
return jQuery.extend(true, obj, append);
} else {
return jQuery.extend(true, {}, source);
}
}
//run
var obj = {'a': 1, 'b': 2};
var new_obj = clone(obj, {'c': 3});
//result
obj = {'a': 1, 'b': 2};
new_obj = {'a': 1, 'b': 2, 'c': 3};
延伸閱讀: