• JavaScript中遍历的几种方法


      JavaScript遍历的方法有以下几种

    1、while循环

      while后面跟着循环条件,只要满足循环条件,循环里的执行语句会一直执行。

    var i = 0
    while(i<10){
      console.log(i)
      i++  
    }

    2、do...while循环

      与while循环不同的是,这里是先执行执行语句,再判断循环的条件是否满足。所以,就算条件不满足,前面的执行语句都会先执行一遍。

    var i=0
    do{
      console,log(i)
      i++
    }while(i<10)

    3、for循环

      最常用的循环。

    var arr = [0,1,2,3]
    for(let i = 0;i < arr.length;i++){
        console.log(i)
    }

    4、forEach循环

    var arr = [0,1,2,3]
    arr.forEach((item,index)=>{
        console.log(`下标${index}的数为${item}`)
    })

    5、for...in循环

      遍历对象的属性获取到的是对象的属性的名称,遍历数组的时候拿到的是下标

    var obj = {color:'red',size:18}
    for(var key in obj){
      console.log(key)
    }

    结果:

    color

    size  

    var arr = [0,1,2,3]
    for(var key in arr){
        console.log(key);
    }
    

    结果: 0  1  2  3  

    6、for...of循环

      可以遍历拿到每一个元素。比如可以遍历拿到字符串的每一个字符。

    var str = 'apple'
    for(var item of str){
      console.log(item)
    }
    

    结果:a   p   p    l   e

    7、map映射

      map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。

      该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

      注意:是返回一个新数组,而不会改变原数组。

      比如将整数数组变成字符串数组(并不会改变原数组)

    var arr = [0,1,2,3]
    var strArr = arr.map((item)=>{
      return item+''
    });
    console.log(arr);
    console.log(strArr);

    结果:

    [0, 1, 2, 3]

    ["0", "1", "2", "3"]

    8、filter()过滤循环

      filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。

      它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。

      同样该方法不会改变原数组

    var arr = [1,3,5,4,6]
    var arr2 = arr.filter((item)=>{
      return (item>3)
    });
    console.log(arr);
    console.log(arr2);
    

    结果:

    [1, 3, 5, 4, 6]

    [5, 4, 6]

     

  • 相关阅读:
    ECharts学习总结(四):echarts的实例方法
    ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项
    ECharts学习总结(二):标签式单文件引入echarts的方法
    ECharts学习总结(一):ECharts的第一个图表
    Eclispe最常用的几个快捷键
    javascript数组去重的4个方法(转)
    数据库主键设计之思考(转)
    数据库插入数据返回当前自增主键ID值的方法
    Node.js制作图片下载爬虫的一般步骤
    Node.js mzitu图片批量下载爬虫1.00
  • 原文地址:https://www.cnblogs.com/qinjunlin/p/14137071.html
Copyright © 2020-2023  润新知