jQuery数组处理方法总结

来源：互联网发布：博图hmi编程控制实例编辑：程序博客网时间：2024/06/06 01:58

在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;
});

$.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);

$.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;

原文地址： http://www.php100.com/html/program/jquery/2013/0905/5932.html

0 0