jQ基礎篇--jQuery與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(',');

例2：

$.map( [0,1,2], function(n){
  return n + 4;
});

結果：[4, 5, 6]

參考地址：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": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];
var emails = users.map(function (user) { return user.email; });
console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

因爲低版本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;
  };
}

使用方式：

var result = [1,2,3].map(function(val,index,array){
      return val *val;
  });
 console.log(result); //[1,4,9]

怎樣在字符串中使用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...