当前位置: 代码迷 >> JavaScript >> jQuery跟JavaScript中对数组的操作
  详细解决方案

jQuery跟JavaScript中对数组的操作

热度:489   发布时间:2013-12-26 15:24:01.0
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 处理,此处 length 为数组的长度。如果省略 end ,那么 slice 方法将一直复制到 arrayObj 的结尾。如果 end 出现在 start 之前,不复制任何元素到新数组中。

2、合并数组
? ? ? ? 返回一个新数组,这个新数组是由两个或更多数组组合而成的。
array1.concat([item1[, item2[, . . . [, itemN]]]])
参数
? ? ? ? array1 ? ? ?必选项。其他所有数组要进行连接的 Array 对象。
? ? ? ? item1,. . ., itemN ? ??可选项。要连接到 array1 末尾的其他项目。

说明
? ? ? ?concat 方法返回一个 Array 对象,其中包含了 array1 和提供的任意其他项目的连接。要加的项目(item1 … itemN)会按照从左到右的顺序添加到数组。如果某一项为数组,那么添加其内容到 array1 的末尾。如果该项目不是数组,就将其作为单个的数组元素添加到数组的末尾。

以下为从源数组复制元素到结果数组:
? ? ? ? 对于从正被连接到新数组的数组中复制的对象参数,复制后仍然指向相同的对象。不论新数组和源数组中哪一个有改变,都将引起另一个的改变。对于连接到新数组的数值或字符串,只复制其值。一个数组中值有改变并不影响另一个数组中的值。

?

  相关解决方案