一般情況下,使用 “=” 可以實現賦值。但對於陣列、物件、函式等這些引用型別的資料,這個符號就不好使了。
1. 陣列的簡單複製
1.1 簡單遍歷
最簡單也最基礎的方式,自然是迴圈處理。示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function array_copy(arr) { var out = [], i, len; if (arr 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 out; } //測試 var arr1 = [1, 2, 3, 4], arr2 = array_copy(arr1); console.log(arr1, arr2); arr2[2] = 10; console.log(arr1[2], arr2[2]); // 3 10 |
1.2 變通的複製實現
經常出現在面試題中的取巧方法,是使用 slice 或 contcat 方法實現。示例:
1 2 3 4 5 6 7 8 |
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()。示例:
1 2 3 4 5 6 7 8 |
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 深度複製的完全實現
考慮到多維陣列的巢狀,以及陣列值為物件的情況,可以作如下原型擴充套件(當然寫為普通函式實現也是可以的,原型擴充套件是不建議的方式):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
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); |
2.3 使用 jQuery 的 extend 方法
如果你在使用 jQuery,那麼最簡單的方法是使用 extend 外掛方法。示例:
1 2 3 4 5 6 |
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); |