微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!
数组操作专题提供数组操作的最新资讯内容,帮你更好的了解数组操作。
javascript 常见数组操作 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方
主要内容:1、数组整体元素修改2、 数组筛选3、jquery 元素转数组4、获取两个数组中相同部分或者不同部分5、数组去重并倒序排序6、数组排序7、数组截取slice8、数组插入、删除splice(需明确位置)9、数组遍历10、jQuery根据元素值删除数组元素的方法 数组常见操作包含了 增、删、查、改、插入、交集、并集1、数组整体元素修改//map,给数组每个元素加1 输出[1,2,3]$.map([0,1,2],function(n){return n+1;})//输出[1,2,3] 2、数组筛选$.map([0,1,2],function(n){return n>0?n+1:null})//[2,3]  3、jquery 元素转数组$("li").toArray()$.makeArray($("li")) 4、获取两个数组中相同部分或者不同部分//去掉true则显示相同部分,保留true则显示不同部分var a=[1,2,3,5,6,3,7,12],b=[1,3,5,12]$.grep(a,function(n,i){if(b.indexOf(n)>=0)return n},true);//[2,6,7]  5、数组去重并倒序排序var a=[1,2,3,5,6,3,7,12];$.unique(a)// [12,7,6,5,3,2,1]  6、数组排序var arr=[1,34,5,8,4,9,12]arr.sort(function(a,b){return a-b;});//顺序:a-b [1, 4, 5, 8, 9, 12, 34]//倒序:b-a [34, 12, 9, 8, 5, 4, 1] 7、数组截取slicevar arr=[1,34,5,8,4,9,12];arr.slice(2,4)// [5,8]  8、数组插入、删除splice(需明确位置)var arr=[1,34,5,8,4,9,12];//删除arr.splice(2,4)//arr 输出[1, 34, 12]//替换arr.splice(1,2,3,4)//arr 输出[1, 3, 4, 8, 4, 9, 12]//插入arr.splice(2,0,44)//arr 输出[1, 34, 44, 5, 8, 4, 9, 12] 9、数组遍历var members=["1","2","3"];$.each(members,function(i,item){console.log(item);});如何跳出当前的each循环return false;——跳出所有循环;相当于 javascript 中的 break 效果。return true;——跳出当前循环,进入下一个循环;相当于 javascript 中的 continue 效果。  10、jQuery根据元素值删除数组元素的方法var arr = ['a','b','c','d'];arr.splice($.inArray('c',arr),1);console.log(arr);// ['a','b','d'] 
[jQuery学习系列二 ]2-JQuery学习二-数组操作
前言上一篇内容 已经对于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>筛选后的数组成员有(长度>=5):</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 >= 5){str += item + ", ";}});str = str.substring(0,str.length - 2);$("#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>筛选后的数组成员有(长度>=5):</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 >= 5){return item;}});//将members全部转换为大写members = $.map(members, function (item, i) {return (i + 1 + ". " + item.toUpperCase());});$("#P2").text(str);$("#P3").text(members.join(", "));});运行结果图:3,筛选(grep)jQuery.grep( array, callback, [invert] ) 返回值: Arrayarray: Array类型将被过滤的数组。callback: Function类型指定的过滤函数。invert: 可选/Boolean类型默认值为false。指定是否反转过滤结果。说明:该函数将遍历数组元素,并执行过滤函数function。它会为function提供两个参数:其一为当前迭代的数组元素,其二是当前迭代元素在数组中的索引。如果未指定invert参数,或该参数为false,则结果数组将包含function返回true的所有元素。如果参数invert为true,则结果数组将包含function返回false的所有元素。源数组不会受到影响,过滤结果只反映在返回的结果数组中。<body><h3>数组成员有:</h3><p id="P1"></p><h3>筛选后的数组成员有(长度>=5):</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 >= 5;});$("#P2").text(members.join(", "));/*----------------------------------------------------*/var arr = ["Jolinson", "Steve", "Dive", "545sd", "23154", "55855"];$("#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: 18 };var z = { site: "http://www.cnblogs.com/wang-meng/" };var obj = $.extend( x, y, z );w( obj === x ); // truew( obj.name ); // CodeManw( obj.age ); // 18w( 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 ); // falsew( arr1 instanceof Array ); // true// NodeList对象也是一个类数组对象var p = document.getElementsByTagName("p");var arr2 = $.makeArray( p );w( p instanceof Array ); // falsew( arr2 instanceof Array ); // truefunction foo(a, b){//arguments对象也是一个类数组对象//arguments是收到的实参副本,var arr3 = $.makeArray( arguments );w( arguments instanceof Array ); // falsew( arr3 instanceof Array ); // true}foo(1, 2); (3)jQuery.inArray( value, array )value: 任意类型用于查找的值。array: Array类型指定被查找的数组。函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回 -1。示例如下://在当前页面内追加换行标签和指定的HTML内容function w( html ){document.body.innerHTML += "<br/>" + html;}var arr = [ 10, 25, 3, 0, -3 ];w( $.inArray( 25, arr ) ); // 1w( $.inArray( -3, arr ) ); // 4w( $.inArray( 1