数组下标获取a[1]真的比对象属性获取b['a1']快吗?附测试结果
最近看到一篇文章如下:
JavaScript获取数据的性能有如下顺序(从快到慢):变量获取 > 数组下标获取(对象的整数索引获取) > 对象属性获取(对象非整数索引获取)。我们可以通过最快的方式代替最慢的方式:
var body = document.body;
var maxLength = someArray.length;
//...
需要考虑,作用域链和原型链中的对象索引。如果作用域链和原型链较长,也需要对所需要的变量继续缓存,否则沿着作用域链和原型链向上查找时也会额外消耗时间。
测试代码如下:
var arr = [];
var obj = {};
for (let i = 0; i < 100000; i ++) {
arr[+i] = + i;
obj['a' + i] = + i;
}
console.time('arr');
console.log(arr[10000]);
console.timeEnd('arr');
console.time('obj');
console.log(obj['a10000']);
console.timeEnd('obj');
chrome环境
// 测试结果1
10000
arr: 0.484ms
10000
obj: 0.248ms
// 测试结果2
10000
arr: 0.242ms
10000
obj: 0.105ms
// 测试结果3
10000
arr: 0.272ms
10000
obj: 0.168ms
```bash
node环境 v7.6
```bash
// 测试结果1
10000
arr: 2.123ms
10000
obj: 0.098ms
// 测试结果2
10000
arr: 2.024ms
10000
obj: 0.096ms
// 测试结果3
10000
arr: 1.939ms
10000
obj: 0.097ms
```bash
不管在node环境还是chrome环境下,都是对象属性获取较快,是我的测试方式有问题么?
8 回复
let arr = [1,2,3];
let obj = {
a:1,
b:2,
c:3
};
console.time('obj');
console.log(obj['a']);
console.timeEnd('obj');
console.time('arr');
console.log(arr[0]);
console.timeEnd('arr');
console.time('arr');
console.log(arr[0]);
console.timeEnd('arr');
console.time('obj');
console.log(obj['a']);
console.timeEnd('obj');
//输出
1
obj: 4.885ms
1
arr: 0.228ms
1
arr: 0.105ms
1
obj: 0.047ms
//调换下顺序
console.time('arr');
console.log(arr[0]);
console.timeEnd('arr');
console.time('obj');
console.log(obj['a']);
console.timeEnd('obj');
console.time('arr');
console.log(arr[0]);
console.timeEnd('arr');
console.time('obj');
console.log(obj['a']);
console.timeEnd('obj');
//输出
1
arr: 2.061ms
1
obj: 0.065ms
1
arr: 0.036ms
1
obj: 0.018ms
@without-yy 我把两段代码分开测试多次,发现还是无法比较出快慢,这两个区别似乎都不是特别大。
@merrynode 我在chrome里测试看不出区别,node中不管谁在第一个耗时都是最多的 不过不知道原因,可能跟js解释器有关系吧, 新手一枚- -
@without-yy 嗯,这点性能应该忽略不计了。
这才读一次,能说明什么,要考虑这种效率那干脆什么解释型语言都不要用了,因为任何解释的过程都是浪费资源的
不太明白为什么JS程序员要关心这个。C程序员才要关心这个。而且测试方法也不太好,至少要持续几百毫秒才能减少误差。你那个时间我看主要是输出字符串(也就是console.log
)所花的时间。
@zengming00 麻烦请看完再撕,谢谢,楼上我已经说了这点性能可以忽略不计。
LZ 可以试试 var arr =new Array(100000)