Array.prototype.map()方法詳解

Array.prototype.map()

1 語法

const new_array = arr.map(callback[, thisArg])

2 簡單栗子

let arr = [1, 5, 10, 15];
let newArr = arr.map(function(x) {
    return x * 2;
});
// arr is now [2, 10, 20, 30]
// newArr is still [1, 5, 10, 15]

3 參數說明

callback
    生成新數組元素的函數，使用三個參數：
    currentValue
    callback 的第一個參數，數組中正在處理的當前元素。
    index
    callback 的第二個參數，數組中正在處理的當前元素的索引。
    array
    callback 的第三個參數，map 方法被調用的數組。
thisArg
可選的。執行 callback 函數時 使用的this 值。

4 返回值

一個新數組，每個元素都是回調函數的結果。

5 詳細說明

map 方法會給原數組中的每個元素都按順序調用一次 callback 函數。callback 每次執行后的返回值（包括 undefined）組合起來形成一個新數組。 callback 函數只會在有值的索引上被調用；那些從來沒被賦過值或者使用 delete 刪除的索引則不會被調用。

callback 函數會被自動傳入三個參數：數組元素，元素索引，原數組本身。

如果 thisArg 參數有值，則每次 callback 函數被調用的時候，this 都會指向 thisArg 參數上的這個對象。如果省略了 thisArg 參數,或者賦值為 null 或 undefined，則 this 指向全局對象 。

map 不修改調用它的原數組本身（當然可以在 callback 執行時改變原數組）。

使用 map 方法處理數組時，數組元素的范圍是在 callback 方法第一次調用之前就已經確定了。在 map 方法執行的過程中：原數組中新增加的元素將不會被 callback 訪問到；若已經存在的元素被改變或刪除了，則它們的傳遞到 callback 的值是 map 方法遍歷到它們的那一時刻的值；而被刪除的元素將不會被訪問到。

6 示列

 6.1 使用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 is now [{1:10}, {2:20}, {3:30}], 
// kvArray is still [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]

 6.2 字符串使用map方法進行遍歷

var str="aabccd";
var obj={};
[].map.call(str,function(x,y,z){
    if(!obj[x]){
        obj[x]=1
    }else{
        obj[x]+=1
    }
});
//直接使用字符串的遍歷器接口 ES6
for (let x of str) {console.log(x)}
// obj is {a: 2, b: 1, c: 2, d: 1}

6.3 反轉字符串

var str = '12345';
var reverseStr = Array.prototype.map.call(str, function(x) {
    return x;
}).reverse().join('');
// reverseStr is '54321'

6.4 遍歷dom元素節點

var elems = document.querySelectorAll("div");
var classNames = Array.prototype.map.call(elems, function(obj) {
    return obj.className;
});
console.log("獲取頁面中所有div元素使用的class",classNames);

7 兼容舊瀏覽器

在那些沒有原生支持 map 方法的瀏覽器中，你可以使用下面的 Javascript 代碼來實現它。

if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(" this is null or not defined");
    }

    // 1. 將O賦值為調用map方法的數組.
    var O = Object(this);

    // 2.將len賦值為數組O的長度.
    var len = O.length >>> 0;

    // 3.如果callback不是函數,則拋出TypeError異常.
    if (Object.prototype.toString.call(callback) != "[object Function]") {
      throw new TypeError(callback + " is not a function");
    }

    // 4. 如果參數thisArg有值,則將T賦值為thisArg;否則T為undefined.
    if (thisArg) {
      T = thisArg;
    }

    // 5. 創建新數組A,長度為原數組O長度len
    A = new Array(len);

    // 6. 將k賦值為0
    k = 0;

    // 7. 當 k < len 時,執行循環.
    while(k < len) {

      var kValue, mappedValue;

      //遍歷O,k為原數組索引
      if (k in O) {

        //kValue為索引k對應的值.
        kValue = O[ k ];

        // 執行callback,this指向T,參數有三個.分別是kValue:值,k:索引,O:原數組.
        mappedValue = callback.call(T, kValue, k, O);

        // 返回值添加到新數組A中.
        A[ k ] = mappedValue;
      }
      // k自增1
      k++;
    }

    // 8. 返回新數組A
    return A;
  };      
}