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 }))
完结撒花
文章来源:js map方法处理返回数据,获取指定数据简写方法 - 吃不棒的胖胖糖 - 博客园 (cnblogs.com)