4.8 数组筛选器

最新推荐文章于 2024-11-12 11:19:19 发布

m_爱学习2022

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量59

点赞数

分类专栏： javascript 学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_68743643/article/details/130032180

版权

javascript 学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇文章详细介绍了JavaScript中的几个重要数组方法，包括find用于查找特定元素，findIndex获取匹配项的索引，filter筛选数组元素，forEach执行回调函数对每个元素进行处理，以及map将数组元素转换为新形式。最后还提到了reduce方法用于累加数组值。

摘要由CSDN通过智能技术生成

#数组

-find

-findIndex

-filter

-forEach

-map

-find

let users=[
    {name:"张三",age:19,gender:"男"},
    {name:"李四",age:15,gender:"男"},
    {name:"王二",age:16,gender:"女"},
    {name:"赵六",age:20,gender:"男"},
 ]
 //数组复杂，需要筛选
//predicate 代表要传入一个方法 在数组里面写了个循环 每次会把数组成员 数组下标 和数组本身传给他
//item代表每一个 index 代表下标 arr代表数组本身
//find 寻找一个东西
 users.find(function(item,index,array){
    //方法中返回true 代表我们需要找到这个元素
    console.log(item,index,array)
 })
 
 //let user=users.find(c=>c.name="王五")
 //console.log(user)//{name: '王五', age: 19, gender: '男'}


 function find(arr,func){
    let rel;
    for (let index = 0; index < arr.length; index++) {
        //element 当前遍历到的元素
        const element = arr[index];
        if(func(element,index,arr)){
            return element
        }
        
    }
    return undefined;
 }

 let user = find(users,c=>c.name==="王二");

 console.log(user);//{name: '王二', age: 16, gender: '女'}

-findIndex

 function findIndex(arr,func){
    let rel;
    for (let index = 0; index < arr.length; index++) {
        //element 当前遍历到的元素
        const element = arr[index];
        if(func(element,index,arr)){
            return index;//返回下标
        }
       
    }
    return -1;//找不到就返回-1
 }
    let user = findIndex(users,c=>c.name=="赵六");
    
    console.log(user);//3

-filter

//上面的是筛选一个元素 ，下面是筛选很多

let items =users.filter(c=>c.age>15);

console.log(JSON.stringify(items));//[{"name":"张三","age":19,"gender":"男"},{"name":"王二","age":16,"gender":"女"},{"name":"赵六","age":20,"gender":"男"}]

function filters(arr,func){
    let items=[];
    for (let index = 0; index < arr.length; index++) {
        //element 当前遍历到的元素
        const element = arr[index];
        if(func(element,index,arr)){
            items.push(element);
        }
       
    }
    return items;//items 本来就是一个空数组，如果没有找到就直接返回一个空数组
 }

 let items=filters(users,c=>c.age>18);

 console.log(JSON.stringify(items));//[{"name":"张三","age":19,"gender":"男"},{"name":"赵六","age":20,"gender":"男"}]

 //这是回调函数经常使用的地方，你要找什么不知道，我就让你传个方法进来好了
 //这个方法的返回值告诉我你到底要选什么，我在方法里面可以决定给你一个ture还是false，当结果是ture代表
 //这个结果我要，你就给我留起来
//自己传进去一个条件  要是符合就返回ture给你

-forEach

let sum =0;
users.forEach(c=>{
    sum+=c.age;
})
console.log(sum);//70  代替循环使用

function forEach(arr,callback){
    for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        callback(element,index,arr)
        
    }
}

-map

//数组也是一个对象
//把一组对象投影成另外一组对象
let result=users.map(c=>{
    return{
        username:c.name,
        nianin:c.age,
        sex:c.gender
    }
})

console.log(JSON.stringify(result))
//[{"username":"张三","nianin":19,"sex":"男"},{"username":"李四","nianin":15,"sex":"男"},{"username":"王二","nianin":16,"sex":"女"},{"username":"赵六","nianin":20,"sex":"男"}]

-reduce 累加值

//-reduce
//func(累加值（上一次循环累计结果，item，index，array)
let arr=[1,2,3,4,5]
let result =arr.reduce((sum,item)=>{
    return sum+item
},0)

console.log(result)//15