将数组连接到自身是否比循环遍历数组以创建更多索引更快？

Question

将数组连接到自身是否比循环遍历数组以创建更多索引更快？

5

我刚刚在three.js的github页面上查看了示例的源代码，发现了这个ImprovedNoise类，它基本上是一个Perlin噪声脚本：

https://github.com/mrdoob/three.js/blob/master/examples/js/ImprovedNoise.js

在ImprovedNoise函数的顶部是这个：

var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
         23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
         174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
         133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
         89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
         202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
         248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
         178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
         14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
         93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];

for (var i=0; i < 256 ; i++) {

    p[256+i] = p[i];

}

您会注意到，p中填充了一个随机排序的数字0到255的数组。一旦建立了p数组，脚本就会在数组中的每个位置执行一个for循环，并在从256到511的位置上有效地锁定自己的副本。顺序相同，但索引偏移了256。

因此，我的问题是：在JavaScript中循环遍历数组是否比简单地执行..更快？

p = p.concat(p);

- treeface

1

你应该尝试使用http://jsperf.com/。 - James Montagne

1

Benchmark - Raynos

3个回答

4

好的，我将为您计时。将编辑以包括更多浏览器（1000000次执行您代码中的任何一个）。这也是一个很好的浏览器测试！机器规格为i5 430M和4GB RAM，运行win7 64位操作系统。

测试代码：

<script>

function do1(){
p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
         23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
         174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
         133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
         89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
         202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
         248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
         178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
         14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
         93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
for (var i=0; i < 256 ; i++) {

    p[256+i] = p[i];

}
}

function do2(){
p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
         23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
         174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
         133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
         89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
         202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
         248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
         178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
         14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
         93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
p = p.concat(p);
}

function timeit(func){
var date1 = new Date(); 
var start = date1.getTime();
for (i=0;i<1000000;i++) func();
var date2 = new Date();
var end = date2.getTime();
alert(end-start);
}

timeit(do1);
//timeit(do2); // uncomment to activate

</script>

Chrome 11

方法1（循环）：

4669毫秒
4809毫秒
5103毫秒
5025毫秒
4786毫秒

方法2（连接）：

387毫秒
370毫秒
494毫秒
640毫秒
394毫秒

Opera 11.1（3个测试...需要很长时间）

方法1（循环）

7884毫秒
7621毫秒
7546毫秒

注意：其中一次运行我得到了>98000ms..不知道发生了什么。

方法2（连接）

27684毫秒
28479毫秒
23539毫秒

IE 9

方法1（循环）

6065毫秒
6026毫秒
6214毫秒

方法2（连接）

8064毫秒
8105毫秒
7954毫秒

- Pwnna

3

您无需完全复制数组，只需使用p [i％256]来访问其数字成员即可。

- RobG

这太棒了。+1 因为你有创意！ - treeface

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Domenic · Accepted Answer

这个方法的速度与浏览器相关：

Firefox 4中，concat方法大约只有for循环的一半快。
Chrome 11中，concat方法比for循环快10倍。
IE9中，concat方法大约只有for循环的3/4快。
Safari 5中，concat方法大约只有for循环的1/3快。
Opera 11中，concat方法大约只有for循环的1/4快。

你可以自己试一下：

http://jsperf.com/concat-vs-forloop