资讯专栏INFORMATION COLUMN

前端处理接口数据常用方法

henry14 / 1944人阅读

摘要:日常开发中,后端给的数据有时不能直接使用,需要经过一些处理。这里总结一些常用的方法,持续更新。数组去掉数组中去掉数组中最简单的写法数组分类数组结构变成结构对象部分复制对象伍六七伍六七

日常开发中,后端给的数据有时不能直接使用,需要经过一些处理。这里总结一些常用的方法,持续更新。
数组 去掉数组中undefind
const data = [1, 2, undefined];
const pureData = data.filter(element => element !== undefined);
去掉数组中undefind、""、null
const bad = [undefined, "", null];
const data = [1, 2, undefined, null, ""];
const pureData = data.filter(element => !bad.includes(element)); // [1, 2];
// 最简单的写法
const pureData = data.filter(element => element); // [1, 2];
数组分类(数组结构变成map结构)
const animals = [
    {
        "value": 4238,
        "name": "dog"
    },
    {
        "value": 35203,
        "name": "cat"
    },
    {
        "value": 10217,
        "name": "dog"
    },
    {
        "value": 3237,
        "name": "cat"
    }
]

const pureData = animals.reduce(function(sum, curValue) {
    const value = { ...curValue };
    sum[curValue.name] = sum[curValue.name] ? sum[curValue.name].concat(value) : [value];
    return sum;
}, {});
console.log(pureData)
/*
{
    dog:
        [{ value: 4238, name: "dog" }, { value: 10217, name: "dog" }],
    cat:
        [{ value: 35203, name: "cat" }, { value: 3237, name: "cat" }]
}
*/
对象 部分复制对象
const data = {name: "伍六七", age: 12, sex: "male", height: 188};
const {name, age, sex} = data;
const partObj = {name, age, sex}; // {name: "伍六七", age: 12, sex: "male"}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109593.html

相关文章

  • 前端权限

    摘要:自从有了前后端分离,前端的工作内容就变得越发多起来,其中有一项就是权限控制,下面就谈一谈前端权限。所以从某种意义上来说,就算前端的权限控制做得再严密,可能作用也是有限的。 showImg(https://segmentfault.com/img/bVbpwf4); 自从有了前后端分离,前端的工作内容就变得越发多起来,其中有一项就是权限控制,下面就谈一谈前端权限。 WHAT首先我们要理清...

    alaege 评论0 收藏0
  • 论如何把后台管理系统写出花

    摘要:知识在于分享,也是希望和大家交流下,如何把后台管理系统写得能更具工程化,模块化,更有效率。后台管理系统多为端,所以和的技术运用不多,会根据产品需求进行优雅降级和渐进增强。 前两天看segmentfault的时候,突然间,想写篇文章总结一下那些年自己写过的后台管理系统。作为我前端的入门项目,我对后台管理系统的感情还是挺深的。本着以下几点原因,写了此文。 对后台管理系统做一个综合全面的总...

    sugarmo 评论0 收藏0
  • 论如何把后台管理系统写出花

    摘要:知识在于分享,也是希望和大家交流下,如何把后台管理系统写得能更具工程化,模块化,更有效率。后台管理系统多为端,所以和的技术运用不多,会根据产品需求进行优雅降级和渐进增强。 前两天看segmentfault的时候,突然间,想写篇文章总结一下那些年自己写过的后台管理系统。作为我前端的入门项目,我对后台管理系统的感情还是挺深的。本着以下几点原因,写了此文。 对后台管理系统做一个综合全面的总...

    xi4oh4o 评论0 收藏0
  • 精读《REST, GraphQL, Webhooks, & gRPC 如何选型》

    摘要:而利用进一步提高了序列化速度,降低了数据包大小。带来的最大好处是精简请求响应内容,不会出现冗余字段,前端可以决定后端返回什么数据。再次强调,相比和,是由前端决定返回结果的反模式。请求者可以自定义返回格式,某些程度上可以减少前后端联调成本。 1 引言 每当项目进入联调阶段,或者提前约定接口时,前后端就会聚在一起热火朝天的讨论起来。可能 99% 的场景都在约定 Http 接口,讨论 URL...

    DevWiki 评论0 收藏0
  • 前端必须知道的Nginx的常用配置

    摘要:负载均衡是通过后端引入一个负载均衡器和至少一个额外的服务器来缓解这类问题增加的服务器和原本的服务器提供相同的内容。负载均衡不需要前端进行配置,主要是服务端进行配置,前端稍作了解即可。 Nginx主要功能 负载均衡 反向代理 动静分离 配置https 负载均衡 负载均衡是一门计算机网络技术,主要用来优化资源使用、最大化吞吐率、最小化响应时间、同时避免过载的目的。如果一个网站只有一台服...

    tracymac7 评论0 收藏0

发表评论

0条评论

henry14

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<