首页 web前端 js教程 jquery基之数组的使用

jquery基之数组的使用

Jun 29, 2017 am 10:54 AM
jquery 使用 数组

jQuery的数组处理、便捷、功能齐全。一步到位的封装了很多原生JavaScript数组不能企及的功能。下面是jquery数组的使用详解,需要的朋友可以参考下

1. $.each(array, [callback]) 遍历[常用]

解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出each循环可使回调函数返回false, 其它返回值将被忽略。

each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大。在数组中,它可以轻松的攻取数组索引及对应的值。例:

代码如下:

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同  
$.each(_mozi,function(key,val){  
    //回调函数有两个参数,第一个是元素索引,第二个为当前值  
    alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val);  
});
登录后复制

相对于原生的for..in,each更强壮一点。for..in也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取。

2. $.grep(array, callback, [invert])过滤数组[常用]

解释: 使用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大): 待过滤数组和过滤函数. 过滤函数必须返回true以保留元素或 false 以删除元素. 另外,过滤函数还可以是可设置为一个字条串。

代码如下:

$.grep(_mozi,function(val,key){  
    //过滤函数有两个参数,第一个为当前元素,第二个为元素索引  
    if(val=='墨子'){  
        alert('数组值为 墨子 的下标是: '+key);  
    }  
});  
var _moziGt1=$.grep(_mozi,function(val,key){  
    return key>1;  
});  
alert('_mozi数组中索引值大于1的元素为: '+_moziGt1);  
var _moziLt1=$.grep(_mozi,function(val,key){  
    return key>1;  
},true);  
//此处传入了第三个可靠参数,对过滤函数中的返回值取反  
alert('_mozi数组中索引值小于等于1的元素为: '+_moziLt1);
登录后复制

3. $.map(array,[callback])按给定条件转换数组 [一般]

解释:作为参数的转换函数会为每个数组元素调用, 而且会给这个转换函数传递一个表示被转换的元素作为参数. 转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组, 并扩展至原始数组中。

这个是个很强大的方法,但并不常用. 它可以根据特定条件,更新数组元素值,或根据原值扩展一个新的副本元素。

代码如下:

var _mapArrA=$.map(_mozi,function(val){  
    return val+'[新加]';  
});  
var _mapArrB=$.map(_mozi,function(val){  
    return val=='墨子' ? '[只给墨子加]'+val : val;  
});  
var _mapArrC=$.map(_mozi,function(val){  
    //为数组元素扩展一个新元素  
    return [val,(val+'[扩展]')];  
});  
alert('在每个元素后面加\'[新加]\'字符后的数组为: '+ _mapArrA);  
alert('只给元素 墨子 添加字符后的数组为: '+ _mapArrB);  
alert('为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为 '+_mapArrC);
登录后复制

4 .$.inArray(val,array)判断值是否存在于数组中[常用]

解释: 确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回-1)。

记得indexOf()方法了吗? indexOf()返回字符串的首次出现位置,而$.inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0 的值,若未找到则返回-1.现在, 知道怎么用了吧. 有了它, 判断某个值是否存在于数组中,就变得轻而易举了。

代码如下:

