美文网首页
JS中各种遍历方法

JS中各种遍历方法

作者: 守护银河的河童 | 来源:发表于2019-01-28 17:45 被阅读0次

    数组遍历方法

    • for循环 (★★★☆☆)

    使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。
    1.能被break
    2.会改变原数据
    3.对象及数组都适用

        var arr = [
            {id:1,value:'yoy'},
            {id:2,value:'cher'},
            {id:3,value:'nothing'}
        ]
        for(var j = 0; j < arr.length; j++) {
            console.log(j,arr[j])
        }
    

    • forEach(★★★★☆)

    最多可以接受三个参数的函数,ie8及以下不支持
    1.有兼容问题(现在可忽略不计)
    2.callback必填
    3.仅适用数组
    4.不能break,可以放进try模块

        var arr = [
            {id:1,value:'yoy'},
            {id:2,value:'cher'},
            {id:3,value:'nothing'}
        ]
        arr.forEach(function(v,key,arr){
            console.log(v,key,arr)
        })
    

    forEach无法在所有元素都传递给调用的函数之前终止(而for循环却有break方法),如果要提前终止,必须把forEach放在try块中,并能抛出一个异常。如果forEach()调用的函数抛出foreach.break异常,循环会提前终止

    function foreach(a,b,c){
      try{
        a.forEach(b,c);
      }catch(e){
        if(e===foreach.break)return;
       else throw e;
       }
      }
      foreach.break=new Error("StopIteration");
     }
    

    • map循环(★★★★☆)

    有返回值,可以return出来,map的回调函数中支持return返回值;
    map会根据index遍历,返回的新数组由return 后的表达式改变,
    (并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);
    1.有兼容问题(现在可忽略不计),与forEach一致有三个参数
    2.callback必填
    3.仅适用数组

    var arr = [
        {id:1,value:'yoyo'},
        {id:2,value:'cher'},
        {id:3,value:'nothing'}
    ]
    var res = arr.map(function (item,index,ary ) { 
        return item.value='new'; 
    }) 
    console.log(res);//--> ["new", "new", "new"];  原数组拷贝了一份,并进行了修改
    console.log(arr);//-->[ {id: 1, value: "new"},{id: 2, value: "new"},{id: 3, value: "new"}];  原数组并未发生变化
    
    • filter (★★★★★)

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
    1.ie8及以下有兼容问题(现在可忽略不计)
    2.filter() 不会对空数组进行检测
    3.filter() 不会改变原始数组

    var arr = [
        {id:1,value:'yoyo'},
        {id:2,value:'cher'},
        {id:3,value:'nothing'}
    ]
    
    console.log(arr.filter(item => item.value = 'new')) //[{id: 1, value: "new"},{id: 2, value: "new"},{id: 3, value: "new"}]
    
    • for of (不能获取数组的index) (★★★★★)

    for of 为es6的遍历方法
    虽然for of 适用数组
    1.有兼容问题
    2.可以break ,continue,return
    3.相比较 for循环,写法便捷
    4.支持类似数组的对象,甚至字符串
    5.不适用于处理原有的原生对象

    var arr = [
        {id:1,value:'yoyo'},
        {id:2,value:'cher'},
        {id:3,value:'nothing'}
    ]
    var str ='fdsagrewhfdadfwre'
    for(let item of str){
        console.log(item) //f d s a g r e w h f d a d f w r e 
    }
    for(let item of arr){
        console.log(item) //{id: 1, value: "yoyo"}, {id: 2, value: "cher"}, {id: 3, value: "nothing"}
    }
    
    • every遍历 (★★★★☆)

    方法用于检测数组所有元素是否都符合指定条件
    对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true
    1.如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测
    2.如果所有元素都满足条件,则返回 true
    3.与字符串的indexOf方法相反用法,适用于数组。
    4.ie8及以下不适用

    var arr = [
        {id:1,value:'yoyo'},
        {id:2,value:'cher'},
        {id:3,value:'nothing'}
    ]
    var res = arr.every(function(item,index,ary){
        return item.value !== 'uo'
        
    })
    console.log(res) // true
    
    • some遍历(★★★★☆)

    对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true
    1.如果数组中检测到有一个元素满足,则整个表达式返回 true,且剩余的元素不会再进行检测
    2.与字符串的indexOf方法类似用法,适用于数组。
    3.ie8及以下不适用

    var arr = [
        {id:1,value:'yoyo'},
        {id:2,value:'cher'},
        {id:3,value:'nothing'}
    ]
    
    var res = arr.some(function(item,index,ary){
        return item.value == 'yoyo'
        
    })
    console.log(res) // true
    
    • reduce(除了成绩计算外,还没有想到适用场景)

    接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
    1.对于空数组是不会执行回调函数的
    2.ie8及以下不适用
    3.reduce接受一个函数,函数有四个参数,分别是:上一次的值,当前值,当前值的索引,数组

    [0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
     return previousValue + currentValue;
    });
    

    4.reduce还有第二个参数,我们可以把这个参数作为第一次调用callback时的第一个参数,上面这个例子因为没有第二个参数,所以直接从数组的第二项开始,如果我们给了第二个参数为5,那么结果就是这样的:

    [0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
     return previousValue + currentValue;
    },5);
    
    • reduceRight(也是没想到适用场景)

    reduceRight()方法的功能和reduce()功能是一样的,不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。
    reduceRight()首次调用回调函数callbackfn时,prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数,则 prevValue 等于 initialValue,curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数,则 prevValue 等于数组最后一个值, curValue 等于数组中倒数第二个值。

    • find(★★★☆☆)

    返回数组中符合测试函数条件的第一个元素。否则返回undefined
    1.当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数
    2.IE 11 及更早版本不支持 find() 方法
    3.如果没有符合条件的元素返回 undefined
    4.对于空数组,函数是不会执行的
    5.并没有改变数组的原始值

    var arr= [
        {id:1,value:'yoyo'},
        {id:2,value:'cher'},
        {id:3,value:'nothing'},
    ]
    var res = arr.find(function(item,index,ary){
        return item.value ==='yoyo'
    })
    console.log(res) //{id: 1, value: "yoyo"}
    
    • findIndex (★★★☆☆)

    方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置
    1.当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数
    2.IE 11 及更早版本不支持 find() 方法
    3.如果没有符合条件的元素返回 -1
    4.findIndex() 对于空数组,函数是不会执行的。
    5.findIndex() 并没有改变数组的原始值

    • keys,values,entries (★★★★★)(敲喜欢这个的呢~~)

    ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历
    1.IE 11 及更早版本不支持 find() 方法
    2.keys返回的是数组的index,不是键值对的key
    3.values返回的是每项值
    4.entries返回的是index 与值

    var arr= [
        {id:9,value:'yoyo'},
        {id:2,value:'cher'},
        {id:3,value:'nothing'},
    ]
    for (let index of arr.keys()) {
    console.log(index);
    }
    // 0
    // 1
    // 2
    for (let elem of arr.values()) {
    console.log(elem);
    }
    // {id: 9, value: "yoyo"}
    // {id: 2, value: "cher"}
    // {id: 3, value: "nothing"}
    for (let [index, elem] of arr.entries()) {
    console.log(index, elem);
    }
    //0 {id: 9, value: "yoyo"}
    //1 {id:2,value:'cher'}
    //2 {id:3,value:'nothing'}
    

    对象的遍历方法

    其中for循环与数组中介绍的使用方法一致,以下只贴demo

    • for in 是专门设计为object遍历的方法(★★★★★)

    var obj= {
        id:1,
        value:'yoyo',
        target:'js'
    }
    for (var item in obj){
        console.log(item)
    }
    
    • Object.keys(),Object.values(),Object.entries() (★★★☆☆)

    这三个方法可以分别得到键名,值,重组为数组
    建议配合for 方法使用,单独使用场景不多

    var obj= {
        id:1,
        value:'yoyo',
        target:'js'
    }
    console.log(Object.keys(obj)) // ["id", "value", "target"]
    console.log(Object.values(obj)) //[1, "yoyo", "js"]
    console.log(Object.entries(obj)) // [["id", 1],["value", "yoyo"], ["target", "js"]]
    console.log(...Object.entries(obj)) // ["id", 1],["value", "yoyo"], ["target", "js"]
    

    其余遍历方法

    • while (★★★★☆)

    只要指定条件为 true,循环就可以一直执行代码

    while (i<5) 
      {
      x=x + "The number is " + i + "<br>";
      i++;
      }
    
    • do/while 循环 (★★★★☆)

    do 
      {
      x=x + "The number is " + i + "<br>";
      i++;
      }
    while (i<5);
    

    do/while 循环是 while 循环的变体。
    该循环至少会执行一次,即使条件是 false,隐藏代码块会在条件被测试前执行
    别忘记增加条件中所用变量的值,否则循环永远不会结束

    比起一开始的for循环,现在我们更多用的是含有迭代器的遍历方法,例如map、filter、包括keys、values、entries等等,我们写的更少,更简洁。

    相关文章

      网友评论

          本文标题:JS中各种遍历方法

          本文链接:https://www.haomeiwen.com/subject/chdajqtx.html