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": "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; }; }
怎样在字符串中使用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...
转载于:https://www.cnblogs.com/hehuiself/p/7410388.html
jquery中的map()方法与js中的map()方法相关推荐
- vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
- js 中 java 代码_在js中嵌套java代码
jsp中有时候在js中操作某些java后台传递过来的数据逻辑比较复杂,比如list内容的遍历,可以直接在页面上添加java脚本来执行内容,代码如下: //在js中插入java代码操作 //取出java ...
- node.js中模块_在Node.js中需要模块:您需要知道的一切
node.js中模块 by Samer Buna 通过Samer Buna 在Node.js中需要模块:您需要知道的一切 (Requiring modules in Node.js: Everythi ...
- jquery 打开服务器文件管理,javascript - 前端js如何封装一个方法或者是jQuery的插件实现点击一个按钮打开本地文件管理系统,进行上传文件...
世界只因有你2017-05-16 13:38:563楼 前段时间封装的一个方法,使用ajax和formData方法,实现文件上传,在上传的过程中显示上传进度 js $('#upload').on('c ...
- html中splice向数组添加元素,js中splice()的强大(删除,插入或替换数组的元素)
1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(其实位置),第二个参数(0),第三个参数( ...
- python之js解密_python中的RSA加密和JS中的解密
我是密码学的全新人物.我想从服务器端生成RSA密钥对,并将其发送给所有客户端(浏览器).但在此之前,我只是通过加密python中的数据并通过pubnub发送到index.html文件并尝试在JavaS ...
- php中正则表达式用法,php与js中的正则表达式用法
1. php中的正则: if(preg_match('/^[^x00-xff]+$/', $_POST['password']) || !preg_match('/^\w+$/', $_POST['p ...
- js mysql json字符串转数组中_php数据库数据转换为js中的json对象
/ 1.在company数据user表中取出10条数据,保存为数组 2.在将数组转化为json格式,传递给js 3.用json解析器将传递过来的json字符串转化为json对象, 4.用documen ...
- html事件中写js,html标签中绑定触发事件与js中绑定触发事件写法上的区别
html> js中方法名后加括号和不加口号的区别 按钮 var test = function(){ var span = document.createElement("span&q ...
最新文章
- 迟到两年,Lu1与Cee合作的经典单曲《自己做决定》终于发布MV了!
- Scrum 项目7.0
- Python中_,__,__xx__方法区别
- 中国双侧人工耳蜗行业市场供需与战略研究报告
- linux下看io等待时间,Linux下用iostat探测IO使用情况
- 除了停电之外,今年的CES还有这些“意外”……
- 读《松本行弘的程序世界》
- 年会抽奖程序,及时安排一波【开源项目】
- sshsecureshell登录Ubuntu出错,server responded “algorithm negotiation failed”
- 亚马逊云服务AWS Marketplace “重塑”企业软件SaaS之旅
- 免费的mysql云平台_免费的mysql云服务器
- Token登录验证(附图)
- 区分LPCTSTR和LPTSTR和char *
- 目标函数和损失函数的区别
- java解析mpp文件(包含层级关系)
- 知识图谱(KG)存储、可视化、公开数据集、图计算、图编程工具分享
- 什么是模块化?模块化的好处是什么?
- QT UI控件和事件
- BUUCTF Misc杂项前十二道题的思路和感悟
- Swagger2 WARN:Coercing to be of type string. This may not even be a scalar type in actua
热门文章
- 《Algorithms》Comparable 实现冒泡排序
- 量化中需留意的坑之二
- 阿里云_数加平台类HQL的那些坑
- 月薪2w的00后女财务,靠这套报表模板征服了老板
- 一将无能,累死三军!数据团队有“会说话”的好领导,有多重要?
- 利用BI搭建零售业数据信息平台
- 报表软件公司高价悬赏BUG,100块1个我真是醉了
- flex, swf 不能访问网络/本地资源
- java+web提交sumbit,jsp怎么让submit不提交
- python 覆盖list_这套python 面试题你还没有?保证让你面试通关《附Python源码+实战项目》...