The use and comparison of JS array map and filter methods

map()

  • map will not detect empty arrays
  • map doesn't mutate the original array

map (callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[]; callback : generate a new
array element from the current element
function thisArg : object as the execution used when callback

Returns a new array, 数组中的元素为原始数据经过调用函数进行处理后的值, which is mainly used to obtain some specific properties in the object array.
For example, an object array includes names and ages. We need to extract the ages separately to use the map method.

      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()

  • Will not change the value of the original array, generate a new array

Use filter to filter the data of the array. Like map, filter will not change the value of the original array, but will only read the value of the original array for processing and return a new array 当我们在filter中对原数据的数据进行修改时,只会改变新生成的数组中的值,原数组不会发生改变.
For example: filter the a array in the above map to filter the data whose name is not ws
filter to filter the data

let f = a.filter(item => {
    
    
        if(item.name != 'ws'){
    
    
          return item
        }
     })
    console.log("f",f)
    // [
    // {
    
    
    //   "name": "zs",
    //   "age": 11
    // },
    //   {
    
    
    //     "name": "ls",
    //     "age": 12
    //   }
    // ]

Filter data through map

let m = a.map(item => {
    
    
    if(item.name != 'ws'){
    
    
      return item
    }
 })

output result

    // [
    // {
    
    
    //   "name": "zs",
    //   "age": 11
    // },
    //   {
    
    
    //     "name": "ls",
    //     "age": 12
    //   },
    //   undefined
    // ]

The difference between using map and filter to filter data

  • When using map to filter, the unqualified data will be processed undefined, which is to process the elements in the original array
  • filter will only return qualified data as a new array, which is to filter and filter the original array

Please correct me if I am wrong, and I will continue to update it later

Guess you like

Origin blog.csdn.net/chang100111/article/details/124116123