欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js-关于数组map方法的个人理解

程序员文章站 2022-03-21 11:36:26
JavaScript Array map() 方法https://www.runoob.com/jsref/jsref-map.html这是挂载在数组上的原型方法,用于遍历数组后返回新数组。很多人都熟悉的基础用法:let arr = [ {id: 1,name: "张三"}, {id: 2,name: "李四"}, {id: 3,name: "王五"}]let newArr = arr.map(el=>el.name)console.log(newArr)...

JavaScript Array map() 方法

https://www.runoob.com/jsref/jsref-map.html

这是挂载在数组上的原型方法,用于遍历数组后返回新数组。

很多人都熟悉的基础用法:

let arr = [
    {id: 1,name: "张三"},
    {id: 2,name: "李四"},
    {id: 3,name: "王五"}
]
let newArr = arr.map(el=>el.name)
console.log(newArr)		//[ '张三', '李四', '王五' ]

在实际工作中可能会有前后端没统一字段时的情况。比如上面的arr是你页面假数据,而后台给你的却是:

let arrHouTai = [
    {
        userId: 1,
        userName:"张三1"
    },
    {
        userId: 2,
        userName: "李四2"
    },
    {
        userId: 3,
        userName: "王五3"
    }
]

你就需要使用map将后台给你的数据与你的数据配对一下:

let newArr = arrHouTai.map(el=>{
	// 如果有复杂情况可以在这里对el的值进行更细致的控制
    return{
        id:el.userId,
        name:el.userName,
        ...el 		// 1
    }
})
console.log(newArr)
//[
//  { id: 1, name: '张三1', userId: 1, userName: '张三1' },
//  { id: 2, name: '李四2', userId: 2, userName: '李四2' },
//  { id: 3, name: '王五3', userId: 3, userName: '王五3' }
//]
  1. 推荐在拼接完你所需要的数据后,再将原el解构在最后,这样的话如果需要某些参数带入其他接口时,就尽量采用后台指定的参数,避免给维护制造不必要的麻烦。*

例外,无论后台键跟你定义的键是否一样,推荐一条条的拼接。因为就算有重复的,解构进去也会进行覆盖的,所以不必担心。

而我们也不能仅仅这么简单就拉倒了吧?回过头再看看map的api:

arr.map((currentValue ,index,arr){	// 1
// 函数体
},num)	// 2
  1. map函数第一个参数,即回调函数能传出的三个参数
参数 描述
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
  1. map函数第二个参数
参数 描述
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。

全部参数都写全时的打印效果如下:

let arrData = [11,22,33]

arrData.map((el,index,arr)=>{
    console.log(el,index,arr,option)
},option={a:1})
// 11 0 [ 11, 22, 33 ] { a: 1 }
// 22 1 [ 11, 22, 33 ] { a: 1 }
// 33 2 [ 11, 22, 33 ] { a: 1 }

即:
el为每一项的值、index为每一项的键、arr就是遍历数组本身、option则相当于初始化数据。
需要注意的是arr为数组本身,更改arr的内容会影响原数据。而map的返回值是不影响原数据的。

这里面我们需要考量这个map的第二个参数的玩法

我们尝试着传入一个方法试试
let arrData = [11,22,33]
arrData.map((el)=>{
    console.log(option())
	//  打印
	//	回调打印
	//	打印
	//	回调打印
	//	打印
	//	回调打印
},option=test)

function test(){
    console.log("打印")
    return "回调打印"
}

好像可以玩点骚东西哦。

我们再尝试传入多个参数试试
arrData.map((el)=>{
    console.log(option,option1,option2)
},option={a:1},option1={a:2},option2={a:3})
// { a: 1 } { a: 2 } { a: 3 }
// { a: 1 } { a: 2 } { a: 3 }
// { a: 1 } { a: 2 } { a: 3 }

也是没问题的。这个map越来越好玩了。

关于为什么后面能带多个参数及方法,可以参考底层入口:

    /**
     * Calls a defined callback function on each element of an array, and returns an array that contains the results.
     * @param callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.
     * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
     */
    map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];

这里 callbackfn: (value: T, index: number, array: T[]) => U 就是我们常用的部分,
而后面的thisArg?: any就是我们map第二个参数放的位置。
后面的是?:any 就是 非必填的 可以传递任何参数

不过要注意一下,切勿车速过快。

let arrData = [11,22,33]
arrData.map((el)=>{
    console.log(arguments)
  //[Arguments] {
  //'0': {},
  //'1': [Function: require] {
  //  resolve: [Function: resolve] { paths: [Function: paths] },
  //  main: Module {
  //    id: '.',
  //    path: 'C:\\Users\\Administrator\\Desktop\\xxx',
  //    exports: {},
  //   parent: null,
  //    filename: 'C:\\Users\\Administrator\\Desktop\\xxx\\guanzhudianzanshoucang.js',
  //    loaded: false,
  //    children: [],
  //    paths: [Array]
  //  },
  //  extensions: [Object: null prototype] {
  //    '.js': [Function (anonymous)],
  //    '.json': [Function (anonymous)],
  //    '.node': [Function (anonymous)]
  //  },
  //  cache: [Object: null prototype] {
  //   'C:\\Users\\Administrator\\Desktop\\xxx\\guanzhudianzanshoucang.js': [Module]
  //  }
  //},......
},option=1,option1=1)

这里我就贴了一点点,后面有一大串有的没的。

其实你自己想想也是,第一个参数的回调塞得arguments,你还想让他给你啥呢。本人能力有限,只能给大家先探路探到这里了。

如果有更漂亮的写法欢迎来讨论,让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注,您的赞与关注将是我源源不断的前进动力。

本文地址:https://blog.csdn.net/qq_33226029/article/details/111031998