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只会将符合条件的数据返回为一个新数组,是对原数组进行过滤筛选

如果错误欢迎指正,后面会持续进行更新

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