1. 说明

map()方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
小案例：

const arr = [1, 4, 9, 16]
const map = arr.map(x => x * 2)

2. 语法

let newArr = arr.map(function callback(currentValue[, index[, arr]]){
    
    
	//do Something
}[, thisArg])

2.1 参数

• callback：生成新数组元素的函数，使用3个参数
  • currentValue：callback函数正在处理的数组的元素
  • index：callback函数正在处理的数组的元素的索引
  • arr：调用map方法的数组
• thisArg：可选，执行callback函数时被用作this

2.2 返回值

一个由原数组每个元素执行回调函数的结果组成的新数组。

3. 描述

• callback只会在有值得索引上被调用
• map()会返回一个新数组
• callback()会被自动传入三个参数：数组元素，元素索引，原数组本身
• 如果thisArg参数提供给map，则会被用作函数的this值。否则，undefined会被用作callback的this值
• map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）

4. 实例

4.1 求数组元素平方根

const numbers = [1, 4, 9]
let roots = numbers.map(Math.sqrt)

4.2 格式化数组中的对象

let kvArr = [
	{
    
    key: 1, value: 10},
	{
    
    key: 2, value: 20},
	{
    
    key: 3, value: 30}
]

let formattedArr = kvArr.map(obj => {
    
    
	let rObj = {
    
    }
	rObj[obj.key] = obj.value
	return rObj
})

4.3 使用一个包含一个参数的函数来mapping(构建)一个数字数组

let numbers = [1, 4, 9]
let doubles = numbers.map(function(num){
    
    
	return num*2
})

4.4 获取字符串每个字符所对应的ASCII码组成的数组

let map = Array.prototype.map
let a = map.call('Hello World', function(x){
    
    
	return x.charCodeAt(0)
})

5. 重写Array.prototype.map()

/**
 * 1. 确定参数：callback[, thisArg]
 * 2. 确定返回值：数组newArr
 * 3. 判断callback是否为function，否则直接返回
 * 4. 确定调用_map函数的数组：this
 * 5. 把对应参数：v, i, this传入callback函数
 * 6. callback函数的this需指向thisArg
 */

Array.prototype._map = function(callback){
    
    
    if(typeof callback !== 'function') return
    let arr = this
    let newArr = []
    for(let i=0; i<arr.length; i++){
    
    
        let res = callback.call(arguments[i], arr[i], i, arr)
        newArr.push(res)
    }
    return newArr
}

6. 参考链接

Array.prototype.map()