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

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	可选。当前元素属于的数组对象

2. 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