js 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 解構賦值，還可以簡寫為如下

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

補充

上述方法已經基本滿足日常使用，當然，如果參數的名字過長也可以取個別名

例如 res 改為

// 接口返回數據
res = [{
  id: 1,
  classAndSchoolName: 'zhangsan',
  age: 16,
  gender: 0
}, {
  id: 2,
  classAndSchoolName: 'lisi',
  age: 20,
  gender: 1
}]

此時若是按照上面的寫法名字顯然太長了

即為

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

這時候可以在參數部分重命名（ 有點花里胡哨了 ）

即為

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

此時可能又有同學懵逼了，為啥前面參數重命名的變量寫在冒號后面呢？

這其實是兩個概念，前面參數是解構賦值的重命名方法，name 為重命名的值，后面返回的對象只是對象簡寫方法換成正常寫法而已。

看到這里自己可以在控制台試試，練習一下，真正理解了發現並不難～

完結 --->