重学javaScript （八）｜ javaScript的数组的函数

Criska
124 阅读3分钟

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

前言

JS的数组在日常的编码中的使用,占到了绝大一部分,今天我们就来学习和巩固一下,关于数组的几个函数方法

javaScript的数组的函数

filter

这个函数主要进行对数组的筛选

参数

  • callback：它接收一个回调函数，同时回调函数又有三个参数

    • element： 数组中当前正在处理的元素，也就是当前项
    • index（可选）： 当前正在处理的元素在数组中的索引
    • arr： 数组本身

返回值

返回一个符合规则的新的数据

简单解释

简单解释一下，就是说，filter函数实际上上接受的一个回调函数，然后在回调函数里，可以对数组的当前元素进行一些条件片段，最终返回true或者false，然后filter根据回调函数的返回值来判断是否将这个当前元素添加到自己的返回值里，元素有几个，回调函数就执行多少次

举个栗子

// 求取arr数组中的偶数，应该怎么搞
let arr = [1,3,5,7,29,28,14,100]

// 使用filter函数判断每一项是否余2等于0，是的话则添加至新数组
let arr1 = arr.filter((item)=>{
    if(item % 2 === 0) return true
})
console.log(arr1)

来看下结果，偶数的全部被筛选了出来，放在了一个新的数组里

image.png

find

数组中第一个满足所提供测试函数的元素的值，否则返回 undefined

参数

  • callback：它接收一个回调函数，同时回调函数又有三个参数

    • element： 数组中当前正在处理的元素，也就是当前项
    • index（可选）： 当前正在处理的元素在数组中的索引
    • arr： 数组本身

返回值

返回一个符合规则的数组的某一项

简单解释

简单来说，就是接收一个回调函数，然后把数组的每一项进行遍历，从数组里找到符合条件的某一项，也就是返回值为true的时候。当有一项符合条件的时候，后续不再循环，否则的话返回 undefined。

举个栗子

// 求取arr的某一项，应该怎么搞
let arr = [1,3,5,7,29,28,14,100]

// 使用find函数找到值为100的那一项
let arr1 = arr.find((item)=>{
    if(item  === 100) return true
})
console.log(arr1)

来看下结果

image.png

findindex

同find的用法相同，只不过findindex找的是某一项的索引值

map

它可以对数组进行映射，然后把映射后的每一项形成一个新的数组，同理，它也是传入一个参数进行遍历

参数

  • callback：它接收一个回调函数，同时回调函数又有三个参数

    • element： 数组中当前正在处理的元素，也就是当前项
    • index（可选）： 当前正在处理的元素在数组中的索引
    • arr： 数组本身

简单解释一下

就是，当你需要对数组的单项进行改变的时候，可以调用这个函数

返回值

返回一个符合规则的新的数据

举个栗子

let  arr = [1,2,3,4,5,6,7,8]
// 使用map求取arr每一项的2倍
let arr1 = arr.map((item)=>{
    return item*2
})
console.log(arr1)

来看下结果

image.png

reduce

详见我之前的文章 重学ES6 | reduce - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