jQ基础篇--jQuery与JS中的map()方法
2017-06-30 09:45
288 查看
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]);
callback的参数也类似.
[].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...
相关文章推荐
- js和jq(jquery)方法区分区别1 (共三篇,详见我csdn)
- JS中的forEach、map方法 与 jQuery的$.each方法
- 【js jQuery】map集合 循环迭代取值---以及 map、json对象、list、array循环迭代的方法和区别
- js和jq(jquery)方法区别区分3(共三篇,详见我csdn)
- jquery.validate.js:1110 Uncaught ReferenceError: jQuery is not defined at jq 异常解决方法
- JS去掉首尾空格 简单方法大全(原生正则jquery)
- 图片加载失败裂开jquery和js的前端处理方法
- 【元素的查找】js和jquery方法查找dom元素
- js/jquery判断浏览器的方法大全
- js获取网页的url文件名( 例如index.aspx),js获取url的参数(例如获取 ?cid=joeylee的值),给jquery拓展方法
- [JS] 简单map实现 (普通和 jquery 版本)
- js实现的map方法示例代码
- (三)在js(jquery)中获得文本框焦点和失去焦点的方法
- jQuery应用load()方法后js失效的问题分析与解决
- jquery.cookie.js 使用方法
- jquery.parser.js 的 parseOptions 方法
- jquery属性的相关js实现方法
- 使用jQuery插件时避免重复引入jquery.js文件(jQuery 重复加载错误以及修复方法)
- jquery跟js初始化加载的多种方法
- Js中自定义(创建)Map以及对应方法