對(duì)于javascript而言，數(shù)組是引用類(lèi)型，如果要想復(fù)制一個(gè)數(shù)組就要?jiǎng)幽X袋想想了，因?yàn)榘╟oncat、slice在內(nèi)的函數(shù)，都是淺層復(fù)制。也就是說(shuō)，對(duì)于一個(gè)二維數(shù)組來(lái)說(shuō)，用concat來(lái)做復(fù)制，第二維的數(shù)組還是引用，修改了新數(shù)組同樣會(huì)使舊數(shù)組發(fā)生改變。
于是乎，想要寫(xiě)一個(gè)深度復(fù)制的函數(shù)，來(lái)幫助做組數(shù)的深度復(fù)制。
一般情況下，使用 “=” 可以實(shí)現(xiàn)賦值。但對(duì)于數(shù)組、對(duì)象、函數(shù)等這些引用類(lèi)型的數(shù)據(jù)，這個(gè)符號(hào)就不好使了。
1. 數(shù)組的簡(jiǎn)單復(fù)制
1.1 簡(jiǎn)單遍歷
最簡(jiǎn)單也最基礎(chǔ)的方式，自然是循環(huán)處理。示例：
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;}//測(cè)試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;}//測(cè)試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 變通的復(fù)制實(shí)現(xiàn)
經(jīng)常出現(xiàn)在面試題中的取巧方法，是使用 slice 或 contcat 方法實(shí)現(xiàn)。示例：
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. 數(shù)組的深度復(fù)制
普通的一維數(shù)組且值為非引用類(lèi)型，使用上述方法是沒(méi)有問(wèn)題的，否則就比較麻煩了。深度復(fù)制需要考慮數(shù)組值為各種引用類(lèi)型的情況。
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]);此方法存在對(duì)古老瀏覽器的兼容性問(wèn)題。如確需要作兼容，可引入如下兼容文件解決：
https://github.com/douglascrockford/JSON-js/blob/master/json2.js
注意：如果數(shù)組值為函數(shù)，上述方法還是不行的。
2.2 深度復(fù)制的完全實(shí)現(xiàn)
考慮到多維數(shù)組的嵌套，以及數(shù)組值為對(duì)象的情況，可以作如下原型擴(kuò)展（當(dāng)然寫(xiě)為普通函數(shù)實(shí)現(xiàn)也是可以的，原型擴(kuò)展是不建議的方式）：
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;};//測(cè)試1 Objectvar obj1 = {name: 'Rattz',age: 20,hello: function () {return "I'm " + name;}};var obj2 = obj1.clone();obj2.age++;console.log(obj1.age);//測(cè)試2 Arrayvar 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;//測(cè)試1 Objectvar obj1 = {name: 'Rattz',age: 20,hello: function () {return "I'm " + name;}var obj2 = obj1.clone();console.log(obj1.age);//測(cè)試2 Arrayvar 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，那么最簡(jiǎn)單的方法是使用 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 數(shù)組的深度復(fù)制解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
