• 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 = {name:'snail',age:18}
    for(var key in obj){
      console.log(key)
    }

    6.for...of循环

      可以遍历拿到每一个元素

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

    7.map映射

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

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

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

    var arr = [0,1,2,3]
    arr.map((item)=>{
      return item*2
    })

    8.filter()过滤循环

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

      它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

    var arr = [0,4,2,3,5]
    arr.filter((item)=>{
      return (item>3)
    })

    9.some(),every()遍历

      统计数组是否满足某个条件,这两个方法返回一个布尔值,表示判断数组成员是否符合某种条件。

      它们接受一个函数作为参数,所有数组成员依次执行该函数。该函数接受三个参数:当前成员、当前位置和整个数组,然后返回一个布尔值。

      some方法是只要一个成员的返回值是true,则整个some方法的返回值就是true,否则返回false

      every方法则相反,所有成员的返回值都是true,整个every方法才返回true,否则返回false。两相比较,some()只要有一个是true,便返回true;而every()只要有一个是false,便返回false.

      这两个方法在实际开发中,大有可用之处。比如在判定用户是否勾选了不可操作的数据,或者是否勾选了一条可以操作的数据可以使用这两个方法遍历循环数组。

    10.reduce()遍历

      arr.reduce(callback,initialvalue)函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。

      第一个参数是一个函数。该函数接受以下四个参数。

        1.Accumulator(累计器)

        2.Current Value(当前值)

        3.Current Index(当前索引)

        4.Source Array(源数组)

        这四个参数之中,只有前两个是必须的,后两个则是可选的。

      第二个参数是初始值

        如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

    有初始值:

    var arr = [2,3,4,5]
    arr.reduce((prev,curt)=>{
      console.log(`执行回调拿到的值:${prev},当前处理的值:${curt}`)
      return prev+curt
    },0)

    结果:

    执行回调拿到的值:0,当前处理的值:2
    执行回调拿到的值:2,当前处理的值:3
    执行回调拿到的值:5,当前处理的值:4
    执行回调拿到的值:9,当前处理的值:5
    14

    无初始值:

    var arr = [2,3,4,5]
    arr.reduce((prev,curt)=>{
      console.log(`执行回调拿到的值:${prev},当前处理的值:${curt}`)
      return prev+curt
    })

    结果:

    执行回调拿到的值:2,当前处理的值:3
    执行回调拿到的值:5,当前处理的值:4
    执行回调拿到的值:9,当前处理的值:5
    14

    reduce具体用法:

      数组求和,求乘积:

    var arr = [0,1,2,3]
    arr.reduce((x,y)=>{
      return x+y
    },0)

      计算数组中每个元素出现的次数:

    let arr = ['A', 'B', 'T', 'B', 'A','C','A'];
    arr.reduce((prev,curt)=>{
      if(curt in prev){
        prev[curt]++
      }else{
        prev[curt] = 1 
      }
      return prev
    },{})
  • 相关阅读:
    rem是如何实现自适应中的?
    meta基础知识
    JqueryMobile动态生成listView并实现刷新的两种方法
    javascript中for/in循环及使用技巧
    JavaScript中this详解
    使用css实现全兼容tooltip提示框
    如何使用CSS3画出一个叮当猫
    jQuery实现的Div窗口震动效果实例
    jQuery实现动态添加和删除一个div
    js对文章内容进行分页示例代码
  • 原文地址:https://www.cnblogs.com/cqweb/p/14136021.html
Copyright © 2020-2023  润新知