前言
接口返回数据为数组列表时,通常比较全面,包含了很多不需要的数据,可以通过 map 方法处理返回数据,筛选出想要的数据
例如(下面默认按照这个数据为例)
// 接口返回数据 | |
res = [{ | |
id: 1, | |
name: 'zhangsan', | |
age: 16, | |
gender: 0 | |
}, { | |
id: 2, | |
name: 'lisi', | |
age: 20, | |
gender: 1 | |
}] |
如果只想获取 res 每项中的 id 和 name,这里直接给出最简洁写法,下面有具体解释
// 第一种方法:箭头函数、 解构赋值 | |
const data = res.map((id, name) => ({id, name})) | |
// 第二种方法:箭头函数、返回对象(相对更容易理解) | |
const data = res.map(v => ({id: v.id, name: v.name})) |
经过上面两种方法处理后的data结果如下
// 处理后的数据 | |
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 为重命名的值,后面返回的对象只是对象简写方法换成正常写法而已。
看到这里自己可以在控制台试试,练习一下,真正理解了发现并不难~
完结 --->