JavaScript数组深拷贝与浅拷贝:slice与concat实现详解

作者:函数茶馆

时间:2026-10-28

浏览:591

本文详解JavaScript中数组的浅拷贝与深拷贝概念,通过直接赋值演示浅拷贝的引用特性。重点介绍两种实现数组浅拷贝的方法:利用slice()截取数组和concat()连接数组,分析其语法参数及返回新数组的特性,帮助开发者避免修改原数组的问题。

文章目录

JavaScript数组浅拷贝与深拷贝概念

以下通过一个具体示例来说明:

参考代码:

var arr = ["One","Two","Three"];
var arrto = arr;
arrto[1] = "test";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,test,Three
document.writeln("数组的新值:" + arrto + "<br />");//Export:数组的新值:One,test,Three

上述直接赋值的方式属于浅拷贝。在实际开发中,这往往并非预期结果,因为我们通常希望原数组arr的值保持不变。

使用slice方法实现数组拷贝

方法一:使用js的slice函数

参考代码:

针对array对象的slice函数,
该方法返回数组的一段内容(结果仍为数组)。
arrayObj.slice(start, [end])
参数说明
arrayObj
必选项。指定一个 Array 对象。
start
必选项。指定arrayObj中开始复制部分的起始元素索引,从0开始计算。
end
可选项。指定arrayObj中结束复制部分的元素索引,从0开始计算。
功能说明
slice 方法返回一个包含arrayObj指定部分的 Array 对象。
slice 方法复制至 end 指定的元素之前(不包含该元素)。若 start 为负数,则按 length + start 处理,length 为数组长度;若 end 为负数,则按 length + end 处理。若省略 end 参数,则复制至 arrayObj 末尾。若 end 出现在 start 之前,则不向新数组复制任何元素。

示例:


参考代码:

var arr = ["One","Two","Three"];
var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three
document.writeln("数组的新值:" + arrtoo + "<br />");//Export:数组的新值:One,set Map,Three

使用concat方法实现数组拷贝

方法二:使用js的concat方法

参考代码:

concat() 方法用于连接两个或多个数组。
该方法不会修改现有数组,而是返回被连接数组的一个副本。
语法格式
arrayObject.concat(arrayX,arrayX,......,arrayX)
功能说明
返回一个新数组,由所有 arrayX 参数添加到 arrayObject 中生成。若 concat() 操作的参数是数组,则添加的是数组中的元素,而非数组本身。
var arr = ["One","Two","Three"];

示例:


参考代码:

   
var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three
document.writeln("数组的新值:" + arrtooo + "<br />");//Export:数组的新值:One,set Map To,Three

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章