js中4种遍历语法比较

前言：本文主要比较for、for-in、forEach和for-of的异同以及优缺点。

for

for循环是最原始最易理解的循环遍历方式

for(var index = 0;index < arr.length;index++){
    console.log(arr[index])
}

• 使用continue和break可以跳出本次循环和退出循环

forEach

上述for循环的写法比较繁琐，因此数组提供了内置的forEach方法

arr.forEach((item, index) => {
    consoel.log(item)
})

注意：

• forEach的写法带来了便利，但由于其每次循环实际上是一个回调函数，因此在函数内部无法用continue和break（用于循环）跳出循环
• 可以用return跳出本次循环（相当于continue），而要退出循环只能抛出错误

var arr = [1,2,3]
arr.forEach((item) => {
    if (item === 2){
        return;// 跳出本次循环
    }
    console.log(item)
}
// 输出1，3
try {
    arr.forEach((item) => {
    if (item === 2){
        throw new Error() // 退出循环
    }
    console.log(item)
})
} catch(e) {}
// 输出1

for-in

for-in主要为遍历对象而设计，也可以遍历数组的键名。

for-in有几个特点，通常情况下被认为是缺点：

• 数组的键名是数字，但for-in循环是以字符串作为键名

var arr = ['a']
for(var item in arr){
    console.log(item, typeof item)
}
// 1, string

• for-in循环无法保证对数组的遍历顺序（遍历对象时也无法保证），由于数组是以键值对的形式存储（详情可见js的数组在内存中是如何存储的），因此其无法保证遍历顺序的原因与遍历对象一致，详情可见js中对象的输出顺序
• for-in会遍历所有可枚举属性（包括原型链上的属性），且由于js中数组是以键值对的形式存储，因此数组的非索引属性也会被遍历

var arr = ['a', 'b']
Array.prototype.protoName = '原型属性'
arr.name = '非索引属性'
for(var item in arr){
    console.log(arr[item])
}
// a，b，'非索引属性'，'原型属性'

可以发现，for-in不仅遍历了原型链上的属性，新增的非索引属性name页被遍历，因此for-in不适合遍历数组。（由于length等属性是不可枚举属性，因此没有被遍历）

• for-in循环性能较差
  
  由于每次循环，for-in不仅会搜索实例属性，还会搜索原型属性，因此相比于其他循环方式，for-in的速度较慢。

var arr = new Array(10000)
for(var i=0;i< 10000;i++){
    arr[i]=i
}
var length = arr.length
console.time('for')
for (var index=0; index< length; index++){
    //
}
console.timeEnd('for')
console.time('for-in')
for(var index in arr){
    //
}
console.timeEnd('for-in')
// for:0.2839ms
// for-in: 1.1479ms

因此，除非需要迭代一个属性数量未知的对象，否则并不适合用for-in循环。

以上for-in的特性，在平常开发中共基本上都是缺点，但有一种可能算是优点的特性：for-in只会遍历数组中存在的实体

var arr = new Array(3)
arr[2] = 'hello world'
var length = arr.length
for (var index=0; index< length; index++){
    console.log(arr[index])
}
// undefined,undefined, 'hello world'
for(var index in arr){
    console.log(arr[index])
}
// 'hello world'

可以看到for-in会忽略数组中为定义的部分，可以用于遍历长度很大的稀疏数组。）

for-of

相比于以上几点，for-of几乎结合了它们的所有优点：

• 有着for-in一样简单的语法，但没有for-in的缺点
• 不同于forEach，for-of可以使用break和continue跳出循环
• 提供了遍历所有数据结构的统一操作接口
• 不仅支持对象和数组的遍历，for-of支持一切可迭代对象的遍历，包括类数组、字符串的遍历；它将字符串视为一系列Unicode字符来遍历。

但需要注意，普通对象不是可迭代对象，不能用for-of遍历。想要迭代一个对象，可以用for-in，也可以将对象使用Map数据结构。