为了在JavaScript中复制数组:下面哪个使用更快?

片的方法

var dup_array = original_array.slice();

For循环

for(var i = 0, len = original_array.length; i < len; ++i)
   dup_array[i] = original_array[i];

我知道这两种方法都只做一个浅拷贝:如果original_array包含对对象的引用,对象将不会被克隆,但只有引用将被复制,因此两个数组将有对相同对象的引用。 但这不是问题的关键。

我只是在问速度。


当前回答

基准时间!

function log(data) { document.getElementById("log").textContent += data + "\n"; } benchmark = (() => { time_function = function(ms, f, num) { var z = 0; var t = new Date().getTime(); for (z = 0; ((new Date().getTime() - t) < ms); z++) f(num); return (z) } function clone1(arr) { return arr.slice(0); } function clone2(arr) { return [...arr] } function clone3(arr) { return [].concat(arr); } Array.prototype.clone = function() { return this.map(e => Array.isArray(e) ? e.clone() : e); }; function clone4(arr) { return arr.clone(); } function benchmark() { function compare(a, b) { if (a[1] > b[1]) { return -1; } if (a[1] < b[1]) { return 1; } return 0; } funcs = [clone1, clone2, clone3, clone4]; results = []; funcs.forEach((ff) => { console.log("Benchmarking: " + ff.name); var s = time_function(2500, ff, Array(1024)); results.push([ff, s]); console.log("Score: " + s); }) return results.sort(compare); } return benchmark; })() log("Starting benchmark...\n"); res = benchmark(); console.log("Winner: " + res[0][0].name + " !!!"); count = 1; res.forEach((r) => { log((count++) + ". " + r[0].name + " score: " + Math.floor(10000 * r[1] / res[0][1]) / 100 + ((count == 2) ? "% *winner*" : "% speed of winner.") + " (" + Math.round(r[1] * 100) / 100 + ")"); }); log("\nWinner code:\n"); log(res[0][0].toString()); <textarea rows="50" cols="80" style="font-size: 16; resize:none; border: none;" id="log"></textarea>

自单击按钮以来,基准测试将运行10秒。

我的结果:

Chrome (V8引擎):

1. clone1 score: 100% *winner* (4110764)
2. clone3 score: 74.32% speed of winner. (3055225)
3. clone2 score: 30.75% speed of winner. (1264182)
4. clone4 score: 21.96% speed of winner. (902929)

Firefox (SpiderMonkey Engine):

1. clone1 score: 100% *winner* (8448353)
2. clone3 score: 16.44% speed of winner. (1389241)
3. clone4 score: 5.69% speed of winner. (481162)
4. clone2 score: 2.27% speed of winner. (192433)

赢家代码:

function clone1(arr) {
    return arr.slice(0);
}

赢家引擎: SpiderMonkey (Mozilla Firefox)

其他回答

在JavaScript中快速复制数组的方法:

第1集:

#2: array1copy = array1.slice(0);

#3: array1copy = array1.slice();

如果数组对象包含一些json不可序列化的内容(函数,Number。POSITIVE_INFINITY等)更好地使用

array1copy = JSON.parse(JSON.stringify(array1))

那我们的方式呢?

arr2 = [...arr1];

如果你想在JS中获得一个REAL克隆对象/数组,其中包含所有属性和子对象的克隆引用:

export function clone(arr) {
    return JSON.parse(JSON.stringify(arr))
}

所有其他操作都不会创建克隆,因为它们只是改变根元素的基址,而不是所包含对象的基址。

除了递归遍历对象树。

对于一个简单的副本,这些是可以的。对于存储地址相关的操作,我建议(在大多数其他情况下,因为这是快速的!)类型转换为字符串和返回在一个完整的新对象。

克隆数组至少有6种方法:

循环 片 Array.from () concat 扩展语法(最快) map(函数(e){返回e;});

有一个巨大的基准线程,提供以下信息:

对于闪烁的浏览器,slice()是最快的方法,concat()稍慢,while循环慢2.4倍。 对于其他浏览器,while循环是最快的方法,因为这些浏览器没有对切片和连接进行内部优化。

2016年7月依然如此。

下面是一些简单的脚本,您可以将它们复制粘贴到浏览器的控制台,并多次运行以查看图片。它们输出毫秒,越低越好。

while循环

n = 1000*1000;
start = + new Date();
a = Array(n); 
b = Array(n); 
i = a.length;
while(i--) b[i] = a[i];
console.log(new Date() - start);

n = 1000*1000;
start = + new Date();
a = Array(n); 
b = a.slice();
console.log(new Date() - start);

请注意,这些方法将克隆Array对象本身,但是数组内容是通过引用复制的,而不是深度克隆。

origAr == clonedArr //returns false
origAr[0] == clonedArr[0] //returns true

正如@Dan所说:“这个答案很快就过时了。使用基准测试来检查实际情况”,有一个特定的答案从jsperf没有自己的答案:while:

var i = a.length;
while(i--) { b[i] = a[i]; }

有960,589次操作/秒,亚军a.c concat()为578,129次操作/秒,占60%。

这是最新的64位Firefox(40)。


@aleclarson创建了一个新的、更可靠的基准。