map方法處理返回?cái)?shù)據(jù)，獲取指定數(shù)據(jù)簡(jiǎn)寫方法

前言

后端返回?cái)?shù)據(jù)為數(shù)組列表時(shí)，通常比較全面，包含了很多不需要的數(shù)據(jù)，可以通過 map 方法處理返回?cái)?shù)據(jù)，篩選出想要的數(shù)據(jù)

例如

// 返回?cái)?shù)據(jù)

res = [{

id: 1,

name: 'zhangsan',

age: 16,

gender: 0

}, {

id: 2,

name: 'lisi',

age: 20,

gender: 1

}]

如果只想獲取 res 每項(xiàng)中的 id 和 name

即為

// 處理后的數(shù)據(jù)

data = [{

id: 1,

name: 'zhangsan'

}, {

id: 2,

name: 'lisi'

}]

最簡(jiǎn)單的方法就是 for 循環(huán)遍歷，本文不講 for 循環(huán)，講一下 map 的簡(jiǎn)單寫法

進(jìn)入正題

下面統(tǒng)一按照上述的 res 數(shù)據(jù)為例子

首先從 map 最簡(jiǎn)單的方式實(shí)現(xiàn) data

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

return {

id: item.id,

name: item.name

}

})

當(dāng)然可以使用 ES6 箭頭函數(shù)簡(jiǎn)化

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

注意：這里需要注意的是使用箭頭函數(shù)返回一個(gè)對(duì)象時(shí)不能直接去寫 {} ，要在對(duì)象后面加上括號(hào) ({})，防止和函數(shù)后面的大括號(hào)沖突而報(bào)錯(cuò)

上面是正常的寫法，利用 ES6 解構(gòu)賦值，還可以簡(jiǎn)寫為如下

騷操作來了

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

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

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

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

例如想讓處理后的 data 的 id 變?yōu)?code

// 處理后的數(shù)據(jù)

data = [{

code: 1,

name: 'zhangsan'

}, {

code: 2,

name: 'lisi'

}]

聰明的同學(xué)已經(jīng)懂了，這個(gè)時(shí)候只需要操作后面返回的數(shù)據(jù)即可

即為

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

完結(jié)撒花

總結(jié)

以上是生活随笔為你收集整理的js 用下标获取map值_js map方法处理返回数据，获取指定数据简写方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。