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": "[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;
  };
}

使用方式：

 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...