zoukankan      html  css  js  c++  java
  • javascript数组的16种循环(包含ES5、ES6)

    1.for

    优点:

      1.可以递增循环也可以递减循环

      2.可以使用break、continue控制是否跳出循环

    let list = ['a', 'b', 'c', 'd','e'];
    for (var i = 0; i < list.length; i++) {
         console.log(list[i])
     }
    // a、b、c、d、e
    let list = ['a', 'b', 'c', 'd', 'e'];
    for (var i = list.length - 1; i > 0; i--) {
        if (i === 0) {
            continue;
        }
        if (i === 2) {
            break;
        }
        console.log(list[i])
    }
    // e、d

    2.while(){}

    优点:没有兼容问题,且可以使用break、continue

    let list = ['a', 12, 'c', 'd', 'e', 'a'];
    let i = 0;
    while (i < list.length){
        console.log(list[i]);
        i++
    } //'a', 12, 'c', 'd', 'e', 'a'

    3.do{}while()

    优点:没有兼容性问题,且可以使用break、continue

    let list = ['a', 12, 'c', 'd', 'e', 'a'];
    let i = 0;
    do {
        console.log(list[i])
        i++;
    } while (i < list.length) //'a', 12, 'c', 'd', 'e', 'a'

    4.forEach

    优点:1.函数式编程方便使用

       2.返回值是undefined

    缺点:1.ECMAScript 5.1 ES5 IE9支持

    let list = ['a', 'b', 'c', 'd', 'e'];
    list.forEach((item,index,ary) => {
        console.log(`item:${item}----index:${index}----ary:${ary}`)
    })

      item:a----index:0----ary:a,b,c,d,e
      item:b----index:1----ary:a,b,c,d,e
      item:c----index:2----ary:a,b,c,d,e
      item:d----index:3----ary:a,b,c,d,e
      item:e----index:4----ary:a,b,c,d,e

     

    5.every

    功能:测试数组内容是否全部通过

    特点:1.[]数组大概率返回true

    缺点:1.ECMAScript 5.1 ES5 IE9支持

    let list = ['a', 12, 'c', 'd', 'e'];
    const isPass = list.every((item,index) => {
        return typeof item === 'string'
    })
    console.log(isPass) // false 

    6.some

    功能:测试数组有一项通过则为true否则为false

    特点: 空数组为false

    缺点:1.ECMAScript 5.1 ES5 IE9支持

    let list = ['a', 12, 'c', 'd', 'e'];
    const isPass = list.some((item,index) => {
        return typeof item === 'boolean'
    })
    console.log(isPass) //false

    7.indexOf

    功能:与findIndex一样

    缺点: ECMAScript 5.1 ES5 IE9支持

    let list = ['a', 12, 'c', 'd', 'e','a'];
    const result = list.indexOf('a2',2)
    console.log(result) // 5

    8.lastIndexOf

    功能:反向查找

    缺点: ECMAScript 5.1 ES5 IE9支持

    let list = ['a', 12, 'c', 'd', 'e','a'];
    const result = list.lastIndexOf('a',2)
    console.log(result) //0

    9.filter

    功能: 过滤数组,当返回值为true时保留,无法操作原数组

    缺点:ECMAScript 5.1 ES5 IE9支持

    let list = ['a', 12, 'c', 'd', 'e', 'a'];
    const result = list.filter((item, index) => {
        return typeof item === 'string'
    })
    console.log(result) // ["a", "c", "d", "e", "a"]

    10.map

    功能:可以对遍历项操作,且返回新的数组,元素组不改变

    缺点:ECMAScript 5.1 ES5 IE9支持

    let list = ['a', 12, 'c', 'd', 'e', 'a'];
    const result = list.map((item, index) => {
        return item + '_'
    })
    console.log(result) // ["a_", "12_", "c_", "d_", "e_", "a_"]

    11.reduce

    优点:累计计算非常好用

    缺点:上手难度比其他函数式编程高一些

    let list = ['a', 12, 'c', 'd', 'e', 'a'];
    const result = list.reduce((total,prev,index,arr) => {
        return total + prev;
    },'');
    console.log('result',result); //a12cdea

    12.for...in 

    缺点:虽然可以,不推荐遍历数组,一般用来遍历对象 毕竟key都给你输出了

    let list = ['a', 12, 'c', 'd', 'e', 'a'];
    for(let key in list){
        console.log(list[key]);
    } //'a', 12, 'c', 'd', 'e', 'a'

    13.find

    功能:获取数组符合条件的第一个值,如果没有找到返回undefined

    缺点: ECMAScript 2015 (6th Edition, ECMA-262) (ES6) IE不支持

    ,Edge 14-80支持

    let list = ['a', 12, 'c', 'd', 'e'];
    const result = list.find((item,index) => {
        return item === 'a'
    })
    console.log(result) // a

    14.findIndex

    功能:获取数组符合条件的第一个值得索引,如果没有找到就返回-1

    缺点:ECMAScript 2015 (6th Edition, ECMA-262) (ES6) IE不支持

    ,Edge 14-80支持

    let list = ['a', 12, 'c', 'd', 'e','a'];
    const result = list.findIndex((item,index) => {
        return item === 'a'
    })
    console.log(result)  // 0 

    15.for...of

    缺点:ECMAScript 2015 (6th Edition, ECMA-262) (ES6) IE不支持

    let list = ['a', 12, 'c', 'd', 'e', 'a'];
    for (let s of list) {
        console.log(s);
    } //'a', 12, 'c', 'd', 'e', 'a'

     16.includes

    判断数组中是否存在该值

    缺点: ECMAScript 2016 (ECMA-262) IE不支持

    let list = ['Jan', 'March', 'April', 'June'];
    const result = list.includes('Jan'); // true
  • 相关阅读:
    DevExpress ASP.NET Core Controls 2019发展蓝图(No.6)
    DevExpress v18.2版本亮点——Analytics Dashboard篇(二)
    VS插件CodeRush for Visual Studio发布v18.2.9|附下载
    DevExpress 2019 .NET产品现已完全支持Visual Studio 2019
    DevExpress v18.2版本亮点——Analytics Dashboard篇(一)
    Java开发神器——MyEclipse CI 2019.4.0 全新发布(附下载)
    DevExpress ASP.NET Core Controls 2019发展蓝图(No.5)
    JS原型链中的prototype与_proto_的个人理解与详细总结
    ASP.NET Core中的依赖注入(5):ServicePrvider实现揭秘【补充漏掉的细节】
    ASP.NET Core中的依赖注入(5): ServiceProvider实现揭秘 【解读ServiceCallSite 】
  • 原文地址:https://www.cnblogs.com/liangfc/p/12858325.html
Copyright © 2011-2022 走看看