map方法處理返回數據，獲取指定數據簡寫方法

前言

后端返回數據為數組列表時，通常比較全面，包含了很多不需要的數據，可以通過 map 方法處理返回數據，篩選出想要的數據

例如

// 返回數據

res = [{

id: 1,

name: 'zhangsan',

age: 16,

gender: 0

}, {

id: 2,

name: 'lisi',

age: 20,

gender: 1

}]

如果只想獲取 res 每項中的 id 和 name

即為

// 處理后的數據

data = [{

id: 1,

name: 'zhangsan'

}, {

id: 2,

name: 'lisi'

}]

最簡單的方法就是 for 循環遍歷，本文不講 for 循環，講一下 map 的簡單寫法

進入正題

下面統一按照上述的 res 數據為例子

首先從 map 最簡單的方式實現 data

const data = res.map(function(item) {

return {

id: item.id,

name: item.name

}

})

當然可以使用 ES6 箭頭函數簡化

const data = res.map(item => ({ id: item.id, name: item.name }))

注意：這里需要注意的是使用箭頭函數返回一個對象時不能直接去寫 {} ，要在對象后面加上括號 ({})，防止和函數后面的大括號沖突而報錯

上面是正常的寫法，利用 ES6 解構賦值，還可以簡寫為如下

騷操作來了

const data = res.map(({ id, name }) => ({ id, name }))

怎么樣，是不是變得非常簡潔，但是會有一部分人在這里懵逼了，不要著急，往下看

其實真正理解起來也不難，從上述簡單的方式來看，箭頭函數前面的參數 ({id, name}) 實際上是把 item 解構成了兩個變量，其中這兩個變量是 item 中存在的，即為 id, name ，然后后面是返回了一個對象，就可以用前面兩個解構出來的變量了，由于 key 和 value 一樣，所以寫成了對象的簡寫方式

但是這種只適用于 key 值一樣的情況，如果想換 data 的 key 值怎么辦呢

例如想讓處理后的 data 的 id 變為 code

// 處理后的數據

data = [{

code: 1,

name: 'zhangsan'

}, {

code: 2,

name: 'lisi'

}]

聰明的同學已經懂了，這個時候只需要操作后面返回的數據即可

即為

const data = res.map(({ id, name }) => ({ code: id, name }))

完結撒花