为了在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包含对对象的引用,对象将不会被克隆,但只有引用将被复制,因此两个数组将有对相同对象的引用。 但这不是问题的关键。

我只是在问速度。


当前回答

一个简单的解决方案:

original = [1,2,3]
cloned = original.map(x=>x)

其他回答

克隆数组至少有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

这取决于浏览器。如果你在博客文章array .prototype.slice vs手动创建数组,有一个粗略的性能指南:

结果:

如果你是关于切片,它是用来从数组复制元素,并创建一个克隆相同的编号。或者更少的元素。的元素。

Var arr = [1,2,3,4,5]; 函数slc() { Var切片= arr。片(0 5); / /加勒比海盗。切片(开始复制主数组的位置,没有。新数组中的项) console.log(切片); } slc (arr);

它取决于数组的长度。如果数组长度<= 1,000,000,slice和concat方法花费的时间大致相同。但当你给出一个更大的范围时,concat方法胜出。

例如,试试下面的代码:

var original_array = [];
for(var i = 0; i < 10000000; i ++) {
    original_array.push( Math.floor(Math.random() * 1000000 + 1));
}

function a1() {
    var dup = [];
    var start = Date.now();
    dup = original_array.slice();
    var end = Date.now();
    console.log('slice method takes ' + (end - start) + ' ms');
}

function a2() {
    var dup = [];
    var start = Date.now();
    dup = original_array.concat([]);
    var end = Date.now();
    console.log('concat method takes ' + (end - start) + ' ms');
}

function a3() {
    var dup = [];
    var start = Date.now();
    for(var i = 0; i < original_array.length; i ++) {
        dup.push(original_array[i]);
    }
    var end = Date.now();
    console.log('for loop with push method takes ' + (end - start) + ' ms');
}

function a4() {
    var dup = [];
    var start = Date.now();
    for(var i = 0; i < original_array.length; i ++) {
        dup[i] = original_array[i];
    }
    var end = Date.now();
    console.log('for loop with = method takes ' + (end - start) + ' ms');
}

function a5() {
    var dup = new Array(original_array.length)
    var start = Date.now();
    for(var i = 0; i < original_array.length; i ++) {
        dup.push(original_array[i]);
    }
    var end = Date.now();
    console.log('for loop with = method and array constructor takes ' + (end - start) + ' ms');
}

a1();
a2();
a3();
a4();
a5();

如果您将original_array的长度设置为1,000,000,slice方法和concat方法大约需要相同的时间(3-4 ms,取决于随机数)。

如果将original_array的长度设置为10,000,000,则slice方法需要超过60 ms, concat方法需要超过20 ms。

ECMAScript 2015的扩展操作符方式:

基本的例子:

var copyOfOldArray = [...oldArray]
var twoArraysBecomeOne = [...firstArray, ..seccondArray]

在浏览器控制台中尝试:

var oldArray = [1, 2, 3]
var copyOfOldArray = [...oldArray]
console.log(oldArray)
console.log(copyOfOldArray)

var firstArray = [5, 6, 7]
var seccondArray = ["a", "b", "c"]
var twoArraysBecomOne = [...firstArray, ...seccondArray]
console.log(twoArraysBecomOne);

参考文献

展开运算符的6大用途 传播的语法