共计 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); |
正文完
发表至: 前端开发
2015-05-06