AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

#yyds干货盘点 【React工作记录七】如何对数组进行一个过滤操作map

2023-03-15 105
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： #yyds干货盘点 【React工作记录七】如何对数组进行一个过滤操作map

需求

今天产品找到我 你这边切换的状态数据太多了需要进行一个过滤


解决思路

我们先来看一下数据的一个格式

0: {key: '1202103251527168888718235', value: '已创建', sortKey: 0}
1: {key: '1202012151142378888180559', value: '待审核', sortKey: 1}
2: {key: '1202012151142538888575854', value: '已审核', sortKey: 2}
3: {key: '1202103251003198888698119', value: '审核不通过', sortKey: 3}
4: {key: '1202104011841058888608955', value: '审核中(作废)', sortKey: 5}
5: {key: '1202104021508208888148066', value: '已取消', sortKey: 6}
6: {key: '116322908368408888582803', value: '自动审核', sortKey: 7}

代码



let arr=[]
 RecentList.map(item => {
     if(item.key!=='1202103251527168888718235'&&item.
key!=='1202104011841058888608955'&&item.key!=='116322908368408888582803'){
       arr.push({key:item.key,value:item.value})
     }
   })

运行结果

image.png


文章标签：
前端开发
关键词：
Map数组
Map操作
react.js操作
React Native数组
react.js数组
前端歌谣
目录
相关文章
龙大吉
|
6月前
|
存储 JavaScript 索引
js开发：请解释什么是ES6的Map和Set，以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序，与对象的字符串或符号键不同；Set存储唯一值，无重复。两者皆可迭代，支持for...of循环。Map有get、set、has、delete等方法，Set有add、delete、has方法。示例展示了Map和Set的基本操作。
龙大吉
103 3
人间真情在哪儿
|
2月前
|
索引
ES5常见的数组方法：forEach ，map ，filter ，some ，every ，reduce (除了forEach，其他都有回调，都有return)
ES5常见的数组方法：forEach ，map ，filter ，some ，every ，reduce (除了forEach，其他都有回调，都有return)
人间真情在哪儿
128 58
龙大吉
|
5月前
|
Python
高阶函数如`map`, `filter`, `reduce`和`functools.partial`在Python中用于函数操作
【6月更文挑战第20天】高阶函数如`map`, `filter`, `reduce`和`functools.partial`在Python中用于函数操作。装饰器如`@timer`接收或返回函数，用于扩展功能，如记录执行时间。`timer`装饰器通过包裹函数并计算执行间隙展示时间消耗，如`my_function(2)`执行耗时2秒。
龙大吉
34 3
java冯坚持
|
1月前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结，包括插入，删除，更新，反转，排序等，如map、splice等
JavaScript数组的常用高阶函数，包括遍历、插入、删除、更新、反转和排序等操作，如map、splice、push、pop、reverse等。
java冯坚持
18 0
光明顶阳顶天
|
2月前
数组方法中的`forEach()`方法和`map()`方法有什么区别？
数组方法中的`forEach()`方法和`map()`方法有什么区别？
光明顶阳顶天
30 0
杀死一只知更鸟debug
|
2月前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法：every、some、filter、map和forEach，并通过示例代码展示了它们的基本用法和区别。
杀死一只知更鸟debug
21 0
theMuseCatcher
|
3月前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法（filter，forEach，map，every，some，find，findIndex）
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数：`item`（数组项的值）、`index`（项的位置，可选）和`array`（数组本身，可选）。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
theMuseCatcher
39 0
JS中常用的数组迭代方法（filter，forEach，map，every，some，find，findIndex）
朝阳39
|
4月前
|
JavaScript API
js【最佳实践】遍历数组的八种方法（含数组遍历 API 的对比）for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法（含数组遍历 API 的对比）for,forEach,for of,map,filter,reduce,every,some
朝阳39
78 1
茶卡盐佑星_
|
5月前
|
JavaScript 前端开发
JavaScript 数组的函数 map/forEach/reduce/filter
JavaScript 数组的函数 map/forEach/reduce/filter
茶卡盐佑星_
38 0
让线程再跑一会
|
5月前
|
JSON Go 数据格式
Go 语言基础之指针、复合类型【数组、切片、指针、map、struct】（4）
Go 语言基础之指针、复合类型【数组、切片、指针、map、struct】
让线程再跑一会
37 0

热门文章

最新文章

  • 1
    React-Native 爬坑
  • 2
    react-native-easy-app 详解与使用之（三） View，Text，Image，Flatlist
  • 3
    一段探索React自建内部构造的旅程
  • 4
    【React】组件的创建与事件绑定
  • 5
    React 2|学习笔记
  • 6
    react-06-class组件-基础
  • 7
    照着官方文档学习react
  • 8
    React Native-组件的引用
  • 9
    【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
  • 10
    React中的Virtual DOM(看这一篇就够了)
  • 1
    Go语言map并发安全，互斥锁和读写锁谁更优？
    58
  • 2
    Go语言map并发安全使用的正确姿势
    60
  • 3
    Go语言中的map为什么默认不是并发安全的？
    56
  • 4
    【C++】开散列实现unordered_map与unordered_set的封装
    52
  • 5
    【C++】map和set封装
    38
  • 6
    Kotlin小技巧之用Transformations.map方法转换LiveData
    52
  • 7
    Java基础之集合Map
    40
  • 8
    Java Map集合：选择正确的实现方式
    49
  • 9
    算法金 | 推导式、生成器、向量化、map、filter、reduce、itertools，再见 for 循环
    52
  • 10
    js【最佳实践】遍历数组的八种方法（含数组遍历 API 的对比）for,forEach,for of,map,filter,reduce,every,some
    78

    • 相关课程

    更多
  • Go语言核心编程 - 基础语法、数组、切片、Map
  • React 入门与实战
  • React 入门教程开发文档
  • Python语言基础 - 列表、元组、字典、集合

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    阿里云OSS设置跨域访问