js 最常用的几个json数组操作方法 map filter some every forEach sort(实际案例),通过id在数组中找某个item项

json数组数据

let persons=[
            {
                name:"杰克",age:18,id:5,gender:"男"
            },
            {
                name:"李雷",age:20,id:2,gender:"男"
            },
            {
                name:"韩梅梅",age:16,id:9,gender:"女"
            },
            {
                name:"汤姆",age:16,id:2,gender:"男"
            },
        ]

map filter some every forEach sort

序号需求使用方法
1返回所有男生的数组filter
2返回所有年龄大于等于18岁的男生的数组filter
3只保留姓名的数组map
4只保留姓名和id的数组forEach
5判断所有人是不是都是男生every
6判断有没有男生some
7依据id进行升序排序,操作的是原数组sort
基本操作说明就不写了,网上一搜一大堆,只写实际案例操作

filter - 返回所有男生的数组 | 返回所有年龄大于等于18岁的男生的数组

// 返回所有男生的数组
    let man=persons.filter((item,index)=>{
        return item.gender=="男"
    })
    console.log("所有男生:",man)
// 返回所有年龄大于等于18岁的男生的数组
    let man2=persons.filter((item,index)=>{
        return item.gender=="男"&&item.age>=18
    })
    console.log("年龄大于等于18岁的男生:",man2)
// 在数组中找某个id的项目
let id=5
console.log(findItemFromId(id, persons))

function findItemFromId(id,list){
    return list.filter(item=>{
        if(item.id==id){
            return item
        }
    })[0]
}
// { name: '杰克', age: 18, id: 5, gender: '男' }

筛选:map - 只保留姓名的数组

// 只保留姓名的数组
    let personNameList=persons.map((item,index)=>{
        return item.name
    })
    console.log("只保留姓名的数组:",personNameList)

筛选:forEach - 只保留姓名和id的数组

// 只保留姓名和id的数组
    let personNameIdList=[];
    persons.forEach((item,index)=>{
        personNameIdList.push({name:item.name,id:item.id})
    })
    console.log("只保留姓名和id的数组:",personNameIdList)

every - 判断所有人是不是都是男生

// 判断所有人是不是都是男生
    let isMan=persons.every((item,index)=>{
        return item.gender=="男"
    })
    console.log("判断所有人是不是都是男生:",isMan)

some - 判断有没有男生

// 判断有没有男生
    let hasMan=persons.some((item,index)=>{
        return item.gender=="男"
    })
    console.log("判断有没有男生:",hasMan)

排序:sort - 依据id进行升序排序,操作的是原数组

// 依据id进行升序排序,操作的是原数组
    persons.sort(function(a, b){return a.id - b.id})
    console.log("依据id进行升序排序:",persons)

添加字段:forEach- 给age>18的人添加字段type:‘成年人’

// 方法一: map - 给age>18的人添加字段type:'成年人'
let list = []
persons.map((item) => {
    if (item.age > 18) {
        list.push({ ...item, type: '成年人' })
    } else {
        list.push({ ...item })
    }
})
console.table(list)
// 方法二:map  Object.assign - 给age>18的人添加字段type:'成年人'【优雅的写法】
let obj = {type:'成年人'}
persons.map((item) => {
    if (item.age > 18) {
        Object.assign(item,obj)
    }
})
console.table(persons)

find与filter比较

find与filter比较,
find:如果只查到一个,返回对象;查到多个时,返回数组
filter:不管是查到几个,都返回数组

总结

map

  1. 只取数组中所有的对象中的某个元素或某几个元素,组成新的数组
    返回gender组成的数组 [ { gender: ‘男’ }, { gender: ‘男’ }, { gender: ‘女’ }, { gender: ‘男’ } ]
    return { gender:item.gender }
  2. 返回某个元素的生成的数组 [ ‘男’, ‘男’, ‘女’, ‘男’ ]
  3. return item.gender

demo下载

js 最常用的几个json数组操作方法 map filter some every forEach sort(实际案例)

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值