方法不斷完善中..
<!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博客.