前言

上一篇内容 已经对于Jquery 有了一些认识, 包括Jquery的选择器和DOM对象, 那么这一篇继续来看下Jquery中很实用的Jquery对于数组的操作.

Jquery中对数组的操作大致有以下几种形式:
each(迭代), map(转换), grep(筛选), 合并等.

1,迭代(each)
jQuery.each( object, callback ) 返回值:Object
说明:
通用例遍方法,可用于例遍对象和数组。
注意: 传入的第一个参数可以是数组或者对象.如果数组,则遍历数组中的每一个对象. 第一个参数表示索引,第二个参数表示值. this表示当前遍历的元素, 可以通过返回false终止迭代

实例演示:

<body>
<h3>数组成员有:</h3>
<p id="P1"></p>
<h3>筛选后的数组成员有(长度>=):</h3>
<p id="P2"></p>
<h3>筛选后的数组成员有:</h3>
<p id="P3"></p>
</body> $(document).ready(function() {
var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];
var str = "";
$("#P1").html(members.join(", "));
$.each(members, function(i, item) { //这里第一个元素i是数组下标,第二个item是数组元素
if(item.length >= )
{
str += item + ", ";
}
}); str = str.substring(,str.length - );
$("#P2").text(str);
$("#P3").text(members.join(", "));
});

运行结果图:

特别注意:
each虽然迭代每一个元素或属性, 但是在迭代函数中并不会改变当前元素的值, 也就是无法改变返回后的对象.
如果需要改变数组中的每一个元素并且将结果返回, 因使用jQuery.map( array, callback )函数.

2,转换(map)
jQuery.map( array, callback )
返回值:Array

说明:
将一个数组中的元素转换到另一个数组中。
转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。
第一个参数表示值,第二个参数表示索引.

<body>
<h3>数组成员有:</h3>
<p id="P1"></p>
<h3>筛选后的数组成员有(长度>=):</h3>
<p id="P2"></p>
<h3>筛选后的数组成员有:</h3>
<p id="P3"></p>
</body> $(document).ready(function() {
var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];
var str = "";
$("#P1").html(members.join(", "));
str = $.map(members, function(item, i) { //这里第一个元素item是数组元素,第二个元素i是数组下标
if(item.length >= )
{
return item;
}
}); //将members全部转换为大写
members = $.map(members, function (item, i) {
return (i + + ". " + item.toUpperCase());
});
$("#P2").text(str);
$("#P3").text(members.join(", "));
});

运行结果图:

3,筛选(grep)
jQuery.grep( array, callback, [invert] ) 返回值: Array
array: Array类型将被过滤的数组。
callback: Function类型指定的过滤函数。
invert: 可选/Boolean类型默认值为false。指定是否反转过滤结果。

说明:
该函数将遍历数组元素,并执行过滤函数function。它会为function提供两个参数:其一为当前迭代的数组元素,其二是当前迭代元素在数组中的索引。
如果未指定invert参数,或该参数为false,则结果数组将包含function返回true的所有元素。如果参数invert为true,则结果数组将包含function返回false的所有元素。
源数组不会受到影响,过滤结果只反映在返回的结果数组中。

<body>
<h3>数组成员有:</h3>
<p id="P1"></p>
<h3>筛选后的数组成员有(长度>=):</h3>
<p id="P2"></p>
<h3>数组成员有:</h3>
<p id="P3"></p>
<h3>筛选后的数组成员有(使用正则表达式 开头字母A-K):</h3>
<p id="P4"></p>
</body> $(document).ready(function () {
var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];
$("#P1").html(members.join(", "));
members = $.grep(members, function (item, i) {
return item.length >= ;
});
$("#P2").text(members.join(", ")); /*----------------------------------------------------*/
var arr = ["Jolinson", "Steve", "Dive", "545sd", "", ""];
$("#P3").text(arr.join(", "));
arr = $.grep(arr, function (item) {
return item.match(/^[A-K]/);
});
$("#P4").text(arr.join(", "));
});

4,合并
(1)jQuery.extend( [deep], target, object1, [objectN] )
[deep]:可选/Boolean类型指示是否深度合并对象,默认为false。如果该值为true,且多个对象的某个同名属性也都是对象,则该"属性对象"的属性也将进行合并。
target: Object类型目标对象,其他对象的成员属性将被复制到该对象上。
object1:可选/Object类型第一个被合并的对象。
[objectN]: 可选/Object类型第N个被合并的对象。

