深入淺出：從多個方面詳解map函數JS

一、基本使用方法

//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 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 => `
${item}
`).join('');
console.log(`
${htmlArr}
`); // 
apple
banana
pear

代碼原理：通過map方法生成一個新的數組，其中每個元素都是一個li元素字符串。最後通過join方法將字符串數組拼接成一個完整的ul元素字符串。

四、總結

map函數是JavaScript中常用的高階函數，通過它可以簡化很多數組的操作。使用map方法不僅可以快速地生成新的數組，也可以實現一些常見的數組方法功能。同時它也可以用於各種場景，比如數據展示，數組操作，字符串處理和生成HTML元素等等。