您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

JavaScript 数组的深度复制解析

2024/3/8 2:05:22发布35次查看
对于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);
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product