JS常见数组遍历方法总结数组循环遍历方法，for 使用频率最高的一种，forEach，for...of 和 for...

for

简单的一种循环遍历方法，使用频率最高的一种，优化版本--使用临时变量，将长度缓存起来，避免重复获取数组长度数据量大，性能比较好

    let arr=['a','b','c','d']
    for(let j = 0,len=arr.length; j < len; j++) {
        console.log(arr[j])
    }

forEach

数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱

    let arr=['a','b','c','d']
    try{
        arr.forEach((key,index，array)=>{
            console.log(key,index)
            if(key==='a'){
                throw new Error("LoopJump")
            }
        })
     }catch(err){
        
     }
  //key是数组里的值，index为数组里元素的索引
  //第三个参数则是它自己（利用第三个参数可以进行数组去重）
  //使用try...catch...可以跳出循环

注意：不能使用break和continue跳出整个循环或当前循环的，会报错，但是结合try...catch可以实现跳出循环

for...of 和 for...in 及其区别

性能要好于 for..in...，但仍然比不上普通的 for 循环，for..in... 效率最低（输出的 key 是数组索引），不建议数组遍历使用，适合遍历对象，输出的则是对象的属性名

    let arr=['a','b','c','d']
    for(let i in arr){
        console.log(`for in 输出i为每一项的下标---${i}`,arr[i])
    }
    for(let i of arr){
        console.log(`for of 输出i为数组里边的每一项---${i}`)
    }

区别：`for..in...`数组每一项下标 `for..of...`数组每一项值

衍生：`for...of`循环内部调用的是数据结构的`Symbol.iterator`方法,Set 和 Map 结构也原生具有 Iterator 接口，可以使用`for...of`循环，Object不具有，所以不支持`for...of`

map 和 filter 及其区别——ES6

(map一一对应)遍历每一个元素并且返回处理后的元素，返回创建的新数组和原来旧数组的长度是一样的，使用比较广泛，但其性能还不如 forEach

    let arr=[{name:'liu',age:18},{name:'li',age:20}]
    let newArr=arr.map((k,i,array)=>{
        k.age++;
        return k
    })
    console.log(newArr)
    //参数k数组每一项，i数组每一项下标，array原数组
    //返回新数组，长度和原数组一样
    //操作每一项会改变元数组
    //不想改变使用结构解构返回新的值...
    let newArr=arr.map((k,i,array)=>{
        return {
            ...k,
            add:111
        }
    })

filter遍历数组，过滤出符合条件的元素并返回一个新数组，没有符合条件的元素则返回空数组,不改变原数组

    let arr=[{name:'liu',age:18},{name:'li',age:20}]
    let newArr=arr.filter((k,i,array)=>{
        k.name=k.name+'_add'
        return k.age==18
    })
    console.log(arr,newArr)
    //arr name改变，newArr：[{name:'liu_add',age:18}]

区别：都返回新数组，map数组长度不变，filter根据过滤情况而定。都可以改变元素属性值，并且影响原数组

some和every——ES6

some 遍历数组，只要有一个以上的元素满足条件就返回 true，否则返回 false

    let arr=[{name:'liu',age:18},{name:'li',age:20}]
    let bool=arr.some((k,i,array)=>{
        return k.age==18
    })
    console.log(bool)
    //true

every 遍历数组，每一个元素都满足条件则返回 true，否则返回 false

    let arr=[{name:'liu',age:18},{name:'li',age:20}]
    let bool=arr.every((k,i,array)=>{
        return k.age==18
    })
    console.log(bool)
    //false

find和findIndex——ES6

find 遍历数组，返回符合条件的第一个元素，没有符合条件的元素则返回 undefined

    let arr=[{name:'liu',age:18},{name:'li',age:20}]
    let newArr=arr.find((k,i,array)=>{
        return k.age==18
    })
    console.log(newArr) //{name: 'liu', age: 18}

findIndex 遍历数组，返回符合条件的第一个元素的索引，没有符合条件的元素则返回 -1

    let arr=[{name:'liu',age:18},{name:'li',age:20}]
    let newArr=arr.findIndex((k,i,array)=>{
        return k.age==18
    })
    console.log(newArr) //0

JS常见数组遍历方法总结

for