js常用处理请求到的数据的方法(即map，filter，find，findIndex,some,every一些常用方法的使用)

前言：

本节介绍了es6的方法，先说一下区别

map，filter，find，findIndex 都是返回数据
some,every返回布尔值
map和filter的区别在于 map返回一个和原数组数量（下标）相同的数组
filter和find的区别，find是直接返回一个符合条件的，切不一定是数组
find和findIndex区别就是一个是返回下标一个是数据，可以理解成 data(findIndex) = find

话不多说，平时我们最长用道的就是同ajax或者其他方式请求数据，所以对数据进行处理就很重要
例如想下面的数据，我们只是想要轮播图链接组成的数组

{ "message": [ { "image_src": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3857696996,2875137765&fm=26&gp=0.jpg", "open_type": "navigate", "goods_id": 129, "navigator_url": "/pages/goods_detail/main?goods_id=129" }, { "image_src": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3857696996,2875137765&fm=26&gp=0.jpg", "open_type": "navigate", "goods_id": 395, "navigator_url": "/pages/goods_detail/main?goods_id=395" }, { "image_src": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3857696996,2875137765&fm=26&gp=0.jpg", "open_type": "navigate", "goods_id": 38, "navigator_url": "/pages/goods_detail/main?goods_id=38" } ], "meta": { "msg": "获取成功", "status": 200 } }

需求，一个不要对象数组中的其他元素，只要数据中轮播图链接组成的一个数组，即由对象中一个键组成的数组

    <script>// 相当于请求到的数据var res ={ "message": [ { "image_src": "https://img2.woyaogexing.com/2020/11/27/04fb8525072a41dc832fcfcfdbb06b7b!1242x9999.jpeg", "open_type": "navigate", "goods_id": 129, "navigator_url": "/pages/goods_detail/main?goods_id=129" }, { "image_src": "https://img2.woyaogexing.com/2020/11/27/04fb8525072a41dc832fcfcfdbb06b7b!1242x9999.jpeg", "open_type": "navigate", "goods_id": 395, "navigator_url": "/pages/goods_detail/main?goods_id=395" }, { "image_src": "https://img2.woyaogexing.com/2020/11/27/04fb8525072a41dc832fcfcfdbb06b7b!1242x9999.jpeg", "open_type": "navigate", "goods_id": 38, "navigator_url": "/pages/goods_detail/main?goods_id=38" } ], "meta": { "msg": "获取成功", "status": 200 } }// 获取轮播图数据var {message} = res;// 获取轮播图链接数组var swiper = message.map(v=>v.image_src)console.log(swiper);</script>

需求，在我请求订单创建时间的时候，发现返回的是时间戳，这样不行，所以在对象中重新创建一个键放到对象中，值为标准时间

 <script>var res =  [{name:'wei',age:10,create_time:1562221487},{name:'cun',age:20,create_time:1662221487},{name:'bin',age:30,create_time:1762221487},]var data = res.map((v,i) => ({...v,ctime:(new Date(v.create_time).toLocaleString())}))console.log(data);</script>

需求，在请求到的商品中，有的有标签，有的没有标签，我要把有标签的数据筛选出来（空，或未false）

    <script>var res =  [{name:'wei',age:10,create_time:1562221487,tab:'1'},{name:'cun',age:20,create_time:1662221487,tab:''},{name:'bin',age:30,create_time:1762221487},]var data = res.filter((v,i) => v.demo)console.log(data);</script>

需求，我需要筛选年龄大于等于20的数据，并且将这些数据组成数组

    <script>var res =  [{name:'wei',age:10},{name:'cun',age:20},{name:'bin',age:30},]var data = res.filter(v => v.age >= 20)console.log(data);</script>

需求，我需要找到所有名字叫wei的人

    <script>var res =  [{name:'wei',age:10},{name:'cun',age:20},{name:'bin',age:30},{name:'wei',age:30},]var data = res.filter(v => v.name == 'wei')console.log(data);</script>

有很多数据，我要我想要的数据的下标

    <script>var res =  [{name:'wei',age:10,create_time:1562221487,tab:'1'},{name:'cun',age:20,create_time:1662221487,tab:''},{name:'bin',age:30,create_time:1762221487},]var data = res.findIndex((v,i) => v.name == 'cun')console.log(data); //1</script>

我想找到第一个名字叫cun的人，就算后面还有这样的数据也不要了

    <script>var res =  [{name:'wei',age:10,create_time:1562221487,tab:'1'},{name:'cun',age:20,create_time:1662221487,tab:''},{name:'cun',age:30,create_time:1762221487},]var data = res.find((v,i) => v.name == 'cun')console.log(data);</script>

判断数据中的name是否都是wei（全部都是这个）

    <script>var res =  [{name:'wei',age:10},{name:'cun',age:20},{name:'bin',age:30},{name:'wei',age:30},]var data = res.every(v => v.name == 'wei')console.log(data); //false</script>

判断数据中的name是否有wei（只要一个是这个）

    <script>var res =  [{name:'wei',age:10},{name:'cun',age:20},{name:'bin',age:30},{name:'wei',age:30},]var data = res.some(v => v.name == 'wei')console.log(data); //true</script>

js常用处理请求到的数据的方法(即map，filter，find，findIndex,some,every一些常用方法的使用)相关推荐

微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
JS Ajax异步请求发送列表数据后面多了[]
还在苦逼的写代码,这里就不详细了,直接抛出问题: 如图所示: 前端ajax请求向后端发送数据的时候,给key添加了[]出现很多找不到原因, 后面在说解决方法: 暂时先这样记录一下,下次方便查找,好了 ...
vue加跨域代理静态文件404_解决vue本地环境跨域请求正常，版本打包后跨域代理不起作用，请求不到数据的方法——针对vue2.0...
问题:在本地使用了proxyTable代理可以正常跨域请求后台数据,打包上传后就无法获得后台的json文件.查看了相关资料可以用nginx进行解决.还可以使用命名环境变量,请求的时候进行判断,话不多说 ...
Web中JS（Javascript）解析JSON数据的方法
js解析json数据,可以使用JSON.parse()方法来实现解析.JSON.parse()方法可以解析JSON字符串,转换为 JavaScript 对象下面我们就结合简单的代码示例,给大家介绍j ...
Python 常用（聚类/分类）数据预处理方法
要对数据进行聚类/分类,往往需要经过以下几个步骤: 处理缺失值(我比较少遇到)-->数据标准化 -->降维(白化) -->训练 -->预测 -->评价模型效果 0. 缺失 ...
js中every用法_js数组中的方法 some, every, filter, find,map, reduce讲解及使用场景
前言之前对数组的循环来说,我拿到代码就使用forEach循环,主要原因是我对数组的其他方法不是很了解,以及觉得forEach已经可以做到想要的效果,没必要在去使用其他方法,这都是对使用场景不了解导致 ...
vue ajax传输数组,ajax请求回数组数据，Vue页面数组没同步问题
记录bug 为什么 ajax 获取到了 vm.$data.list 页面上却没有显示出来的? 代码 //页面 {{ *** }} //请求数据 send: function(){ var that = ...
Java常用http请求库
文章目录常用http请求库 1. HttpClient 使用方法使用示例 2. OKhttp 使用方法使用示例 3. Retrofit 相关注解使用方法使用示例 4. RestTemplat ...
elementui，请求后端数据的方法封装
最近遇到一个前端,请求参数不是按照json来搞的,给我整迷了,而且她还比较倔强.因为后端框架是统一按照json的格式接收和返回数据的(例外的除外),接下来就下一个请求后端的方法,大家可以参考一下: 前 ...
ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...

js常用处理请求到的数据的方法(即map，filter，find，findIndex,some,every一些常用方法的使用)

前言：

js常用处理请求到的数据的方法(即map，filter，find，findIndex,some,every一些常用方法的使用)相关推荐

最新文章

热门文章