JS教程--for、for-in、forEach和for-of四种遍历语法比较

/js原生遍历/
//for循环遍历数组
for(var i=0;i<arrTmp.length;i++){
console.log(i+": "+arrTmp[i])
}

//for-in遍历对象属性,i指代属性名
for(var i in objTmp){
console.log(i+": "+objTmp[i])
}

//forEach遍历数组，三个参数依次是数组元素、索引、数组本身
arrTmp.forEach(function(value,index,array){
console.log(value+","+index+","+array[index])
})

for循环

–最原始
–最易理解的循环遍历方式
–写法繁琐
语法：
for(var index = 0;index < arr.length;index++){
console.log(arr[index])
}
–使用continue和break可以跳出本次循环和退出循环

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循环和for-in能正确响应break、continue和return语句，但forEach不行
r…of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩

for-in

、主要是遍历对象
、也可以遍历数组的键名
、数组的键名是数字，但for-in循环是以字符串作为键名

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

、for-in循环无法保证对数组/对象的遍历顺序，由于数组是以键值对的形式存储，
、for-in会遍历所有可枚举属性（包括原型链上的属性），由于js中数组是以键值对的形式存储，因此数组的非索引属性也会被遍历
、for-in不仅遍历了原型链上的属性，新增的非索引属性name也被遍历，因此for-in不适合遍历数组。（由于length等属性是不可枚举属性，因此没有被遍历）

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

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

for-of

、for-of几乎结合了以上所有优点：
、是遍历数组最简单直接的方法
、像for-in一样简单的语法，但没有for-in的缺点
、相对forEach，for-of可以使用break和continue跳出循环，支持return
、提供了遍历所有数据结构的统一操作接口
、不仅支持对象和数组的遍历，for-of支持一切可迭代对象的遍历，包括类数组、字符串的遍历；它将字符串视为一系列Unicode字符来遍历。
、但需要注意，普通对象不是可迭代对象，不能用for-of遍历。想要迭代一个对象，可以用for-in，也可以将对象使用Map数据结构
、语法：
for （var value of myArray）{console。log（value）}

、for in用于遍历对象的属性
、for of遍历数据，-比如数组中的元素

sara-

发布了45 篇原创文章 · 获赞 4 · 访问量 1087

私信关注