前端處理接口數(shù)據(jù)常用方法

henry14 發(fā)布于2019-08-26 13:49 / 2159人閱讀

摘要：日常開發(fā)中，后端給的數(shù)據(jù)有時(shí)不能直接使用，需要經(jīng)過一些處理。這里總結(jié)一些常用的方法，持續(xù)更新。數(shù)組去掉數(shù)組中去掉數(shù)組中最簡單的寫法數(shù)組分類數(shù)組結(jié)構(gòu)變成結(jié)構(gòu)對象部分復(fù)制對象伍六七伍六七

日常開發(fā)中，后端給的數(shù)據(jù)有時(shí)不能直接使用，需要經(jīng)過一些處理。這里總結(jié)一些常用的方法，持續(xù)更新。

數(shù)組 去掉數(shù)組中undefind

const data = [1, 2, undefined];
const pureData = data.filter(element => element !== undefined);

去掉數(shù)組中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];

數(shù)組分類(數(shù)組結(jié)構(gòu)變成map結(jié)構(gòu))

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" }]
}
*/

對象 部分復(fù)制對象

const data = {name: "伍六七", age: 12, sex: "male", height: 188};
const {name, age, sex} = data;
const partObj = {name, age, sex}; // {name: "伍六七", age: 12, sex: "male"}

云服務(wù)器 GPU云服務(wù)器數(shù)據(jù)挖掘常用方法數(shù)據(jù)分析常用方法常用數(shù)據(jù)分析方法數(shù)據(jù)分析常用統(tǒng)計(jì)方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109593.html

相關(guān)文章

談前端權(quán)限

摘要：自從有了前后端分離，前端的工作內(nèi)容就變得越發(fā)多起來，其中有一項(xiàng)就是權(quán)限控制，下面就談一談前端權(quán)限。所以從某種意義上來說，就算前端的權(quán)限控制做得再嚴(yán)密，可能作用也是有限的。 showImg(https://segmentfault.com/img/bVbpwf4); 自從有了前后端分離，前端的工作內(nèi)容就變得越發(fā)多起來，其中有一項(xiàng)就是權(quán)限控制，下面就談一談前端權(quán)限。 WHAT首先我們要理清...

alaege 2019-08-26 13:33 評論0 收藏0
論如何把后臺管理系統(tǒng)寫出花

摘要：知識在于分享，也是希望和大家交流下，如何把后臺管理系統(tǒng)寫得能更具工程化，模塊化，更有效率。后臺管理系統(tǒng)多為端，所以和的技術(shù)運(yùn)用不多，會(huì)根據(jù)產(chǎn)品需求進(jìn)行優(yōu)雅降級和漸進(jìn)增強(qiáng)。前兩天看segmentfault的時(shí)候，突然間，想寫篇文章總結(jié)一下那些年自己寫過的后臺管理系統(tǒng)。作為我前端的入門項(xiàng)目，我對后臺管理系統(tǒng)的感情還是挺深的。本著以下幾點(diǎn)原因，寫了此文。對后臺管理系統(tǒng)做一個(gè)綜合全面的總...

sugarmo 2019-08-19 18:38 評論0 收藏0
論如何把后臺管理系統(tǒng)寫出花

摘要：知識在于分享，也是希望和大家交流下，如何把后臺管理系統(tǒng)寫得能更具工程化，模塊化，更有效率。后臺管理系統(tǒng)多為端，所以和的技術(shù)運(yùn)用不多，會(huì)根據(jù)產(chǎn)品需求進(jìn)行優(yōu)雅降級和漸進(jìn)增強(qiáng)。前兩天看segmentfault的時(shí)候，突然間，想寫篇文章總結(jié)一下那些年自己寫過的后臺管理系統(tǒng)。作為我前端的入門項(xiàng)目，我對后臺管理系統(tǒng)的感情還是挺深的。本著以下幾點(diǎn)原因，寫了此文。對后臺管理系統(tǒng)做一個(gè)綜合全面的總...

xi4oh4o 2019-06-27 13:59 評論0 收藏0
精讀《REST, GraphQL, Webhooks, & gRPC 如何選型》

摘要：而利用進(jìn)一步提高了序列化速度，降低了數(shù)據(jù)包大小。帶來的最大好處是精簡請求響應(yīng)內(nèi)容，不會(huì)出現(xiàn)冗余字段，前端可以決定后端返回什么數(shù)據(jù)。再次強(qiáng)調(diào)，相比和，是由前端決定返回結(jié)果的反模式。請求者可以自定義返回格式，某些程度上可以減少前后端聯(lián)調(diào)成本。 1 引言每當(dāng)項(xiàng)目進(jìn)入聯(lián)調(diào)階段，或者提前約定接口時(shí)，前后端就會(huì)聚在一起熱火朝天的討論起來。可能 99% 的場景都在約定 Http 接口，討論 URL...

DevWiki 2019-08-23 11:53 評論0 收藏0
前端必須知道的Nginx的常用配置

摘要：負(fù)載均衡是通過后端引入一個(gè)負(fù)載均衡器和至少一個(gè)額外的服務(wù)器來緩解這類問題增加的服務(wù)器和原本的服務(wù)器提供相同的內(nèi)容。負(fù)載均衡不需要前端進(jìn)行配置，主要是服務(wù)端進(jìn)行配置，前端稍作了解即可。 Nginx主要功能負(fù)載均衡反向代理動(dòng)靜分離配置https 負(fù)載均衡負(fù)載均衡是一門計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)，主要用來優(yōu)化資源使用、最大化吞吐率、最小化響應(yīng)時(shí)間、同時(shí)避免過載的目的。如果一個(gè)網(wǎng)站只有一臺服...

tracymac7 2019-07-25 14:27 評論0 收藏0