javascript 数组的深度复制

11,757次阅读
4 条评论

共计 1817 个字符,预计需要花费 5 分钟才能阅读完成。

提醒:本文最后更新于2017-02-09 16:49,文中所关联的信息可能已发生改变,请知悉!

一般情况下,使用 “=” 可以实现赋值。但对于数组、对象、函数等这些引用类型的数据,这个符号就不好使了。

1. 数组的简单复制

1.1 简单遍历

最简单也最基础的方式,自然是循环处理。示例:

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 方法实现。示例:

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()。示例:

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 深度复制的完全实现

考虑到多维数组的嵌套,以及数组值为对象的情况,可以作如下原型扩展(当然写为普通函数实现也是可以的,原型扩展是不建议的方式):

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 插件方法。示例:

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);

正文完
 0
任侠
版权声明:本站原创文章,由 任侠 于2015-05-06发表,共计1817字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(4 条评论)
验证码
sean 评论达人 LV.1
2015-07-18 16:09:19 回复
Google Chrome 42.0.2311.152 Google Chrome 42.0.2311.152 Windows 7 x64 Edition Windows 7 x64 Edition

没看懂 :eek:

 Windows  Chrome  中国河南省郑州市联通
林三 评论达人 LV.1
2015-06-19 09:46:55 回复
Google Chrome 31.0.1650.63 Google Chrome 31.0.1650.63 Windows XP Windows XP

我只是过来感受数据库的迷茫,顺便预祝端午节快乐哟!

 Windows  Chrome  中国湖北省电信
知道91博客 评论达人 LV.1
2015-05-21 01:34:18 回复
Google Chrome 41.0.2272.89 Google Chrome 41.0.2272.89 Windows 7 x64 Edition Windows 7 x64 Edition

现在一般都用jQuery包装了吧

 Windows  Chrome  中国四川省成都市电信
夏日博客 评论达人 LV.1
2015-05-12 16:12:16 回复
Google Chrome 31.0.1650.63 Google Chrome 31.0.1650.63 Windows XP Windows XP

好深奥的js数组。

 Windows  Chrome  中国北京北京市电信