1, Concept
The map() method creates a new array, and the result is the result returned after each element in the array calls a provided function.

2, Grammar

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array 
}[, thisArg])

Parameters:
callback function to generate new array elements, using three parameters:
The current element being processed in the currentValue callback array.
Index the index of the current element being processed in the optional callback array.
Array the array to which the optional callback map method is called.
thisArg optional this value used when the callback function is executed.

Return value:
A new array, each element is the result of the callback function.

3, Description
When using the map method to process arrays, the range of array elements is determined before the first call of the callback method. During the execution of the map method: the newly added elements in the original array will not be accessed by callback; If the existing elements are changed or deleted, the value passed to the callback is the value at the time when the map method traverses them; The deleted element will not be accessed.

4, Usage example
① Find the square root of each element in the array

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
console.log(numbers);
console.log(roots);

Print results:

(3) [1, 4, 9]
(3) [1, 2, 3]

② Reformat the objects in the array using map

var kvArray =
    [
        { key: 1, value: 10 },
        { key: 2, value: 20 },
        { key: 3, value: 30 }
    ];

var reformattedArray = kvArray.map(function (obj) {
    var rObj = {};
    rObj[obj.key] = obj.value;
    return rObj;
});

// reformattedArray array is: [{1: 10}, {2: 20}, {3: 30}], 
// The kvArray array was not modified: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]

③ Use a function with one parameter to map (build) an array of numbers
How map works when a function requires a parameter:
When the map loops through the original array, this parameter is automatically assigned to each corresponding element in the array

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

Print results:

(3) [1, 4, 9]
(3) [2, 8, 18]

④ General map method
How to use the map method on a String to obtain an array of ASCII codes corresponding to each character in the String:

var map = Array.prototype.map
var a = map.call("Hello World", function (x) {
    return x.charCodeAt(0);
})
console.log(a);
// Print results:
// [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

⑤ Case of stepping on a pit
Usually, the callback function in the map method only needs to accept one parameter, that is, the array element itself being traversed. However, this does not mean that the map only passes one parameter to the callback. This thinking inertia may make us make an easy mistake.
What does the following statement return

["1", "2", "3"].map(parseInt);
// You might think it's [1, 2, 3]
// But the actual result is [1, NaN, NaN]

Resolution:
Usually, when parseInt is used, only one parameter needs to be passed. But in fact, parseInt can have two parameters, and the second parameter is a hexadecimal number. (it can be verified by the statement "alert(parseInt.length)===2".)

console.log((parseInt.length)===2);  //true

When the map method calls the callback function, it will pass three parameters: the element currently being traversed, the element index, and the original array itself. The third parameter parseInt will be ignored, but the second parameter will not, that is, parseInt uses the passed index value as a hexadecimal number, thus returning NaN
For example:

function returnInt(element) {
    return parseInt(element, 10);
}
['1', '2', '3'].map(returnInt); 
// Print result: [1, 2, 3]
// Because the second parameter represents hexadecimal, which is hexadecimal.


// You can also use a simple arrow function, and the result is the same as above
['1', '2', '3'].map( str => parseInt(str) );


// A simpler way:
['1', '2', '3'].map(Number);               // [1, 2, 3]
// Unlike 'parseInt', the following results will return floating-point numbers or exponents:
['1.1', '2.2e2', '3e300'].map(Number);     // [1.1, 220, 3e+300]

reference resources:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map