【JavaScript】for、for-in、forEach、for-of四种循环区别

Array

js的Array跟我们一般所说的数组有区别，首先Array内存空间并非连续的，再者，在Array中存储的值，是Array的属性，其“索引”是字符而非数值。

for

arr = ['a', 'b']
a['name'] = 'arrName'
Array.prototype.fatherName = 'fatherArray'
for(let i=0; i<arr.length; i++) {
	console.log(arr[i])
	} //只会输出'a', 'b'

• for用于遍历Array中的“索引”属性
• 一般情况下效率最好
• 但是对于稀疏数组处理不好，不会事前对Array的空值进行筛选

for-in

arr = ['a', 'b']
a['name'] = 'arrName'
Array.prototype.fatherName = 'fatherArray'
for(i in arr) {
	console.log(i)
	} //不仅输出'a'、'b'，还会输出'arrName'、'fatherArray'

• for-in遍历所有可枚举属性，包括原型链上的属性（例子中的fatherName）
• 效率比for低，但是实现处理Array中的空值，对于稀疏矩阵的较为友好
• 适用于属性不明确或未知的Array

forEach

arr = ['a', 'b']
a['name'] = 'arrName'
Array.prototype.fatherName = 'fatherArray'
arr.forEach(data => {
	console.log(arr[i])
	}) //只会输出'a', 'b'

• forEach遍历Array中的“索引”属性，且索引值为数字
• 不响应break、continue

for-of

• 修正for-in会遍历所有属性的缺陷
• 修正forEach不能相应break、continue的缺陷

参考：
深入了解 JavaScript 中的 for 循环