jquery中的map()方法與js中的map()方法

1.jquery中的map()方法

首先看一個簡單的實例：

$("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") );

語法：.map(callback(index,domElement))
用法：map() 把每個元素通過函數傳遞到當前匹配集合中，生成包含返回值的新的 jQuery 對象。
注：由於返回值是 jQuery 封裝的數組，使用 get() 來處理返回的對象以得到基礎的數組。

.map() 方法對於獲得或設置元素集的值特別有用。請思考下面這個帶有一系列復選框的表單：

<form method="post" action=""> <fieldset> <div> <label for="two">2</label> <input type="checkbox" value="2" id="two" name="number[]"> </div> <div> <label for="four">4</label> <input type="checkbox" value="4" id="four" name="number[]"> </div> <div> <label for="six">6</label> <input type="checkbox" value="6" id="six" name="number[]"> </div> <div> <label for="eight">8</label> <input type="checkbox" value="8" id="eight" name="number[]"> </div> </fieldset> </form> 

我們能夠獲得復選框 ID 組成的逗號分隔的列表：

$(':checkbox').map(function() { return this.id; }).get().join(',');

參考地址：http://www.w3school.com.cn/jq...

2.js 自帶的 map() 方法

用法： map() 方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組
這里的map不是“地圖”的意思，而是指“映射”。[].map(); 基本用法跟forEach方法類似
語法：array.map(callback,[ thisObject]);

allback的參數也類似：

[].map(function(value, index, array) { // ... }); 

map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素, 元素索引, 原數組本身.
例如：

var data = [1, 2, 3, 4]; var arrayOfSquares = data.map(function (item) { return item * item; }); alert(arrayOfSquares); // 1, 4, 9, 16 

在實際使用的時候，我們可以利用map方法方便獲得對象數組中的特定屬性值們，如下：

var users = [ {name: "張含韻", "email": "[e-mail]"}, {name: "江一燕", "email": "[e-mail]"}, {name: "李小璐", "email": "[e-mail]"} ]; var emails = users.map(function (user) { return user.email; }); console.log(emails.join(", ")); // [e-mail], [e-mail], [e-mail] 

由於低版本IE9以下不支持，Array.prototype擴展可以讓IE6-IE8瀏覽器也支持map方法：

if (typeof Array.prototype.map != "function") { Array.prototype.map = function (fn, context) { var arr = []; if (typeof fn === "function") { for (var k = 0, length = this.length; k < length; k++) { arr.push(fn.call(context, this[k], k, this)); } } return arr; }; }

怎樣在字符串中使用map

例：在一個String上使用 map 方法獲取字符串中每個字符所對應的 ASCII 碼組成的數組

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

簡單解釋下js中的charCodeAt()方法
用法：charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數
語法：stringObject.charCodeAt(index)
index參數必填，表示字符串中某個位置的數字，即字符在字符串中的下標。
注：字符串中第一個字符的下標是 0。如果 index 是負數，或大於等於字符串的長度，則 charCodeAt() 返回 NaN。
例如：

var str="Hello world!" document.write(str.charCodeAt(1)) 

結果：101

由map方法引發的一個題目["1", "2", "3"].map(parseInt)

通常情況下，map 方法中的 callback 函數只需要接受一個參數（很多時候，自定義的函數形參只有一個），就是正在被遍歷的數組元素本身。

但這並不意味着 map 只給 callback 傳了一個參數（會傳遞3個參數）。這個思維慣性可能會讓我們犯一個很容易犯的錯誤。
// 下面的語句返回什么呢:

["1", "2", "3"].map(parseInt); // 你可能覺的會是[1, 2, 3] // 但實際的結果是 [1, NaN, NaN] // 通常使用parseInt時,只需要傳遞一個參數.但實際上,parseInt可以有兩個參數.第二個參數是進制數.可以通過語句"alert(parseInt.length)===2"來驗證. // map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素, 元素索引, 原數組本身. // 第三個參數parseInt會忽視, 但第二個參數不會,也就是說,parseInt把傳過來的索引值當成進制數來使用.從而返回了NaN. //應該使用如下的用戶函數returnInt function returnInt(element){ return parseInt(element,10); } ["1", "2", "3"].map(returnInt);// 返回[1,2,3] 

parseInt()方法

語法：parseInt(string, radix)
string 必需。要被解析的字符串。
radix 可選。
a.表示要解析的數字的基數。該值介於 2 ~ 36 之間。
b.如果省略該參數或其值為 0，則數字將以 10 為基礎來解析。如果它以 "0x" 或 "0X" 開頭，將以 16 為基數。
c.如果該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN。

所以：["1", "2", "3"].map(parseInt)相當於
[parseInt("1", 0), parseInt("2", 1), parseInt("3", 2)]
parseInt("3", 2) 的第二個參數是界於 2-36 之間的，之所以返回 NaN 是因為 字符串 "3" 里面沒有合法的二進制數，所以 NaN

參考地址：
http://www.cnblogs.com/xuan52...
http://www.w3school.com.cn/js...
http://www.cnblogs.com/rocky-...
（推薦閱讀）http://justjavac.iteye.com/bl...