Javascript操作数组

　1 、数组的创建

以下为引用的内容：
vararrayObj=newArray(); 　// 创建一个数组
vararrayObj=newArray([size]); 　// 创建一个数组并指定长度，注意不是上限，是长度
vararrayObj=newArray([element0[,element1[,...[,elementN]]]]); 　创建一个数组并赋值

要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5 ，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。
2 、数组的元素的访问
vartestGetArrValue=arrayObj[1];// 获取数组的元素值
arrayObj[1]=" 这是新值";// 给数组元素赋予新的值
3 、数组元素的添加
arrayObj.push([item1[item2[...[itemN]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift([item1[item2[...[itemN]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.splice(insertPos,0,[item1[,item2[,...[,itemN]]]]);// 将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回"" 。
4 、数组元素的删除
arrayObj.pop();// 移除最后一个元素并返回该元素值
arrayObj.shift();// 移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount);// 删除从指定位置deletePos 开始的指定数量deleteCount 的元素，数组形式返回所移除的元素
5 、数组的截取和合并
arrayObj.slice(start,[end]);// 以数组的形式返回数组的一部分，注意不包括end 对应的元素，如果省略end 将复制start 之后的所有元素
arrayObj.concat([item1[,item2[,...[,itemN]]]]);// 将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组
6 、数组的拷贝
arrayObj.slice(0);// 返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.concat();// 返回数组的拷贝数组，注意是一个新的数组，不是指向
7 、数组元素的排序
arrayObj.reverse();// 反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort();// 对数组元素排序，返回数组地址
8 、数组元素的字符串化
arrayObj.join(separator);// 返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用separator 隔开。
toLocaleString 、toString 、valueOf ：可以看作是join 的特殊用法，不常用
二、数组对象的3 个属性
1 、length 属性
Length 属性表示数组的长度，即其中元素的个数。因为数组的索引总是由0 开始，所以一个数组的上下限分别是：0 和length-1 。和其他大 多数语言不同的是，JavaScript 数组的length 属性是可变的，这一点需要特别注意。当length 属性被设置得更大时，整个数组的状态事实上 不会发生变化，仅仅是length 属性变大；当length 属性被设置得比原来小时，则原先数组中索引大于或等于length 的元素的值全部被丢失。下面 是演示改变length 属性的例子：
vararr=[12,23,5,3,25,98,76,54,56,76];
// 定义了一个包含10 个数字的数组
alert(arr.length);// 显示数组的长度10
arr.length=12;// 增大数组的长度
alert(arr.length);// 显示数组的长度已经变为12
alert(arr[8]);// 显示第9 个元素的值，为56
arr.length=5;// 将数组的长度减少到5 ，索引等于或超过5 的元素被丢弃
alert(arr[8]);// 显示第9 个元素已经变为"undefined"
arr.length=10;// 将数组长度恢复为10
alert(arr[8]);// 虽然长度被恢复为10 ，但第9 个元素却无法收回，显示"undefined"
由 上面的代码我们可以清楚的看到length 属性的性质。但length 对象不仅可以显式的设置，它也有可能被隐式修改。JavaScript 中 可以使用一个未声明过的变量，同样，也可以使用一个未定义的数组元素（指索引超过或等于length 的元素），这时，length 属性的值将被设置为所使 用元素索引的值加1 。例如下面的代码：
vararr=[12,23,5,3,25,98,76,54,56,76];
alert(arr.length);
arr[15]=34;
alert(arr.length);
代 码中同样是先定义了一个包含10 个数字的数组，通过alert 语句可以看出其长度为10 。随后使用了索引为15 的元素，将其赋值为15 ，即 arr[15]=34 ，这时再用alert 语句输出数组的长度，得到的是16 。无论如何，对于习惯于强类型编程的开发人员来说，这是一个很令人惊讶的特 性。事实上，使用newArray() 形式创建的数组，其初始长度就是为0 ，正是对其中未定义元素的操作，才使数组的长度发生变化。
由上面的介绍可以看到，length 属性是如此的神奇，利用它可以方便的增加或者减少数组的容量。因此对length 属性的深入了解，有助于在开发过程中灵活运用。
2 、prototype 属性
返回对象类型原型的引用。prototype 属性是object 共有的。
objectName.prototype
objectName 参数是object 对象的名称。
说明：用prototype 属性提供对象的类的一组基本功能。 对象的新实例“ 继承” 赋予该对象原型的操作。
对于数组对象，以以下例子说明prototype 属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点，声明一个函数，将它加入Array.prototype ， 并使用它。

以下为引用的内容：
functionarray_max()
{
vari,max=this[0];
for(i=1;i<this.length;i++)
{
if(max<this[i])
max=this[i];
}
returnmax;
}
Array.prototype.max=array_max;
varx=newArray(1,2,3,4,5,6);
vary=x.max();

该代码执行后，y 保存数组x 中的最大值，或说6 。
3 、constructor 属性
表示创建对象的函数。
object.constructor//object 是对象或函数的名称。
说明：constructor 属性是所有具有prototype 的对象的成员。它们包括除Global 和Math 对象以外的所有JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。
例如：
x=newString("Hi");
if(x.constructor==String)// 进行处理（条件为真）。
或
functionMyFunc{
// 函数体。
}
y=newMyFunc;
if(y.constructor==MyFunc)// 进行处理（条件为真）。
对于数组来说：
y=newArray();

 

判断是否数组的方法
vararrayVar=[\"aaa\",\"bbb\",\"ccc\"];
varnonArrayVar={length:4,otherAttribute:\"attr\"};
document.write(arrayVar.constructor==Array);
document.write(\"<br/>\");
document.write(nonArrayVar.constructor==Array); 结果是true,false

关于数组转换
可以使用[].slice.call() 或者Array.prototype.slice.call() ，但是IE6,IE7 下对DOM 元素集合使用这个操作时会报错，其它浏览器(Firefox,Opera,Safari) 都正常
示例代码:
(function(){
//SupportedbyFirefox,IE6,IE7,Opera,Safari
varargArray=[].slice.call(arguments);//argumentsisnotanarray,
//[].slice.call()willmakeanewarraywitharguments
document.write(argArray.reverse().join(\"&\"));//result:www&2&1
document.write(\"<br/>\"); [Page]

//SupportedbyFirefox,IE6,IE7,Opera,Safari
vararrayLike={0:\"ccc\",1:1,2:\"eee\",3:8,length:4};//anobjectthatlookslikeanobject
vartrueArray=[].slice.call(arrayLike,2,arrayLike.length);//makeanewarraywitharrayLike
trueArray.push(\"2008-02-12\");
document.write(trueArray.join(\"|\"));//result:eee|8|2008-02-12
document.write(\"<br/>\");

//SupportedbyFirefox,Opera,Safari
varobj=document.createElement(\"ul\");
obj.innerHTML=’<li>AAAAAA</li><listyle=\"display:none;\">BBBBBB</li>

<li>CCCCCC</li><li>DDDDDD</li>’;
varnodeList=obj.getElementsByTagName(\"li\");//DOMElementcollections
document.write(nodeList.length+\"linodefound!<br/>\");
varnodeArray=[].slice.call(nodeList);//makeanewarraywithnodeList
for(vari=0;i<nodeArray.length;i++){
document.write(nodeArray[i].textContent||nodeArray[i].innerText);
document.write(\"$\");
}//result:AAAAAA$BBBBBB$CCCCCC$DDDDDD$
})(1,2,\"www\");
grep 、map
Perl 语言带出来的东西，jQuery 里面就用了自己的grep 和map 实现
grep
对数组的grep 操作，指类似这样的代码:
ArraynewArray=grep(condition,oldArray) ，这个操作将对oldArray 数组的每个元素进行遍历，如果当前处理元素符合条件condition ，则加入到返回数组中
jQuery 中的grep 类似这样:function(elems,callback) ，elems 是DOM 元素集合，callback 是实现selector 的一些表达式函数，如果callback 返回true 则表明当前处理的元素符合selector 表达式

map

与grep 不同的是，map 不进行条件判断，只是对数组中每个元素执行指定的操作，就是将一个循环过程进行改装 [Page]

喜欢动态语言风格的，可以给数组加个grep 和map 方法，例如:
Array.prototype.grep=function(condition,operation,inverse){
if(arguments.length<1)return[];

vartester;
if(typeofcondition==\"function\")tester=condition;
elseif(condition.constructor==RegExp)tester=function(e,i){returncondition.test(e);};
elseif(typeofcondition==\"string\")
try{
tester=eval(\"false||function(e,i){return\"+condition+\";}\");
}catch(e){
}
elsetester=function(e,i){returnfalse;};
if(!tester)return[];

varcommand;
if(typeofoperation==\"function\")command=operation;
elseif(typeofoperation==\"string\")
try{
command=eval(\"false||function(e,i){\"+operation+\";returne;}\");
}catch(e){
}
if(typeofcommand!=\"function\")command=function(e,i){returne;};

varresult=[],match,t;
for(vari=0;i<this.length;i++){
match=tester(this[i],i);
if(match)t=command(this[i],i);
if(match&&!inverse&&t!=null)t.constructor==Array?result.concat(t):result.push(t);
elseif(!match&&inverse)result.push(this[i]); [Page]
}

returnresult;
};
Array.prototype.map=function(callback){
if(!callback||typeofcallback!=\"function\")returnthis;
for(vari=0;i<this.length;i++)callback(this[i],i);
returnthis;
}; 使用示例:
varoldArray=[2,7,8,5,1,9,2,6,0];
varnewArray1=oldArray.grep(\"i%2==0\");//returnelementswithevenindex
varnewArray2=oldArray.grep(\"e%2==1\");//returnelementswithoddvalue
document.write(newArray1+\"<br/>\");//result:2,8,1,2,0
document.write(newArray2+\"<br/>\");//result:7,5,1,9

oldArray=[\"aa\",\"bbbb\",\"abcdefg\",\"ccccc\",\"111121111\",\"999999999\"];
varnewArray3=oldArray.grep(/(\\w)\\1{4,}/);
document.write(newArray3+\"<br/>\");//result:ccccc,999999999 典型jQuery 风格的代码:
varobj=document.createElement(\"ul\");
obj.innerHTML=’<li>AAAAAA</li><listyle=\"display:none;\">BBBBBB</li>

<li>CCCCCC</li><li>DDDDDD</li>’;
document.body.appendChild(obj);

window.setInterval(function(){
//makeanewaarraywithDOMElementcollection
varliList=obj.getElementsByTagName(\"li\");
varliArray=[];
for(vari=0;i<liList.length;i++)liArray.push(liList[i]);
//grepforarraysexample
liArray
.grep(’e.style[\"display\"]==\"none\"’,’e.style[\"display\"]=\"\";’,true)

.map(function(e,i){e.style[\"display\"]=\"none\";});
},1500);