Javascrip-js操作数组-Array-添加-修改数组-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博客.
