jQ基础篇--jQuery与JS中的map()方法

时间 2019-12-08 标签基础 jquery map 方法

1.jquery中的map()方法

首先看一个简单的实例：html

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

语法：.map(callback(index,domElement))
用法：map() 把每一个元素经过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
注：因为返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以获得基础的数组。java

.map() 方法对于得到或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：jquery

<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]app

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

2.js 自带的 map() 方法

用法： map() 方法返回一个由原数组中的每一个元素调用一个指定方法后的返回值组成的新数组
这里的map不是“地图”的意思，而是指“映射”。[].map(); 基本用法跟forEach方法相似
语法：array.map(callback,[ thisObject]);函数

allback的参数也相似：post

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

map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组自己.
例如：this

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