该函数可以将一个或多个对象的成员属性和方法复制到指定的对象上。
示例如下:

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
document.body.innerHTML += "<br/>" + html;
} var x = { name:"CodeMan" };
var y = { age: };
var z = { site: "http://www.cnblogs.com/wang-meng/" }; var obj = $.extend( x, y, z );
w( obj === x ); // true
w( obj.name ); // CodeMan
w( obj.age ); //
w( obj.site ); // http://www.cnblogs.com/wang-meng/

(2)jQuery.makeArray( obj )
函数用于将一个类数组对象转换为真正的数组对象。
类数组对象是非常常见的: 例如我们经常使用的jQuery对象、函数内的arguments对象,都是类数组对象。
jQuery.makeArray()函数: 我们可以将类数组对象转换为一个真正的数组对象,从而使用数组对象的内置方法。
示例如下:

<p>段落1</p>
<p>段落2</p> //在当前页面内追加换行标签和指定的HTML内容
function w( html ){
document.body.innerHTML += "<br/>" + html;
} // jQuery对象也是一个类数组对象
var $p = $("p");
var arr1 = $.makeArray( $p );
w( $p instanceof Array ); // false
w( arr1 instanceof Array ); // true // NodeList对象也是一个类数组对象
var p = document.getElementsByTagName("p");
var arr2 = $.makeArray( p );
w( p instanceof Array ); // false
w( arr2 instanceof Array ); // true function foo(a, b){
//arguments对象也是一个类数组对象
//arguments是收到的实参副本,
var arr3 = $.makeArray( arguments );
w( arguments instanceof Array ); // false
w( arr3 instanceof Array ); // true
} foo(, );

(3)jQuery.inArray( value, array )
value: 任意类型用于查找的值。
array: Array类型指定被查找的数组。
函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回 -1。

示例如下:

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
document.body.innerHTML += "<br/>" + html;
} var arr = [ , , , , - ]; w( $.inArray( , arr ) ); //
w( $.inArray( -, arr ) ); //
w( $.inArray( , arr ) ); // 0 // 数组中没有99
w( $.inArray( , arr ) ); // -1
// 数组中有数字10,但是没有字符串"10"
w( $.inArray( "", arr ) ); // -1

(4)jQuery.merge( first, second )
合并两个数组
返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。
要去除重复项,需要使用$.unique()

合并两个数组到第一个数组上:
$.merge( [,,], [,,] ) 结果:
[,,,,,]

(5)jQuery.unique( array )
删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组。

$.unique( [,,], [,,] )

结果:
[,,,,]

(6)arguments(增加内容)
Javascript并没有重载函数的功能,但是Arguments对象能够模拟重载。Javascrip中每个函数都会有一个Arguments对象实例arguments,它引用着函数的实参,可以用数组下标的方式"[]"引用arguments的元素。
arguments.length为函数实参个数,arguments.callee引用函数自身。

示例如下:

function test(){
// 循环输出调用当前函数时传入的参数
for(var n = ; n < arguments.length; n++){
document.write( arguments[n] + "|");
}
document.write('<br>'); // 输出换行符进行区分
};
test(); // (空字符串)
test("Code", "http://www.cnblogs.com/wang-meng/", , true); // Code|http://www.cnblogs.com/wang-meng/|12|true|
test("张三", false, 12.315); // 张三|false|12.315| function foo(){
// arguments前也可以加上函数名称
for(var n = ; n < foo.arguments.length; n++){
document.write( foo.arguments[n] + "|");
}
document.write('<br>');
};
foo("Hello", "World"); // Hello|World| // 使用arguments对象实现任意多个数的求和
function sum(){
var sum = arguments[];
for(var n = ; n < arguments.length; n++){
sum += arguments[n];
}
return sum;
} document.writeln( sum() ); // undefined
document.writeln( sum( , ) ); //
document.writeln( sum( , , , -, ) ); //

5,其他
其他更多关于数组的操作请查看: W3School JS Array
http://www.w3school.com.cn/jsref/jsref_obj_array.asp

