JavaScript | 最全详解数组方法(二)

泡面泡牛奶
171 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

遍历方法

1. forEach()

array.forEach(function(item,index,array), thisValue) 遍历数组，为每一项执行一次回调函数

  • 参数
    • function（必需）：指定的回调函数
    • thisValue（可选）：当执行回调函数时this绑定对象的值，默认值为undefined
  • 注意
    • 无法中途退出循环，只能用return退出本次回调，进行下一次回调。
    • 它总是返回 undefined值,即使你return了一个值。
    • 如果在回调中需要更改数组中的基本类型数据，请使用 array[index] = XXX，不能直接给 value 赋值。
   let arr = [1,2,3,4,5]
   arr.forEach((item,index)=>{console.log(item)}) //1,2,3,4,5

2. every()

array.every(function(item,index,array), thisValue) 检测数组所有元素是否都符合判断条件返回布尔

  • 参数
    • function（必需）：指定的回调函数
    • thisValue（可选）：当执行回调函数时this绑定对象的值，默认值为undefined
  • 注意 如果有一项元素执行回调返回false，剩余元素不再执行回调，整个方法返回 false，如果所有元素都满足条件，则整个方法返回 true
   let arr = [1,2,3,4,5]
   let re1 = arr.every(item=> item >= 10)
   console.log(re1) //false
   let re2 = arr.every(item=> item <= 10)
   console.log(re2) //true

3. some()

array.some(function(item,index,array), thisValue) 检测数组中的是否有满足条件的元素返回布尔

  • 参数
    • function（必需）：指定的回调函数
    • thisValue（可选）：当执行回调函数时this绑定对象的值，默认值为undefined
  • 注意 some() 恰好和 every() 相反，只要数组中有一项满足条件判断，则整个方法返回 true，如果全部元素都不满足条件，则返回 false。
   let arr = [1,2,3,4,5]
   let re1 = arr.some(item=> item >= 5) 
   console.log(re1) //true 满足一个即返回true
   let re2 = arr.some(item=> item >= 10) 
   console.log(re2) //false 全部不满度才返回false

4. filter()

array.filter(function(item,index,array), thisValue) 按照条件过滤原始数组返回新数组

  • 参数
    • function（必需）：指定的回调函数
    • thisValue（可选）：当执行回调函数时this绑定对象的值，默认值为undefined
  • 注意 返回的是过滤之后的数组
   let arr = [1,2,3,4,5,6]
   let re = arr.filter((item,index)=>{
     return item > 2
   })
   console.log(re) //[3,4,5,6]

5. map()

array.map(function(item,index,array), thisValue) 对数组中每个元素进行一次回调，返回回调返回的元素组成的数组

  • 参数
    • function（必需）：指定的回调函数
    • thisValue（可选）：当执行回调函数时this绑定对象的值，默认值为undefined
    let arr = [1,2,3,4,5]
    let re = arr.map((item,index)=>{
      return item * 2
    })
    console.log(re) //[2,4,6,8,10]
    console.log(arr) //[1,2,3,4,5]

6. reduce()

array.reduce(function(prev, curr, currIndex, arr), initialValue) 为数组提供一个累加器，把数组合并为一个值

  • 参数
    • function（必需）：指定的回调函数
    • initialValue（可选）：传递给回调的初始值，说白了即是回调第一个参数 prev 的初始值。
  • 参数解析
    • prev（必需）: 函数上一次 return 回来的值。如果提供了 initialValue，则初始值为initialValue，如果没有提供，则 prev初始值为数组第一个元素。
    • curr（必需）: 当前执行回调时，数组中的元素
    • currIndex（可选）: 当前执行回调时，数组中元素的下标
    • arr（可选）：当前元素所属的数组对象
    let arr = [1,2,3,4,5]
    let re1 = arr.reduce((prev,curr)=>{
       return prev+curr
    })
    console.log(re1) //15
    let re2 = arr.reduce((prev,curr)=>{
       return prev+curr
    },5)
    console.log(re2) //20

7. reduceRight()

array.reduceRight(function(prev, curr, currIndex, arr), initialValue) 从右至左的方向把数组累加为一个值

  • 说明
    • 该方法同上面讲的 reduce() 方法使用基本一致，只不过累加的方式为数组的末尾向前将数组中的数组项做累加。
    • 可以这么理解，如果提供了initialValue参数,则prev等于initialValue,curr等于数组中的最后一个值;如果没有提供则prev等于数组里面的最后一个值,curr等于数组中的倒数第二个值。
    let arr = [1,2,3,4,5]
    let re1 = arr.reduceRight((prev,curr)=>{
       console.log(prev,curr) //第一次 5,4
       return prev+curr
    })
    console.log(re1) //15
    let re2 = arr.reduceRight((prev,curr)=>{
       console.log(prev,curr) //第一次 5,5
       return prev+curr
    },5)
    console.log(re2) //20

8. find()

array.find(function(item,index,array), thisValue) 找出第一个符合条件的数组成员并返回

  • 参数
    • function（必需）：指定的回调函数
    • thisValue（可选）：当执行回调函数时this绑定对象的值，默认值为undefined如果没有找到，则返回 undefined
  • 注意
    • 可以识别 NaN ,弥补了indexOf 的不足
    let arr = [1,2,3,4,5]
    let re = arr.find((item,index) =>{
      return item > 2
   })
   console.log(re) //3

9. findIndex()

array.findIndex(function(item,index,array), thisValue) 找出第一个符合条件的数组成员下标并返回

  • 参数
    • function（必需）：指定的回调函数
    • thisValue（可选）：当执行回调函数时this绑定对象的值，默认值为undefined如果没有找到则返回 -1
  • 注意
    • 可以识别 NaN ,弥补了indexOf 的不足
   let arr = [1,2,3,4,5,NaN]
   let re = arr.findIndex((item,index)=>{
       return item > 2
   })
   console.log(re) //2

10. keys()

遍历数组键名

  • 注意：array.keys() 返回一个包含数组所有下标组成的 Iterator。
   let arr = [1,2,3,4,5]
   for(let item of arr.keys()){
     console.log(item) //0,1,2,3,4
   }

11. values()

遍历数组键值

  • 注意：array.values() 返回一个包含数组所有下标组成的 Iterator。
    let arr = [1,2,3,4,5]
    for(let item of arr.values()){
     console.log(item) //1,2,3,4,5
    }

12. entries()

遍历键名+键值

  • 注意：array.entries() 返回一个包含数组所有下标组成的 Iterator。
    let arr = [1,2,3,4,5]
    for(let item of arr.entries()){
     //[0,1] [1,2] [2,3] [3,4] [4,5]
     console.log(item) 
    }

好了，以上就是本篇文章的分享，感谢阅读！

avatar
文章
阅读
粉丝