January 15, 2018
HomeJavascript /Jquery / React / Bootstrap / WebJQuery: 操作数组 each、map、grep、filter, 循环数组, 编辑数组

JQuery: 操作数组 each、map、grep、filter, 循环数组, 编辑数组

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments

Jquery中对数组的操作大致有一下几种形式：

1、$.each( collection, callback(indexInArray, valueOfElement) )

$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合，不管是一个JavaScript对象或者是一个数组，如果是一个数组的话，回调函数每次传递一个数组的下标和这个下标所对应的数组的值（这个值也可以在函数体中通过this关键字获取，但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字），这个函数返回所遍历的对象，也就是这个函数的第一个参数，注意这里还是原来的那个数组，这是和map的区别。
其中collection代表目标数组，callback代表回调函数（自己定义），回调函数的参数第一个是数组的下标，第二个是数组的元素。当然我们也可以给回调函数只设定一个参数，这个参数一定是下标，而没有参数也是可以的。
下面举个例子：

var mem = ['a','b','c'];
var returnvalue = $.each(mem, function(index) {
    alert(index);
});

或者

var mem = ['a','b','c'];
var returnvalue = $.each(mem, function(index,value) {
    alert(index + " " + value);
});

或

var mem = ['a','b','c'];
var returnvalue = $.each(mem, function() {
});

 

2、$.map( array, callback(elementOfArray, indexInArray) )

$.map()这个函数和each非常的相似，最重要的区别就是map是用来生成一个新的数组，也就是说我们可以在回调函数中修改遍历到的每一个元素（通过return返回新的值，不return就没有值了），最后返回一个新的数组。
参数方面和each基本没有什么区别，不多做解释。
下面举个例子：

$(function () { 
	var arr = [ "a", "b", "c", "d", "e" ];
	$("div").text(arr.join(", "));
	arr = $.map(arr, function(n, i){
		return (n.toUpperCase() + i);
	});
	$("p").text(arr.join(", "));
	arr = $.map(arr, function (a) {
		return a + a;
	});
	$("span").text(arr.join(", "));
})

程序执行后的结果为:

a, b, c, d, e

A0, B1, C2, D3, E4

A0A0, B1B1, C2C2, D3D3, E4E4

$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。

注意：1. 在jQuery 1.6 之前，该函数只支持遍历数组；从 1.6 开始，该函数也支持遍历对象。
2. map()还会为函数传入两个参数：其一是当前迭代的元素或属性值，其二是当前迭代项的数组索引或对象属性名。
3. 该函数返回值将作为结果数组中的一个元素，如果返回值为null或undefined，则不会被添加到结果数组中。

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。

.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：

<!DOCTYPE html>
<html>
<head>
  <style>p { color:red; }</style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

<p><b>Values: </b></p>

<script>
  $("p").append($(':checkbox').map(function() {
    return this.id;
  }).get().join(','));
</script>

</body>
</html>

程序执行后的结果为:

Values: two,four,six,eight

 

3、$.grep( array, function(elementOfArray, indexInArray) [, invert] )

$.grep()函数除去了不需要的元素，起到了一个筛选的作用，通过将它的元素通过一个测试函数，也就是grep()的第二个参数，需要注意的是这里参数和前面两个函数的回调函数的参数顺序相反。通过这两个参数来控制自己需要哪些元素，通过return语句返回出来（return true说明这个元素是需要的）。另外，在grep()中可以通过正则表达式(return elementOfArray.match(正则表达式))来控制筛选，这样能使筛选更加的灵活、强大。grep()函数和map()函数一样也是生成一个新的数组。grep()中的第三个参数是一个布尔数通常是省略的，默认是false，如果设置为true，那么回调函数的返回值的效果刚好相反，返回true的会被去掉。

下面举个例子：

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
arr = jQuery.grep(arr, function(n, i){
    return (n != 5 && i > 4);
});

$.grep() 函数使用指定的函数过滤数组中的元素，并返回过滤后的数组。

提示：源数组不会受到影响，过滤结果只反映在返回的结果数组中。

完整实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>justcode.ikeepstudying.com</title>
<style>
	div {
		color: blue;
	}
	p {
		color: green;
		margin: 0;
	}
	span {
		color: red;
	}
</style>	
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
	
<div></div>
<p></p>
<span></span>
<script>
$(function () { 
	var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
	$( "div" ).text( arr.join( ", " ) );
	arr = jQuery.grep(arr, function( n, i ) {
		return ( n !== 5 && i > 4 );
	});
	$( "p" ).text( arr.join( ", " ) ); 
	arr = jQuery.grep(arr, function( a ) {
		return a !== 9;
	});
	$( "span" ).text( arr.join( ", " ) );
})
</script>
 
</body>
</html>

程序执行后的结果为:

1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1

1, 9, 4, 7, 3, 8, 6, 9, 1

1, 4, 7, 3, 8, 6, 1

4、filter (fn) 参数是函数；

filter() 方法返回符合一定条件的元素。

该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。

该方法通常用于缩小在被选元素组合中搜索元素的范围。

提示：filter() 方法是与 not() 方法相对的。

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>justcode.ikeepstudying.com</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("p").filter(".intro").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<p>我的名字叫 Gideon。</p>
<p class="intro">我住在 SF。</p>
<p class="intro">我爱 CN。</p>
<p>我最好的朋友是 JESUS。</p>

</body>
</html>

程序执行后的结果为:

 

本文：JQuery: 操作数组 each、map、grep、filter, 循环数组, 编辑数组

Loading

Related Posts

Tags:, , , , ,

Related Posts

About Author

Gideon

Add a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.