以上内容皆是自己学习中整理出来的内容, 如有纰漏请大家看到可以提醒一下. 整理记录在这里算是对自己学习的一个总结, 给日后的忘记的自己一个参考.

英语小贴士:
Good for you。
好啊!做得好!
Great minds think alike!
英雄所见略同!
Have a nice day.
祝你今天愉快。
Have butterflies in one's stomach.
紧张。
He's been everywhere.
他到处都去过了。
He hit the ceiling at the news.
他听到那消息暴跳如雷/大发雷霆。
His argument doesn't hold water.
他的论点站不住脚。
How do I address you?
我怎么称呼你?

[jQuery学习系列二 ]2-JQuery学习二-数组操作的更多相关文章

  1. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...

  2. Linux学习系列之Linux入门(二)Vim学习

    第二篇 Vim学习 主要内容: 基本命令: 插件扩展: 参考资料: vim是一个命令控制的文本编辑器,可以完成几乎我们想要做的所有工作,除了Emacs几乎没有其他的工具能和它匹敌.官方网站是:http ...

  3. [原]SQLite的学习系列之获取数据库版本二

    本系列文章主要是使用C++语言来调用其API,达到管中窥豹的目的.另外本文使用的开发环境为mac + clion,并且基于SQLite 3.7.14来进行开发. 一.去下载sqlite-amalgam ...

  4. CSS3学习系列之盒样式(二)

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  5. CSS3学习系列之背景相关样式(二)

    在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...

  6. CSS3学习系列之布局样式(二)

    使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...

  7. php优秀框架codeigniter学习系列——CI_Output类的学习

    这篇文章主要介绍CI核心框架工具类CI_Output. 根据CI文档自己的定义,这个类主要就是生成返回的页面给浏览器.以下选取类中的重点方法进行说明. __construct() 在构造函数中,主要确 ...

  8. scala学习(4)---Array定长数组操作

    ScalaArrayNote: https://www.jianshu.com/p/d906f00c05bf

  9. MyBatis学习系列二——增删改查

    目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...

  10. Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)

     [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   ...

随机推荐

  1. Selenium2+python自动化13-多窗口、句柄(handle)

    前言 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作,就得先切换窗口了.获取窗口的唯一标识用句柄表示,所以只需要切换句柄,我们就能在多个页面上灵活自如的操作了. 本篇以打开百 ...

  2. jquery学习--属性操作

    学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...

  3. JS中的this对象详解

    JS中this关键字很常见,但是它似乎变幻莫测,让人抓狂.这篇文章就来揭示其中的奥秘. 借助阮一峰老师的话:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.这句话看似平常,可是要非常注意 ...

  4. Oracle 包(Package)

    引用这位大大的: http://www.cnblogs.com/lovemoon714/archive/2012/02/29/2373695.html 1.为什么要使用包?       答:在一个大型 ...

  5. 第三章 深入 ZAB 协议

    上一节介绍了ZAB协议的内容,本节将从系统模型.问题描述.算法描述和运行分析四方面来深入了解 ZAB 协议. 系统模型 在一个由一组进程 n ={P1,P2,...Pn}组成的分布式系统中,每一个进程 ...

  6. Sql Server 查询第30条数据到第40条记录数

    1.select top  10 *  from  (select top  40 * from tablename order by id desc);

  7. NGINX下配置404错误页面的方法分享

    NGINX下配置自定义的404页面是可行的,而且很简单,只需如下几步,需要的朋友可以参考下   1. 创建自己的404.html页面 2.更改nginx.conf在http定义区域加入: fastcg ...

  8. Java实现批量下载《神秘的程序员》漫画

    上周看了西乔的博客“西乔的九卦”.<神秘的程序员们>系列漫画感觉很喜欢,很搞笑.这些漫画经常出现在CSDN“程序员”杂志末页的,以前也看过一些. 后来就想下载下来,但是一张一张的点击右键“ ...

  9. C3P0连接池连接MySQL出现的问题

    1.Clearing pending acquires. While trying to acquire a needed new resource, we failed to succeed mor ...

  10. 使用语句查询mssql死锁

    select spid, blocked, loginame, last_batch, status, cmd, hostname, program_name from sys.sysprocesse ...