var _exist=$.inArray('墨子',_mozi);  
var _inexistence=$.inArray('卫鞅',_mozi)  
if(_exist>=0){  
    alert('墨子 存在于数组_mozi中,其在数组中索引值是: '+_exist);  
}  
if(_inexistence<0){  
    alert(&#39;卫鞅 不存在于数组_mozi中!,返回值为: &#39;+_inexistence+&#39;!&#39;);  
}
登录后复制

5 .$.merge(first,second)合并两个数组[一般]

解释: 返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。这个方法是用jQuery的方法替代原生concat()方法, 但功能并没有concat()强大, concat()可以同时合并多个数组。

代码如下:

//原生concat()可能比它还简洁点  
_moziNew=$.merge(_mozi,[&#39;鬼谷子&#39;,&#39;商鞅&#39;,&#39;孙膑&#39;,&#39;庞涓&#39;,&#39;苏秦&#39;,&#39;张仪&#39;])  
alert(&#39;合并后新数组长度为: &#39;+_moziNew.length+&#39;. 其值为: &#39;+_moziNew);
登录后复制

6 .$.unique(array)过滤数组中重复元素[不常用]

解释: 删除数组中重复元素. 只处理删除DOM元素数组,而不能处理字符串或者数字数组。

第一次看到这个方法,觉得这是个很便捷的方法, 可以过滤重复,多完美。但仔细一看, 仅限处理DOM元素,功能8折了。所以, 我给它定义成了一个不常用的元素, 至少, 我用jQuery以来没用到过它。

代码如下:

var _h2Arr=$.makeArray(h2obj);  
//将数组_h2Arr重复一次  
_h2Arr=$.merge(_h2Arr,_h2Arr);  
var _curLen=_h2Arr.length;  
_h2Arr=$.unique(_h2Arr);  
var _newLen=_h2Arr.length;  
alert(&#39;数组_h2Arr原长度值为: &#39;+_curLen+&#39; ,过滤后为: &#39;+_newLen  
      +&#39; .共过滤 &#39;+(_curLen-_newLen)+&#39;个重复元素&#39;)
登录后复制

7. $.makeArray(obj) 将类数组对象转换为数组[不常用]

解释: 将类数组对象转换为数组对象, 类数组对象有 length 属性,其成员索引为0至 length-1。
这是个多余的方法, 无所不能的$本来就包含了这个功能。jQuery官网上解释的非常模糊,其实, 它就是将某个类数组对象(比如用getElementsByTagName获取的元素对象集合)转换成数组对象。
代码如下:

var _makeArr=$.makeArray(h2obj);  
alert(&#39;h2元素对象集合的数据
类型转换
为: &#39;+_makeArr.constructor.name);//输出Array
登录后复制

8. $(dom).toArray()将所有DOM元素恢复成数组[不常用]

解释: 把jQuery集合中所有DOM元素恢复成一个数组。并不常用的方法, 个人甚至觉得它和$.makeArray一样多余.
代码如下:

var _toArr=$(&#39;h2&#39;).toArray();  
alert(&#39;h2元素集合恢复后的
数据类型
是: &#39;+_toArr.constructor.name);
登录后复制

以上是jquery基之数组的使用的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

BTCC教学:如何在BTCC交易所绑定使用MetaMask钱包? BTCC教学:如何在BTCC交易所绑定使用MetaMask钱包? Apr 26, 2024 am 09:40 AM

MetaMask(中文也叫小狐狸钱包)是一款免费的、广受好评的加密钱包软件。目前,BTCC已支持绑定MetaMask钱包,绑定后可使用MetaMask钱包进行快速登入,储值、买币等,且首次绑定还可获得20USDT体验金。在BTCCMetaMask钱包教学中,我们将详细介绍如何注册和使用MetaMask,以及如何在BTCC绑定并使用小狐狸钱包。MetaMask钱包是什么?MetaMask小狐狸钱包拥有超过3,000万用户,是当今最受欢迎的加密货币钱包之一。它可免费​​使用,可作为扩充功能安装在网络

如何使用 foreach 循环去除 PHP 数组中的重复元素? 如何使用 foreach 循环去除 PHP 数组中的重复元素? Apr 27, 2024 am 11:33 AM

使用foreach循环去除PHP数组中重复元素的方法如下:遍历数组,若元素已存在且当前位置不是第一个出现的位置,则删除它。举例而言,若数据库查询结果存在重复记录,可使用此方法去除,得到不含重复记录的结果。

PHP 数组键值翻转:不同方法的性能对比分析 PHP 数组键值翻转:不同方法的性能对比分析 May 03, 2024 pm 09:03 PM

PHP数组键值翻转方法性能对比表明:array_flip()函数在大型数组(超过100万个元素)下比for循环性能更优,耗时更短。手动翻转键值的for循环方法耗时相对较长。

PHP数组深度复制的艺术:使用不同方法实现完美复制 PHP数组深度复制的艺术:使用不同方法实现完美复制 May 01, 2024 pm 12:30 PM

PHP中深度复制数组的方法包括:使用json_decode和json_encode进行JSON编码和解码。使用array_map和clone进行深度复制键和值的副本。使用serialize和unserialize进行序列化和反序列化。

PHP数组多维排序实战:从简单到复杂场景 PHP数组多维排序实战:从简单到复杂场景 Apr 29, 2024 pm 09:12 PM

多维数组排序可分为单列排序和嵌套排序。单列排序可使用array_multisort()函数按列排序;嵌套排序需要递归函数遍历数组并排序。实战案例包括按产品名称排序和按销售量和价格复合排序。

深度复制PHP数组的最佳实践:探索高效的方法 深度复制PHP数组的最佳实践:探索高效的方法 Apr 30, 2024 pm 03:42 PM

在PHP中执行数组深度复制的最佳实践是:使用json_decode(json_encode($arr))将数组转换为JSON字符串,然后再将其转换回数组。使用unserialize(serialize($arr))将数组序列化为字符串,然后将其反序列化为新数组。使用RecursiveIteratorIterator迭代器对多维数组进行递归遍历。

PHP 数组分组函数在数据整理中的应用 PHP 数组分组函数在数据整理中的应用 May 04, 2024 pm 01:03 PM

PHP的array_group_by函数可根据键或闭包函数对数组中的元素分组,返回一个关联数组,其中键是组名,值是属于该组的元素数组。

PHP 数组合并去重算法:并行的解决方案 PHP 数组合并去重算法:并行的解决方案 Apr 18, 2024 pm 02:30 PM

PHP数组合并去重算法提供了并行的解决方案,将原始数组分成小块并行处理,主进程合并块的结果去重。算法步骤:分割原始数组为均等分配的小块。并行处理每个块去重。合并块结果并再次去重。

See all articles