JavaScript数组复制的三种方法及常见误区

错误实现：直接赋值导致的引用问题

一、错误实现方式

许多开发者可能习惯直接使用等号进行赋值操作：

 
var array1 = new Array("1","2","3");
var array2;
array2 = array1;
array1.length = 0;
alert(array2); //返回为空

这种写法是错误的，因为JavaScript区分原始类型与引用类型（类似于Java和C#）。Array属于引用类型。

此时array2获取的是引用地址，因此对array1的任何修改都会直接反映在array2上。

正确实现：使用slice()与concat()方法

二、使用slice()方法

可以利用slice()函数进行复制，因为该函数返回一个新的数组对象。

 
var array1 = new Array("1","2","3");
var array2;
array2 = array1.slice(0);
array1.length = 0;
alert(array2); //返回1、2、3

三、使用concat()方法

需要注意，concat()返回的并非调用该函数的原Array实例，而是一个全新的Array对象，利用这一特性即可完成复制。

 
var array1 = new Array("1","2","3");
var array2;
array2 = array1.concat();
array1.length = 0;
alert(array2); //返回1、2、3

测试验证：多浏览器兼容性测试

四、测试验证

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Array Test</title>
<script type="text/javascript">
var array1;
var array2;
function clone1() {
array1 = new Array("1","2","3");
array2 = array1;
array1.length = 0;
alert(array2);
} 
function clone2() {
array1 = new Array("1","2","3");
array2 = array1.slice(0);
array1.length = 0;
alert(array2);
} 
function clone3() {
array1 = new Array("1","2","3");
array2 = array1.concat();
array1.length = 0;
alert(array2);
} 
</script>
</head>
<body>
<input type="button" value="clone1" onclick="clone1()" /><br />
<input type="button" value="clone2" onclick="clone2()" /><br />
<input type="button" value="clone3" onclick="clone3()" /><br />
</body>
</html>

在IE8及FF3.0环境下均通过测试