JavaScript 数组的深度复制解析

2019-11-20 08:36:36

字体：大中小

来源：转载

供稿：网友

对于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 Objectvar obj1 = {name: 'Rattz',age: 20,hello: function () {return "I'm " + name;}};var obj2 = obj1.clone();obj2.age++;console.log(obj1.age);//测试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;//测试1 Objectvar obj1 = {name: 'Rattz',age: 20,hello: function () {return "I'm " + name;}var obj2 = obj1.clone();console.log(obj1.age);//测试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，那么最简单的方法是使用 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 数组的深度复制解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：深入理解Node.js 事件循环和回调函数

下一篇：AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】