0%

js map方法处理接口返回数据,获取指定数据简写方法

摘要:接口返回数据为数组列表时,通常比较全面,包含了很多不需要的数据,可以通过 map 方法处理返回数据,筛选出想要的数据

前言

接口返回数据为数组列表时,通常比较全面,包含了很多不需要的数据,可以通过 map 方法处理返回数据,筛选出想要的数据

例如

1
2
3
4
5
6
7
8
9
10
11
12
// 接口返回数据
res = [{
id: 1,
name: 'zhangsan',
age: 16,
gender: 0
}, {
id: 2,
name: 'lisi',
age: 20,
gender: 1
}]

如果只想获取 res 每项中的 id 和 name

即为

1
2
3
4
5
6
7
8
// 处理后的数据
data = [{
id: 1,
name: 'zhangsan'
}, {
id: 2,
name: 'lisi'
}]

最简单的方法就是 for 循环遍历,本文不讲 for 循环,讲一下 map 的简单写法

进入正题(敲黑板!!!)

下面统一按照上述的 res 数据为例子

首先从 map 最简单的方式实现 data

1
2
3
4
5
6
const data = res.map(function(item) {
return {
id: item.id,
name: item.name
}
})

当然可以使用 ES6 箭头函数简化

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

注意:这里需要注意的是使用箭头函数返回一个对象时不能直接去写 {} ,要在对象后面加上括号 ({}),防止和函数后面的大括号冲突而报错

上面是正常的写法,利用 ES6 解构赋值,还可以简写为如下

骚操作来了

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

怎么样,是不是变得非常简洁,但是会有一部分同学在这里懵逼了,不要着急,往下看

其实真正理解起来也不难,从上述简单的方式来看,箭头函数前面的参数 ({id, name}) 实际上是把 item 解构成了两个变量,其中这两个变量是 item 中存在的,即为 id, name ,然后后面是返回了一个对象,就可以用前面两个解构出来的变量了,由于 key 和 value 一样,所以写成了对象的简写方式

但是这种只适用于 key 值一样的情况,如果想换 data 的 key 值怎么办呢

例如想让处理后的 data 的 id 变为 code

1
2
3
4
5
6
7
8
// 处理后的数据
data = [{
code: 1,
name: 'zhangsan'
}, {
code: 2,
name: 'lisi'
}]

聪明的同学已经懂了,这个时候只需要操作后面返回的数据即可

即为

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

补充

上述方法已经基本满足日常使用,当然,如果参数的名字过长也可以取个别名

例如 res 改为

1
2
3
4
5
6
7
8
9
10
11
12
// 接口返回数据
res = [{
id: 1,
classAndSchoolName: 'zhangsan',
age: 16,
gender: 0
}, {
id: 2,
classAndSchoolName: 'lisi',
age: 20,
gender: 1
}]

此时若是按照上面的写法名字显然太长了

即为

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

这时候可以在参数部分重命名( 感觉像是在脱了裤子放屁,但是确实短了一点🌚 )

即为

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

此时可能又有同学懵逼了,为啥前面参数重命名的变量写在冒号后面呢?

这其实是两个概念,前面参数是解构赋值的重命名方法,name 为重命名的值,后面返回的对象只是对象简写方法换成正常写法而已

完结撒花 🎉,如有变动后续更新

2020-08-27 上午

-------------本文结束感谢您的阅读-------------