[JavaScript知识库]js 中四种循环对比

js 中四种循环对比

for循环

for循环的特点是简单，书写麻烦，使用如下：

let arr = [1, 2, 3];

for(let i = 0; i < arr.length; i++){
	console.log(`${i} => ${arr[i]}`);
}

可以通过缓存数组长度的方式进行优化，当数组较大时效果比较明显。

let arr = [1, 2, 3];
let len = arr.length;

for(let i = 0; i < len; i++){
	console.log(`${i} => ${arr[i]}`);
}

for循环可以通过continue跳过本次循环或者通过break跳出循环。

forEach循环

forEach循环是数组自带的循环，可以通过return实现continue的效果，但是无法跳出循环（没有break功能），使用如下：

let arr = [1, 2, 3];

arr.forEach( item => {
	if(item === 2){
		return;
	}
	console.log(item);
});

for…in

for…in是专门用于对象的循环（也可用于数组），获取对象的key值，for…in循环还会遍历原型上的值，特别情况下, for … in 循环会以看起来任意的顺序遍历键名（对象的 常规属性和 排序属性的原因）。

let obj = {
	b: 1,
	a: 2,
	c: 3,
	100: 4,
	6: 10
};

obj.__proto__.k = 7;

for(let key in obj) {
	if(key == 6){
		continue;
	}
	console.log(`${key} => ${obj[key]}`)
};

for…of

for…of循环可以用于实现了Iterator接口的数据结构，比如：数组，map，set，使用方式如下：

let set = new Set([1, 2, 3]);

for(let item of set) {
	console.log(item);
}

性能

测试如下：

const data = new Array(40000000).fill(0);
let len = data.length;

// for
const forStart = new Date();
for(let i = 0; i < len; i++){};
const forEnd = new Date();

// forEach
const forEachStart = new Date();
data.forEach( item => {});
const forEachEnd = new Date();

// for...of
const forOfStart = new Date();
for(let item of data){}
const forOfEnd = new Date();

// for...in
const forInStart = new Date();
for(let index in data){};
const forInEnd = new Date();

console.log('for       耗时： ', forEnd - forStart);           // for       耗时：  21
console.log('forEach   耗时： ', forEachEnd - forEachStart);   // forEach   耗时：  319
console.log('for...of  耗时： ', forOfEnd - forOfStart);       // for...of  耗时：  463
console.log('for...in  耗时： ', forInEnd - forInStart);       // for...in  耗时：  18142

从上面结果看，性能排序为： for > forEach > for…of > for…in

总结