zoukankan      html  css  js  c++  java
  • 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数据结构

  • 相关阅读:
    tabbar 旋转指定的页面
    GDAL中文路径不能打开&Shp文件字段属性值中文乱码
    Project : error PRJ0019: 工具从"Moc'ing xxx.h..."
    详解Android中的屏幕方向
    qt中获取文件路径和文件名
    vs2005下Qt项目中修改exe图标的方法
    Qt & C/C++统计运行时间
    Qt 中Treewidget添加右键菜单
    QT 中文乱码解决方案
    Qt多线程应用QRunnable显示进度条示例
  • 原文地址:https://www.cnblogs.com/youhong/p/10858834.html
Copyright © 2011-2022 走看看