對於javascript而言,數組是引用類型,如果要想復制一個數組就要動腦袋想想了,因為包括concat、slice在內的函數,都是淺層復制。也就是說,對於一個二維數組來說,用concat來做復制,第二維的數組還是引用,修改了新數組同樣會使舊數組發生改變。
於是乎,想要寫一個深度復制的函數,來幫助做組數的深度復制。
一般情況下,使用 “=” 可以實現賦值。但對於數組、對象、函數等這些引用類型的數據,這個符號就不好使了。
1. 數組的簡單復制
1.1 簡單遍歷
最簡單也最基礎的方式,自然是循環處理。示例:
JavaScript
function array_copy(arr) { var out = [], i, len; if (out[i] instanceof Array === false){ return arr; } for (i = 0, len = arr.length; i < len; i++) { if (out[i] instanceof Array){ out[i] = deepcopy(arr[i]); } else { out[i] = arr[i]; } }; return a; } //測試 var arr1 = [1, 2, 3, 4], arr2 = array_copy(arr1); console.log(arr1, arr2); arr2[2] = 10; console.log(arr1[2], arr2[2]); function array_copy(arr) { var out = [], i, len; if (out[i] instanceof Array === false){ return arr; } for (i = 0, len = arr.length; i < len; i++) { if (out[i] instanceof Array){ out[i] = deepcopy(arr[i]); } else { out[i] = arr[i]; } }; return a; } //測試 var arr1 = [1, 2, 3, 4], arr2 = array_copy(arr1); console.log(arr1, arr2); arr2[2] = 10; console.log(arr1[2], arr2[2]);
1.2 變通的復制實現
經常出現在面試題中的取巧方法,是使用 slice 或 contcat 方法實現。示例:
JavaScript
var arr1 = [1, 2, 3, 4], arr2 = arr1.slice(0), arr3 = arr1.concat(); console.log(arr1, arr2, arr3); arr2[2] = 10; arr3[2] = 11; console.log(arr1[2], arr2[2], arr3[2]); var arr1 = [1, 2, 3, 4], arr2 = arr1.slice(0), arr3 = arr1.concat(); console.log(arr1, arr2, arr3); arr2[2] = 10; arr3[2] = 11; console.log(arr1[2], arr2[2], arr3[2]);
2. 數組的深度復制
普通的一維數組且值為非引用類型,使用上述方法是沒有問題的,否則就比較麻煩了。深度復制需要考慮數組值為各種引用類型的情況。
2.1 使用 JSON 方法
JSON.stringify(array) 然後再 JSON.parse()。示例:
JavaScript
var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7], arr2 = JSON.parse(JSON.stringify(arr1)); console.log(arr1, arr2); arr2[1] = 10; arr2[3].a = 20; console.log(arr1[1], arr2[1]); console.log(arr1[3], arr2[3]); var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7], arr2 = JSON.parse(JSON.stringify(arr1)); console.log(arr1, arr2); arr2[1] = 10; arr2[3].a = 20; console.log(arr1[1], arr2[1]); console.log(arr1[3], arr2[3]);
此方法存在對古老浏覽器的兼容性問題。如確需要作兼容,可引入如下兼容文件解決:
https://github.com/douglascrockford/JSON-js/blob/master/json2.js
注意:如果數組值為函數,上述方法還是不行的。
2.2 深度復制的完全實現
考慮到多維數組的嵌套,以及數組值為對象的情況,可以作如下原型擴展(當然寫為普通函數實現也是可以的,原型擴展是不建議的方式):
JavaScript
Object.prototype.clone = function () { var o = {}; for (var i in this) { o[i] = this[i]; } return o; }; Array.prototype.clone = function () { var arr = []; for (var i = 0; i < this.length; i++) if (typeof this[i] !== 'object') { arr.push(this[i]); } else { arr.push(this[i].clone()); } return arr; }; //測試1 Object var obj1 = { name: 'Rattz', age: 20, hello: function () { return "I'm " + name; } }; var obj2 = obj1.clone(); obj2.age++; console.log(obj1.age); //測試2 Array var fun = function(log) {console.log}, arr1 = [1, 2, [3, 4], {a: 5, b: 6}, fun], arr2 = arr1.clone(); console.log(arr1, arr2); arr2[2][1]= 'Mike'; arr2[3].a = 50; arr2[4] = 10; console.log(arr1, arr2); Object.prototype.clone = function () { var o = {}; for (var i in this) { o[i] = this[i]; } return o; Array.prototype.clone = function () { var arr = []; for (var i = 0; i < this.length; i++) if (typeof this[i] !== 'object') { arr.push(this[i]); } else { arr.push(this[i].clone()); } return arr; //測試1 Object var obj1 = { name: 'Rattz', age: 20, hello: function () { return "I'm " + name; } var obj2 = obj1.clone(); console.log(obj1.age); //測試2 Array var fun = function(log) {console.log}, arr1 = [1, 2, [3, 4], {a: 5, b: 6}, fun], arr2 = arr1.clone(); console.log(arr1, arr2); arr2[2][1]= 'Mike'; arr2[3].a = 50; arr2[4] = 10; console.log(arr1, arr2);
2.3 使用 jQuery 的 extend 方法
如果你在使用 jQuery,那麼最簡單的方法是使用 extend 插件方法。示例:
JavaScript
var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7], arr2 = $.extend(true, [], arr1); console.log(arr1, arr2); arr2[1] = 10; console.log(arr1, arr2); var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7], arr2 = $.extend(true, [], arr1); console.log(arr1, arr2); arr2[1] = 10; console.log(arr1, arr2);
以上所述是小編給大家介紹的JavaScript 數組的深度復制解析,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!