前端處理接口數據經常使用方法

平常開發中，後端給的數據有時不能直接使用，須要通過一些處理。這裏總結一些經常使用的方法，持續更新。

數組

去掉數組中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"}