[jQuery学习系列二 ]2-JQuery学习二-数组操作

前言

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

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

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

数组成员有：

筛选后的数组成员有(长度>=)：

筛选后的数组成员有：

$(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 >= 5)
{
str += item + ",";
}
});

str </span>= str.substring(<span style="color: #800080;"&gt;0</span>,str.length - <span style="color: #800080;"&gt;2</span><span style="color: #000000;"&gt;);
$(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;#P2</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;).text(str);
$(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;#P3</span><span style="color: #800000;"&gt;"</span>).text(members.join(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;,</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;));

});

运行结果图:

一个元素或属性,但是在迭代函数中并不会改变当前元素的值,也就是无法改变返回后的对象.一个元素并且将结果返回,因使用jQuery.map( array,callback )函数.

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

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

数组成员有：

筛选后的数组成员有(长度>=)：

筛选后的数组成员有：

</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;将members全部转换为大写</span>
members =<span style="color: #000000;"&gt; $.map(members,function (item,i) { 
    </span><span style="color: #0000ff;"&gt;return</span> (i + <span style="color: #800080;"&gt;1</span> + <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;. </span><span style="color: #800000;"&gt;"</span> +<span style="color: #000000;"&gt; item.<a href="https://www.jb51.cc/tag/toupper/" target="_blank" class="keywords">toupper</a>Case());
});
$(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;#P2</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;).text(str);
$(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;#P3</span><span style="color: #800000;"&gt;"</span>).text(members.join(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;,</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;));

});

运行结果图:

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

说明：该函数将遍历数组元素，并执行过滤函数function。它会为function提供两个参数：

数组成员有：

筛选后的数组成员有(长度>=)：

数组成员有：

筛选后的数组成员有(使用正则表达式开头字母A-K)：

</span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;----------------------------------------------------</span><span style="color: #008000;"&gt;*/</span>
<span style="color: #0000ff;"&gt;var</span> arr = [<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;Jolinson</span><span style="color: #800000;"&gt;"</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;545sd</span><span style="color: #800000;"&gt;"</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;23154</span><span style="color: #800000;"&gt;"</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;55855</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;];
$(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;#P3</span><span style="color: #800000;"&gt;"</span>).text(arr.join(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;,</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;));
arr </span>=<span style="color: #000000;"&gt; $.grep(arr,function (item) {
    </span><span style="color: #0000ff;"&gt;return</span> item.match(/^[A-K]/<span style="color: #000000;"&gt;);
});
$(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;#P4</span><span style="color: #800000;"&gt;"</span>).text(arr.join(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;,</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;));

});

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

当前页面内追加换行标签和指定的HTML内容 += +var x = { name:"CodeMan" };
var y = { age: 18 };
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 ); // 18
w( obj.site ); // http://www.cnblogs.com/wang-meng/

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

段落1

段落2

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
document.body.innerHTML += "
" + 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(1,2);

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

当前页面内追加换行标签和指定的HTML内容 += +var arr = [ 10,25,3,0,-3 ];

w( $.inArray( 25,arr ) ); // 1
w( $.inArray( -3,arr ) ); // 4
w( $.inArray( 10,arr ) ); // 0

// 数组中没有99
w( $.inArray( 99,arr ) ); // -1
// 数组中有数字10，但是没有字符串"10"
w( $.inArray( "10",arr ) ); // -1

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

一个数组上: $.merge( [,,],[,结果:
[0,2,4]

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

$.unique( [,]

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

test(){ 输出调用当前函数时传入的参数 ( n = ; n < arguments.length; n+++ ); 输出换行符进行区分 test(); test(,,,); test(,,); function foo(){
// arguments前也可以加上函数名称
for(var n = 0; n < foo.arguments.length; n++){
document.write( foo.arguments[n] + "|");
}
document.write('
');
};
foo("Hello","World"); // Hello|World|

// 使用arguments对象实现任意多个数的求和
function sum(){
var sum = arguments[0];
for(var n = 1; n < arguments.length; n++){
sum += arguments[n];
}
return sum;
}

document.writeln( sum() ); // undefined
document.writeln( sum( 1,5 ) ); // 6
document.writeln( sum( 1,212,21,-14,23 ) ); // 243

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

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

[jQuery学习系列二 ]2-JQuery学习二-数组操作

数组成员有：

筛选后的数组成员有(长度>=)：

筛选后的数组成员有：

数组成员有：

筛选后的数组成员有(长度>=)：

筛选后的数组成员有：

数组成员有：

筛选后的数组成员有(长度>=)：

数组成员有：

筛选后的数组成员有(使用正则表达式 开头字母A-K)：

相关推荐

筛选后的数组成员有(使用正则表达式开头字母A-K)：