一、基本使用方法

//ES5
var arr = [1,2,3,4];
var newArr = arr.map(function(item){
  return item * 2;
})
console.log(newArr); // [2,4,6,8]
//ES6
let arr = [1,2,3,4];
let newArr = arr.map(item => item * 2);
console.log(newArr); // [2,4,6,8]

map函数是JavaScript Array的方法之一。作用是对数组中的每一项进行处理后，返回一个新的数组。基本语法：array.map(callback(currentValue[, index[, array]]) 其中callback表示一个函数，可以有三个参数：currentValue表示当前正在处理的元素，index表示当前正在处理的元素的索引，array表示原数组。其中currentIndex和array是可选的参数。

二、高级使用方法

1、实现数组去重

let arr = [1,2,2,3,3,3,4,4,4,4],
    newArr = arr.sort((a,b)=>a-b).map((v, i, self) => {
        if(i == 0){
            return v;
        }else{
            if(v !== self[i-1]){
                return v;
            }
        }
    }).filter(v => v);
console.log(newArr); //[1,2,3,4]

代码原理：先将数组排序，然后通过map方法，如果当前元素不等于前一个，则返回当前元素，最后通过filter方法过滤掉undefined。

2、通过map实现一些常见的数组方法

//forEach
function forEach(arr, cb){
  for(let i=0;i<arr.length;i++){ cb(arr[i],i,arr); }
}
//map
function map(arr, cb){
  let res = [];
  for(let i=0;i<arr.length;i++){
    res.push(cb(arr[i],i,arr));
  }
  return res;
}
//filter
function filter(arr, cb){
  let res = [];
  for(let i=0;i<arr.length;i++){
    if(cb(arr[i],i,arr)){
      res.push(arr[i]);
    }
  }
  return res;
}
let arr = [1,2,3,4],
    newArr = map(arr,(item) => item * 2);
console.log(newArr); //[2,4,6,8]

代码原理：通过自定义forEach,map,filter方法实现类似于它们的功能，同时使用map方法使代码更加简洁。

三、使用场景

1、数据展示

let arr = [
  {
    name: 'Tom',
    age: 18
  },
  {
    name: 'Jerry',
    age: 20
  }
];
let nameArr = arr.map((obj) => obj.name);
console.log(nameArr); //['Tom','Jerry']

代码原理：通过map方法，将数组中每一个对象中的name属性提取出来，生成一个新的数组。

2、数组操作

let arr = [1,2,3,4],
    newArr = arr.map((item) => item * 2);
console.log(newArr); //[2,4,6,8]

代码原理：通过map方法，将数组中的每一个元素都乘以2，生成一个新的数组。

3、字符串处理

let arr = [' apple ', ' banana ', ' pear '],
    trimArr = arr.map((item) => item.trim());
console.log(trimArr); // ['apple', 'banana', 'pear']

代码原理：通过map方法，将数组中的每个字符串都去除空格，生成一个新的数组。

4、生成HTML元素

let arr = ['apple','banana','pear'],
    htmlArr = arr.map(item => `<li>${item}</li>`).join('');
console.log(`
  <ul>${htmlArr}
  </ul>`); // 
  <ul>
   <li>apple</li>
   <li>banana</li>
   <li>pear</li>
  </ul>

代码原理：通过map方法生成一个新的数组，其中每个元素都是一个li元素字符串。最后通过join方法将字符串数组拼接成一个完整的ul元素字符串。

四、总结

map函数是JavaScript中常用的高阶函数，通过它可以简化很多数组的操作。使用map方法不仅可以快速地生成新的数组，也可以实现一些常见的数组方法功能。同时它也可以用于各种场景，比如数据展示，数组操作，字符串处理和生成HTML元素等等。

深入浅出：从多个方面详解map函数JS