日期:2014-05-16  浏览次数:20315 次

jQuery和JavaScript中对数组的操作

一、将数组转换为字符串
? ? ? ? ? 使用JavaScript中Array的原生方法join()可以高效的将数组转换为字符串,应此常用于链接字符串,它比“+”链接符高效的多。
eg:

var exarr = ["jiuzi","song","zhang","liu","li"];
//将数组转换为以逗号分隔的字符串
var res1 = exarr.join();               //jiuzi,song,zhang,liu,li
//将数组转换为以“-”符号分隔的字符串
var res2 = exarr.join("-");          //jiuzi-song-zhang-liu-li

?

二、遍历数组
????????? 使用jQuery中的 $.each(object,[callback]) 方法进行遍历操作,此方法不同于例遍 jQuery 对象的 $(selector).each() 方法,它可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
eg:

//循环exarr并把里面的元素显示到ul标签中
$(function(){
//定义变量
var exarr = ["jiuzi","song","zhang","liu","li"],
      resultArr = ["<ul>"];                                 
$.each(exarr,function(index,value){
resultArr.push("<li>"+value+"</li>");  //对循环体进行操作
});
resultArr.push("</ul>");
$("body").appen(resultArr.join(""));
});

//循环对象exObj中的属性并把属性值显示到ul标签中
$(function(){ 
var exObj = { name:"jiuzi",age:25}, 
    resultArr = ["<ul>"];
$.each(exObj,function(index,value){
  resultArr.push("<li>"+value+"</li>");
});
resultArr.push("</ul>");
$(resultArr.join("")).appendTo($("body"));
});

?


三、操作数组元素
????????? 使用jQuery中的$.map(arr|obj,callback) 方法可以循环对数组或对象中的每个元素或属性进行操作,返回处理后的数组,作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。
eg:

//循环exarr并把里面的元素显示到ul标签中
$(function(){
var exarr = ["jiuzi","song","zhang","liu","li"];
//返回处理后的数组
var resultArr = $.map(exarr,function(value){
return "<li>"+value+"</li>";  //对元素进行操作
          });
          resultArr.unshift("<ul>");//将指定的元素插入数组开始位置并返回该数组。
          resultArr.push("</ul>");
         $(resultArr.join("")).appendTo($("body"));
});

?

四、筛选数组
? ? ? ? ?使用jQuery中的$.grep(array,fn,[invert])方法可以根据一定的条件过滤数组,返回符合条件的元素。此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
eg:

//循环exarr并把里面的元素值得长度小于4的元素显示到ul标签中
$(function(){
     var exarr = ["jiuzi","song","zhang","liu","li"];
     exarr = $.grep(exarr,function(value){
      return value.length>4; //过滤出长度小于4的元素。
     });
     var resultArr = $.map(exarr,function(value){
      return "<li>"+value+"</li>";
     });
     resultArr.unshift("<ul>");
     resultArr.push("</ul>");
  $(resultArr.join("")).appendTo($("body"));
});

?


五、数组排序
? ? ? ? ? 使用JavaScript中Array的原生方法arrayobj.sort(sortfunction)方法可以对数组进行排序。该方法返回一个元素已经进行了排序的 Array 对象。arrayObj 必选项。任意 Array 对象。sortFunction 可选项。是用来确定元素顺序的函数的名称。如果这个参数被省略,那么元素将按照 ASCII 字符顺序进行升序排列。
eg:

//sort()方法是基于ASCII值进行排序的。

var exarr = ["jiuzi","song","zhang","liu","li"];
exarr = exarr.sort();  
console.log(exarr.join()); // jiuzi,li,liu,song,zhang

var exarr = [91,62,5,6,3,55];  
exarr = exarr.sort();  
console.log(exarr.join()); //3,5,55,6,62,91

//对于数组元素是数值或对象的数组排序我们需要重写排序逻辑
var exarr = [91,62,5,6,3,55];  
exarr = exarr.sort(function(a,b){
return a>b;
});  
console.log(exarr.join()); //3,5,6,55,62,91

?

六、拆分数组 和 合并数组
1、拆分数组
返回一个数组的一段。
arrayObj.slice(start, [end])
参数?

? ? ? ?arrayObj ?必选项。一个 Array 对象。

? ? ? ?start ? ? ? ? 必选项。arrayObj 中所指定的部分的开始元素是从零开始计算的下标。

? ? ? ?end ? ? ? ? ?可选项。arrayObj 中所指定的部分的结束元素是从零开始计算的下标。
说明
? ? ? ?slice 方法返回一个 Array 对象,其中包含了 arrayObj 的指定部分。slice 方法一直复制到 end 所指定的元素,但是不包括该元素。如果 start 为负,将它作为 length + start处理,此处 length 为数组的长度。如果 end 为负,就将它作为 length + end 处