在jquery中提供了大量的数组处理函数,最常用的就是遍历数组,判断数组是否存在,数组删除,将类数组对象转成数组等函数,欢迎有需要的朋友进入参考。

each是用来遍历数组

each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用。

实例

$.each(array, [callback])遍历,很常用
 var arr = ['javascript', 'php', 'java', 'c++', 'c#', 'perl', 'vb', 'html', 'css', 'objective-c'];
 $.each(arr, function(key, val) {
     // firebug console
     console.log('index in arr:' + key + ", corresponding value:" + val);
     // 如果想退出循环
     // return false;
 });复制代码
 代码如下
 代码如下
复制代码
 代码如下
 $.each(array, [callback])遍历,很常用
 var arr = ['javascript', 'php', 'java', 'c++', 'c#', 'perl', 'vb', 'html', 'css', 'objective-c'];
 $.each(arr, function(key, val) {
     // firebug console
     console.log('index in arr:' + key + ", corresponding value:" + val);
     // 如果想退出循环
     // return false;
 });复制代码
 代码如下

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

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

 代码如下

复制代码

var temp = [];
 temp = $.grep(arr, function(val, key) {
     if(val.indexOf('c') != -1) 
         return true;
     // 如果[invert]参数不给或为false, $.grep只收集回调函数返回true的数组元素
     // 反之[invert]参数为true, $.grep收集回调函数返回false的数组元素
 }, false);
 console.dir(temp);


$.map(array, [callback])

Jquery中的Map函数帮助我们对一个数组或者数据集进行映射。map与filter和grep的区别在于filter和grep会通过过滤改变元素集或数组的个数,而map不会改变元素集或数组的个数,只会改变其中的内容。

数据集使用map:从li元素集中进行映射并修改其具体文本,然后添加到Id为div2的元素中

数组使用map:从数组Items中进行映射并修改其具体文本,然后添加到Id为div2的元素中

 代码如下

复制代码

//1.6之前的版本只支持数组
 temp = $.map(arr, function(val, key) {
     //返回null,返回的数组长度减1
     if(val === 'vb') return null;
     return val;
 });
 console.dir(temp);
 //1.6开始支持json格式的object
 var obj = {key1: 'val1', key2: 'val2', key3: 'val3'};
 temp = $.map(obj, function(val, key) {
     return val;
 });
 console.dir(temp);


$.inArray(val, array)判断是否在指定数组中,常用

inArray()方法是类似JavaScript的原生indexOf()方法,用于在数组中匹配一个数。返回-1代表,没有找到一个匹配。
如果在数组第一个元素的匹配值,$。inArray()返回0,数组值的下标。

如果我们检查值在数组内存在,我们需要检查,如果它不等于(或大于)-1。

示例:

var m_31 = [1,3,5,7,8,10,12];
 var m_30 = [4,6,9,11];
 console.log(jQuery.inArray(3, m_31));
 //返回值为1 $.unique(array)过滤数组中的重复元素,不常用

 blahblahblah....
 // $.unique只支持DOM元素数组,去除重复DOM元素,不支持其他类型数组(String或者Number)
 // 获得原始的DOM数组,而不是jQuery封装的
 var divs = $('div').get(); 
 // 增加几个class为dup的div
 divs = divs.concat($('div.dup').get()); 
 console.log("before unique:" + divs.length);
 divs = $.unique(divs);
 console.log("after unique:" + divs.length);复制代码
 代码如下
 代码如下
复制代码
 代码如下
 var m_31 = [1,3,5,7,8,10,12];
 var m_30 = [4,6,9,11];
 console.log(jQuery.inArray(3, m_31));
 //返回值为1 $.unique(array)过滤数组中的重复元素,不常用

 blahblahblah....
 // $.unique只支持DOM元素数组,去除重复DOM元素,不支持其他类型数组(String或者Number)
 // 获得原始的DOM数组,而不是jQuery封装的
 var divs = $('div').get(); 
 // 增加几个class为dup的div
 divs = divs.concat($('div.dup').get()); 
 console.log("before unique:" + divs.length);
 divs = $.unique(divs);
 console.log("after unique:" + divs.length);复制代码
 代码如下


$.makeArray(obj)将类数组对象转成数组,不常用

一般来说,无论是在jQuery和JavaScript中很多方法都返回类似数组的对象。举例来说,jQuery的代理函数$()返回一个jQuery对象具有许多的数组的属性。(length, []数组访问运算符等),但和数组并不完全一样,缺少一些对数组的内置方法(如.pop()和.reverse())。

 代码如下

复制代码

<!DOCTYPE html>
 <html>
 <head>
   <style>
   div { color:red; }
   </style>
   <script src="jquery-latest.js"></script>
 </head>
 <body>
   <div>First</div>
   <div>Second</div>
   <div>Third</div>
   <div>Fourth</div>
 <script>
     var elems = document.getElementsByTagName("div"); // returns a nodeList
     var arr = jQuery.makeArray(elems);
     arr.reverse(); // use an Array method on list of dom elements
     $(arr).appendTo(document.body);
 </script>
 </body>
 </html>
 1
 var obj = $('li'); var arr = $.makeArray(obj);

 Result: (typeof obj === 'object' && obj.jquery) === true;
 jQuery.isArray(arr) === true;