zoukankan      html  css  js  c++  java
  • filter() 与 map() ,数据过滤以及接口数据映射

            list: pois.filter((item) => {
              return item.photos.length
            }).map((item) => {
              return {
                type: item.type,
                img: item.photos[0].url,
                name: item.name,
                price: Math.floor(Math.random() * 100),
                comment: Math.floor(Math.random() * 1000),
                rate: Math.floor(Math.random() * 10 / 2),
                scene: item.tag,
                status: '可订明日',
                location: item.location,
                module: item.type.split(';')[0]
              }
            }),

    filter 过滤,当item 元素的 photos 里面有图片的时候,我们才要,没有就不要了

    也可以简写 

    pois.filter(item=> item.photos.length) 满足条件的我就要,不满足的就不要

    --------------------------------------------------------------------

    接口数据映射 map()函数

    map((item) => {
              return {
                type: item.type,
                img: item.photos[0].url,
                name: item.name,
                price: Math.floor(Math.random() * 100),
                comment: Math.floor(Math.random() * 1000),
                rate: Math.floor(Math.random() * 10 / 2),
                scene: item.tag,
                status: '可订明日',
                location: item.location,
                module: item.type.split(';')[0]
              }
            })

    最后返回的数据结构 是你定义好的 type,img,name 等等

    Q:那么为什么要使用map呢?

    A:如果,后端改api接口字段了,前端之前的字段没有改,那么我可以能一次要改很多地方,而且数据格式可能还不一样的;

    前端一定要有自己的数据字段,使用map() 直接接口数据映射,我后面就只改映射时的字段就好!

    切记,切记,坑进去了,就要爬出来!

  • 相关阅读:
    SQL——模糊查询LIKE
    SQL——表连接JOIN
    【转】Java MySQL数据类型对照
    Java精确计算小数
    zTree 勾选checkbox
    【转】Freemarker输出$和html标签等特殊符号
    freemarker(FTL)常见语法大全
    【转载】浏览器与服务器通信的过程
    python基础 常见用法
    360浏览器兼容性问题
  • 原文地址:https://www.cnblogs.com/suni1024/p/12134133.html
Copyright © 2011-2022 走看看