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 }))

完結撒花