循环在我们的工作当中是非常频繁使用的,每个循环应用的场景和适用的范围都有一些区别,如果只是单纯的比较哪个好哪个不好,应该是没有结果的,我这里做的性能对比,仅仅从循环读取数值上的区别。主要包括:
for
for of
for in
forEach
map
while
do while
some
filter
这里使用webWork
跑测试例子:
var worker = new Worker('work.js');
worker.postMessage("message");
this.addEventListener('message', function (e) {
let array = []
function initData() {
for (let i = 0; i < 1000000; i++) {
array.push(i)
}
}
initData()
console.log(array)
})
function testFunction(array) {
function testFor() {
let newArray = []
console.time('testFor')
for (let i = 0; i < array.length; i++) {
newArray.push(array[i])
}
console.timeEnd('testFor')
}
testFor()
function testForLen() {
let newArray = []
console.time('testForLen')
for (let i = 0, len = array.length; i < len; i++) {
newArray.push(array[i])
}
console.timeEnd('testForLen')
}
testForLen()
function testForIn() {
let newArray = []
console.time('testForIn')
for (let i in array) {
newArray.push(array[i])
}
console.timeEnd('testForIn')
}
testForIn()
function testForOf() {
let newArray = []
console.time('testForOf')
for (let i of array) {
newArray.push(array[i])
}
console.timeEnd('testForOf')
}
testForOf()
function testWhile() {
let newArray = []
console.time('testWhile')
let i = 0
while (i < array.length) {
newArray.push(array[i])
i++
}
console.timeEnd('testWhile')
}
testWhile()
function testDoWhile() {
let newArray = []
console.time('testDoWhile')
let i = 0
do {
newArray.push(array[i])
i++
} while (i < array.length);
console.timeEnd('testDoWhile')
}
testDoWhile()
function testMap() {
let newArray = []
console.time('testMap')
array.map((item) => {
newArray.push(item)
})
console.timeEnd('testMap')
}
testMap()
function testForeach() {
let newArray = []
console.time('testForeach')
array.forEach((item) => {
newArray.push(item)
})
console.timeEnd('testForeach')
}
testForeach()
function testFilter() {
let newArray = []
console.time('testFilter')
array.filter((item) => {
newArray.push(item)
})
console.timeEnd('testFilter')
}
testFilter()
function testSome() {
let newArray = []
console.time('testSome')
array.some((item) => {
newArray.push(item)
})
console.timeEnd('testSome')
}
testSome()
function testReduce() {
let newArray = []
console.time('testReduce')
array.reduce((all, a) => {
newArray.push(a)
}, 0)
console.timeEnd('testReduce')
}
testReduce()
}
1000000数据量测试
单位ms
5000000数据量测试
单位ms
10000000数据量测试
单位ms
20000000数据量测试
单位ms
测试环境
- CPU I7 7700K
- 内存 16G 3200HZ
- 谷歌浏览器 80.0.3987.162(正式版本) (32 位)
- 系统win10专业版 64位
经过上面的四轮对比:
- 性能最强的是
while
,不管数据量的大小,一直稳居第一 - 次之的
do while
、for
、for缓存length
三者性能差距并不大,在数据量低于2千万级别时:do while
>for
>for缓存length
,上了两千万后:for缓存length
>do while
>for
- 第三梯队的
forEach
、filter
、some
、reduce
几乎性能相当,只有filter
一直是第五,其他三者轮流换位置:filter
>forEach
≈some
≈reduce
- 第四梯队的
map
、for of
,两者在数据量较低差距还是挺大的,当数据量上了2000W,性能差距就没那么大了:map
>for of
- 性能最差的就是
for in
,基本上是最快的几十倍的性能差距。
结果
while
> do while
≈ for
≈ for缓存length
> filter
> forEach
≈ some
≈ reduce
> map
> for of
> for in
;
结果不代表这些循环方法的真实最终效果,只能代表在我的电脑上,这些方法测试读取数组数据之间的差异,for of
for in
更擅长对象,至于真实的效果就不太敢定论了,但是对于一般的循环 for
循环的性能肯定是非常好的,所以能够用for
循环就不要用map
、forEach
等遍历方式,当然如果真的对于性能要求并不那么高的项目,用什么的区别也不太大,毕竟在百万级别的数据读取差异上,时间差距也在几十ms上,只是对于复杂大量数据上,就要多多注意,另外仅仅在for
循环上,书写方式的差异也有性能的差异。我自己也封装过一个方法,包裹for循环使它能够像forEach
一样的书写方式,提高效率的同时也不影响性能。
/**
* 遍历工具,dataset可以是数组和对象
* 回调函数 handler( item, index|key, dataset)
* break----用return false
* continue --用return ture
* @param {Object | Array} dataset 对象或者数组
* @param {Function} handler 回调函数
* @param {Context} context 上下文this
* @return {Array} 返回对象或数组
*/
function each(dataset, handler, context) {
let callback = 'undefined' === typeof context ? handler : function (value, index, collection) {
return handler.call(context, value, index, collection);
};
let i, len, res;
if (dataset instanceof Array) { //数组
i = 0;
len = dataset.length;
for (; i < len; i++) {
res = callback(dataset[i], i, dataset);
if (false === res) {
break;
} else if (true === res) {
continue;
}
}
} else { //键值对象
let keys = getkeys(dataset);
i = 0;
len = keys.length;
for (; i < len; i++) {
res = callback(dataset[keys[i]], keys[i], dataset);
if (false === res) {
break;
} else if (true === res) {
continue;
}
}
}
/**
* 获取对象自有属性名
* @param {any} obj 对象
* @return {Array} 返回对象key数组
*/
function getkeys(obj) {
if (Object.prototype.toString.call(obj).slice(8, -1) !== 'Object') {
return [];
}
if (Object.keys) {
return Object.keys(obj);
}
}
return dataset;
}
示例
let object1 = {
ke: 1,
ke2: 2,
ke3: 3,
ke4: 5
}
each(object1, (item, key) => {
console.log(item)
})
let array = [1, 2, 3, 4, 5, 6, 7]
each(array, (item, key) => {
console.log(item)
})
let array = [1, 2, 3, 4, 5, 6, 7]
each(array, (item, key) => {
if(item>5){
return false //终止循环
}
console.log(item)
})