Javascrip-js操作数组-Array-添加-修改数组-charje的博客
2012-01-05 11:31
495 查看
方法不断完善中..
直接代码最直观
charje博客.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/global.css" /> <title>数组-Array</title> <style type="text/css"> pre { font-family:"Comic Sans MS", cursive; color:#333; } </style> </head> <body> <h1>创建数组</h1> <pre> var aColor=new Array(); aColor[0]="red"; aColor[1]="blue"; /************************** 或者 ***************************/ //var aColor=new Array("red","blue"); //var aColor=["red","blue"]; </pre> <h1>length属性</h1> <p>数组.length可读可写</p> <pre> document.write(aColor.length);//2 aColor[aColor.length]="green";//在第三项添加"green" </pre> <input type="button" value="添加green到数组" onclick="fnInsertColor()" /> <div id="msg_length"> </div> <script type="text/javascript"> //<![CDATA[ var aColor=["red","blue"]; function fnInsertColor(){ aColor[aColor.length]="green"; document.getElementById("msg_length").innerHTML=aColor; } //]]> </script> <h1>数组的push,pop方法</h1> <p>push可以在数组末尾添加一项,而pop则可以删除末尾项</p> <pre> var count=aColor.push("brown","orange");//可以添加多个值 count返回数值个数 var result=aColor.pop(); //orange </pre> <input type="button" value="添加brown,orange到数组" onclick="fnColorPush()" /> <div id="msg_push"> </div> <script type="text/javascript"> //<![CDATA[ function fnColorPush(){ var count=aColor.push("brown","orange");//可以添加多个值 var result=aColor.pop();//orange document.getElementById("msg_push").innerHTML="push后返回当然数组个数="+count+",pop为删除掉的值="+result; } //]]> </script> <h1>shift,unshift</h1> <p>shift和unshift方法很像push,pop方法,shift,unshift是对数组前项的添加和删除,比较专业点的说法是:push,pop是后进先出,而shift,unshift是先进先出,不知道我说对了没有。</p> <pre> var item=aColor.shift();//返回删除的项item var count=aColor.unshift("yellow","gray"); //添加个数 </pre> <input type="button" value="添加yellow,gray到数组" onclick="fnColorshift()" /> <div id="msg_shift"> </div> <script type="text/javascript"> //<![CDATA[ function fnColorshift(){ var count=aColor.unshift("yellow","gray"); //添加个数 var item=aColor.shift();//返回删除的项item aColor.reverse() document.getElementById("msg_shift").innerHTML="shift删除的项="+item+",unshift添加到数组前项总数="+count+"aColor值等于:"+aColor; } //]]> </script> <h1>sort,reverse排序,反转</h1> <pre> var count=aColor.reverse(); //返转数组 blue,red var aAge=["15","20","30","5","10","1"]; var result=aAge.sort();// 1,10,15,20,30,5(有木有发现5在后面去了,这很多时候不是我们想要的) </pre> <input type="button" value="reverse反转数组" onclick="fnColoReverse()" /> <input type="button" value="Sort排序(5在后面)" onclick="fnColoSort()" /> <input type="button" value="Sort排序" onclick="fnColoSort(fnCompile)" /> <input type="button" value="对象的排序" onclick="fnObjectArray()" /> <div id="msg_sort"> </div> <script type="text/javascript"> //<![CDATA[ //反转数组 function fnColoReverse(){ var result=aColor.reverse() document.getElementById("msg_sort").innerHTML=result; } //排序 function fnColoSort(copmile){ var aAge=["15","20","30","5","10","1"]; if(arguments.length==1){ var result=aAge.sort(copmile); } else{ var result=aAge.sort();//有木有发现5在后面去了 } document.getElementById("msg_sort").innerHTML="排序后数组为"+result; } function fnCompile(num1,num2){ return num1-num2; } /***************** 对象数组排序 *****************/ function fnObjectArray(){ var aPerson=[ {name:"Charje",age:23,date:"2011-12-31"}, {name:"BiceLaa",age:40,date:"2012-01-01"}, {name:"Shilu",age:31,date:"2010-08-29"} ]; var result=aPerson.sort(fnOrderBy("name")); document.getElementById("msg_sort").innerHTML="排序后数组为"+result[0].name+"--"+result[0].age; } function fnOrderBy(name){ return function(o, p){ var a, b; if (typeof o === "object" && typeof p === "object" && o && p) { a = o[name]; b = p[name]; if (a === b) { return 0; } if (typeof a === typeof b) { return a < b ? -1 : 1; } return typeof a < typeof b ? -1 : 1; } else { throw ("error"); } } } //]]> </script> <h1>Join方法</h1> <p>哈,来个简单的</p> <pre> aColor.join("|");//red|blue </pre> <input type="button" value="数组Join方法" onclick="fnArrayJoin()" /> <div id="msg_join"> </div> <script type="text/javascript"> //<![CDATA[ function fnArrayJoin(){ var sList=aColor.join("|"); document.getElementById("msg_join").innerHTML=sList; } //]]> </script> <h1>Slice,Splice方法</h1> <p>Slice方法接受两个参数num1,num2,num1为起始位置,num2为结束位置,返回指定参数长度</p> <pre> aColor.push("yellow","black","white"); var sList=aColor.slice(0,4);//red,blue,yellow,black(注意:到4结束不包括4) </pre> <pre> //Splice var result=aColor.splice(0,0,"yellow","black","white"); alert(aColor);//yellow,black,white,red,blue var result1=aColor.splice(0,1); alert(aColor);//black,white,red,blue var result2=aColor.splice(1,1,"gray"); alert(aColor);//black,gray,red,blue </pre> <input type="button" value="数组Slice方法" onclick="fnArraySlice()" /> <input type="button" value="数组Splice方法" onclick="fnArraySplice()" /> <div id="msg_slice"> </div> <script type="text/javascript"> //<![CDATA[ function fnArraySlice(){ aColor.push("yellow","black","white"); var sList=aColor.slice(0,4); document.getElementById("msg_slice").innerHTML=sList; } //Splice function fnArraySplice(){ var result=aColor.splice(0,0,"yellow","black","white"); alert(aColor);//yellow,black,white,red,blue var result1=aColor.splice(0,1); alert(aColor);//black,white,red,blue var result2=aColor.splice(1,1,"gray"); alert(aColor);//black,gray,red,blue } //]]> </script> </body> </html>
直接代码最直观
charje博客.
相关文章推荐
- js如何往数组Array中添加元素
- 【javascript笔记】js Array数组的常用操作
- JS 操作Array数组的方法及属性实例解析
- Js操作表格-对表格单元格的添加删除修改
- js中数组Array的操作
- JS 操作Array数组的方法及属性实例解析
- js中Array数组的操作
- js对数组array的常见操作小结
- js操作select 添加 删除 修改 清空 选择 获取
- js 数组array的操作
- js 操作jsonarray 创建、添加元素
- js如何往数组Array(list)中添加元素
- js 数组赋值操作,修改数组元素的值
- JS 操作Array数组的属性和方法
- js 对html 元素操作,添加删除修改
- js数组操作-删除首项、删除尾项、头部添加项、尾部添加项
- JS ARRAY 数组操作
- js如何往数组Array中添加元素
- js如何往数组Array中添加元素
- JS数组array元素的添加和删除方法代码实例