循环在我们的工作当中是非常频繁使用的，每个循环应用的场景和适用的范围都有一些区别，如果只是单纯的比较哪个好哪个不好，应该是没有结果的，我这里做的性能对比，仅仅从循环读取数值上的区别。主要包括：
forfor offor inforEachmapwhiledo whilesomefilter
这里使用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)
})
