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 參數說明app
callback
生成新數組元素的函數,使用三個參數:
currentValue
callback 的第一個參數,數組中正在處理的當前元素。
index
callback 的第二個參數,數組中正在處理的當前元素的索引。
array
callback 的第三個參數,map 方法被調用的數組。
thisArg
可選的。執行 callback 函數時 使用的this 值。
4 返回值dom
一個新數組,每一個元素都是回調函數的結果。ide
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 示列this
6.1 使用map格式化數組中的對象spa
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方法進行遍歷prototype
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 反轉字符串code
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; }; }