js比较Map集合取值和Array循环取值的速度差异

问题

js新的数据类型Map集合，具有数组和对象的优点，不清楚Map的同学，先移步 ES6之Map的用法，
但是在使用set方法取值的时候，是否比使用数组的循环取值要快呢？理论上来说，直接取key/value是高性能的，如果在不探究深层次js解析机制的情况下，我们可以通过简单的测试函数来打印出Map取值和for循环的性能比较。

代码

let arr=[];
let arrLength = arr.length = 10000;
for(let i=0;i<arrLength;i++){
    arr[i] = i //arr为一个长度为10000的数组，0-10000
}

let m = new Map()
for(let j=0;j<arrLength;j++){
    m.set(arr[j],arr[j])//m为一个长度为10000的Map集合，key:0-10000,value:0-10000
}



//以下开始比较运行时间/
let rs = arrLength-1;
//取10000次的Map,统计时间
console.time();
for(let c=0;c<arrLength;c++){
    m.get(rs)
}

console.timeEnd();

//取10000次的arr,统计时间
console.time();
for(let c=0;c<arrLength;c++){
    arr.some((c,i,a)=>{ //数组只能用
        return  i == rs
    })
}
console.timeEnd();

结果

default: 1.3701171875ms
default: 3215.39013671875ms

分析

可以看到，Array.some在最大的循环次数下，比Map取值满了2000多倍;
实际工作场景中，取随机key的情况下，也有大概100倍至200倍的速度差异;
即使每次数组取得第一个元素不用“循环”，也有10倍的性能差异，将上述代码中let rs = arrLength-1;改成 let rs = 0;即可体验到。

而且在现在流行各大前端框架中，Map集合是可以被循环渲染到HTML模板中的，类似于 let item of items 此种用法一样对Map集合有效，所以可以放心使用。

原文：https://appsoftea.com/zh/javascript-map-set-vs-array-loop/