js中map和filter的区别

首先，这二者都会返回一个新数组，并不改变原数组
至于区别，来看一下下面几个例子

let arr = [{name:'张三',age:20,sex:'男'},{name:"李四",age:22,sex:"女"},{name:"王五",age:24,sex:'男'}]

let mapTest1 = arr.map((item)=>{
    return item.name
})
console.log(mapTest1)//[ '张三', '李四', '王五' ]

let filterTest1 = arr.filter(item=>{
    return item.name
})
console.log(filterTest1)//[{ name: '张三', age: 20, sex: '男' },{ name: '李四', age: 22, sex: '女' },{ name: '王五', age: 24, sex: '男' }]

let mapTest2 = arr.map(item=>{
    return item.age>20
})
console.log(mapTest2)//[ false, true, true ]

let filterTest2 = arr.filter(item=>{
    return item.age>20
})
console.log(filterTest2 )//[{ name: '李四', age: 22, sex: '女' },{ name: '王五', age: 24, sex: '男' }]

let mapTest3 = arr.map(item=>{
    if(item.age>20){
        return item.age
    }
})
console.log(mapTest3)//[ undefined, 22, 24 ]

let filterTest3 = arr.filter(item=>{
    if(item.age>20){
        return item.age
    }
})
console.log(filterTest3)//[{ name: '李四', age: 22, sex: '女' },{ name: '王五', age: 24, sex: '男' }]

let mapTest4 = arr.map(item=>{
    if(item.age>20){
        return item
    }
})
console.log(mapTest4)//[undefined,{ name: '李四', age: 22, sex: '女' },{ name: '王五', age: 24, sex: '男' }]

从上述几个例子可以看出来，map返回的是return的结果，而不是原数组中的元素，新的数组长度和原数组是一致的，而filter返回的是对原数组的过滤，其元素和原数组还是原数组中的元素，长度可能发生变化。
所以如果你是想要提取出数组中的某个属性，或是判断数组中的每个元素是否满足某个条件，可以使用map
如果你是想对原数组进行过滤，那就使用filter