如何从对象数组中筛选符合条件的值

 更新时间:2022年09月01日 10:29:09   作者:爱编译也爱吃肉的喵  
这篇文章主要介绍了如何从对象数组中筛选符合条件的值,具有很好的参考价值,希望对大家有所帮助。

从对象数组中筛选符合条件的值

const arr = [1,2,3,4,5,6,7]
const list = [
	{openId: 1, timelineId: 1, showNo: 1, uid: 1},
	{openId: 2, timelineId: 1, showNo: 1, uid: 1},
	{openId: 9, timelineId: 1, showNo: 1, uid: 1},
	{openId: 4, timelineId: 1, showNo: 1, uid: 1},
	{openId: 5, timelineId: 1, showNo: 1, uid: 1}
]
const params = list.filter(item=> arr.indexOf(item.openId) > -1)
console.log(params)

将两个对象数组根据相同的索引index合并为一个数组

this.currentTotalList = this.totalList.map((item, index) => ({ ...item, ...daysList[index] }))

将两个对象数组根据相同的键值合并为一个数组

let currentEveryList = this.everyList.map(item => ({...item, ...signList.filter(s => s.signDate === item.signDate)[0]}))

从当前数组中筛选符合条件的值

this.materialss = this.materials.filter(item => item.categoryId === this.curTab.categoryId)

js根据已有数组,从数组对象中筛选数据

例如,已得到以下源数据

        let dataArr = [
            { id: 1, age: 15 },
            { id: 2, age: 18 },
            { id: 3, age: 16 },
            { id: 4, age: 17 }
        ];

现在需要跟据获取的id数组(表格选中的行),筛选源数据

let goalArr = [1, 2];

解决思路

<script>
        let dataArr = [
            { id: 1, age: 15 },
            { id: 2, age: 18 },
            { id: 3, age: 16 },
            { id: 4, age: 17 }
        ];
        let goalArr = [1, 2];
        let resArr = [];
        goalArr.forEach((v, i) => {
            dataArr.forEach((item, index) => {
                if (item.id === v) {
                    resArr.push(item)
                }
            })
        })
        console.log(resArr)
//
</script>

打印结果如下: 

本来想用filter加forEach实现的,思路有点混乱烂尾了

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 微信小程序http连接访问解决方案的示例

    微信小程序http连接访问解决方案的示例

    这篇文章主要介绍了微信小程序http连接访问解决方案的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • JavaScript组合模式学习要点

    JavaScript组合模式学习要点

    组合模式大概是设计模式里面使用最为广泛的模式之一了,模式本身理解起来也比较简单,以至于可以毫不费力的写出一个能用的组合模式伪代码
    2016-08-08
  • javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    由于浏览器兼容的复杂性.打造一个较优的跨浏览器事件处理函数.不是件容易的事情.各大类库也都通过了种种方案去抽象一个庞大的事件机制.
    2010-07-07
  • JS上传前预览图片实例

    JS上传前预览图片实例

    上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了。功能很简单,却很实用。
    2013-03-03
  • 测量JavaScript函数的性能各种方式对比

    测量JavaScript函数的性能各种方式对比

    这篇文章主要介绍了测量JavaScript函数的性能各种方式对比,对性能感兴趣的同学,可以多实验一下
    2021-04-04
  • vue 自定义指令directive的使用场景

    vue 自定义指令directive的使用场景

    这篇文章主要详细介绍了vue 自定义指令directive的使用场景,文中有详细的代码示例,感兴趣的小伙伴欢迎阅读
    2023-04-04
  • element日历组件只显示月和日如何把年份隐藏掉

    element日历组件只显示月和日如何把年份隐藏掉

    这篇文章主要介绍了element日历组件只显示月和日如何把年份隐藏掉的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • Javascript获取与设置ckeditor数据的实现方法

    Javascript获取与设置ckeditor数据的实现方法

    最近编辑器后台升级成了ckeditor,但原来后台有很多对应编辑器内容的替换功能,那么就需要用js获取ckeditor编辑器里面的内容,这里就为大家介绍一下具体的实现方法
    2023-08-08
  • 18个JavaScript编写简洁高效代码的技巧分享

    18个JavaScript编写简洁高效代码的技巧分享

    在这篇文章中,小编将和大家分享18个JavaScript技巧,以及一些你应该知道的示例代码,以编写简洁高效的代码,感兴趣的小伙伴快跟随小编一起学习一下吧
    2024-01-01
  • Bootstrap缩略图的创建方法

    Bootstrap缩略图的创建方法

    这篇文章主要介绍了Bootstrap缩略图的创建方法,教大家如何实现Bootstrap缩略图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论