JS数组map和filter方法的使用以及比对
map()map 不会检测空数组map 不会改变原始数组map(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];callback : 从当前元素函数产生新的数组元素thisArg : 对象作为该执行回调时使用返回一个新的数组,数组中的元素为原始数据经过调用函数进行处理后的值,主要用来获取对
·
map()
- map 不会检测空数组
- map 不会改变原始数组
map(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
callback : 从当前元素函数产生新的数组元素
thisArg : 对象作为该执行回调时使用
返回一个新的数组,数组中的元素为原始数据经过调用函数进行处理后的值
,主要用来获取对象数组中的某些特定属性。
比如一个对象数组包括姓名和年龄,我们需要单独将年龄抽取出来就可以用到map方法。
const a = [{name:'zs',age:11},{name:'ls',age:12},{name:'ws',age:13}]
console.log("a",a)
// [
// {
// "name": "zs",
// "age": 11
// },
// {
// "name": "ls",
// "age": 12
// },
// {
// "name": "ws",
// "age": 13
// }
// ]
let v = a.map(item => {
return item.name
})
console.log("v",v)
// [
// "zs",
// "ls",
// "ws"
// ]
// 返回多个元素
let m = a.map(item => {
return {name1:item.name,age1:item.age}
})
console.log("v",m)
// [
// {
// "name1": "zs",
// "age1": 11
// },
// {
// "name1": "ls",
// "age1": 12
// },
// {
// "name1": "ws",
// "age1": 13
// }
// ]
filter()
- 不会改变原有数组的值,产生一个新的数组
利用filter对数组的数据进行过滤,filter和map一样不会改变原数组的值,只会读取原数组的值进行处理后返回一个新的数组,当我们在filter中对原数据的数据进行修改时,只会改变新生成的数组中的值,原数组不会发生改变
。
例如:对上面map中a数组进行过滤出名字不为ws的数据
filter对数据进行过滤
let f = a.filter(item => {
if(item.name != 'ws'){
return item
}
})
console.log("f",f)
// [
// {
// "name": "zs",
// "age": 11
// },
// {
// "name": "ls",
// "age": 12
// }
// ]
通过map进行过滤数据
let m = a.map(item => {
if(item.name != 'ws'){
return item
}
})
输出的结果
// [
// {
// "name": "zs",
// "age": 11
// },
// {
// "name": "ls",
// "age": 12
// },
// undefined
// ]
使用map和filter过滤数据的区别
- 使用map进行过滤时不符合条件的数据会被加工处理为
undefined
,是对原数组中的元素进行加工处理 - filter只会将符合条件的数据返回为一个新数组,是对原数组进行过滤筛选
如果错误欢迎指正,后面会持续进行更新
更多推荐
已为社区贡献4条内容
所有评论(0)