JavaScript学习：Array 类型

除了Object之外，Array类型恐怕是ECMAScript中最常用的类型了。而且，ECMAScript中的数组与其它多数语言中的数组有着相当大的区别。虽然EMCAScript数组与其它语言中的数组都是数据的有序列表，但与其它语言不同的是，ECMAScript数组的每一项可以保存任何类型的数据。也就是说，可以用数组的第一个位置来保存字符串，用第二个位置来保存数值，用第三个位置来保存对象，以此类推。而且，ECMAScript数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。

创建数组的基本方法有两种方式。第一种是使用Arrray 构造函数，如下面的代码所示：

var colors = new Array();

如果预先知道数组要保存的项目数量，也可以给构造函数传递数量，得到的数组就会具有那么多的位置。例如，下面的代码将创建包含20个项的数组：

var colors = new Array(20);

也可以向Array构造函数传递数组中应该包含的项。以下代码创建了一个包含3个字符串值的数组：

var colors = new Array("red", "blue", "green");

创建数组的第二种基本方式是使用数组字面量表示法。数组字面量由一对包含数组项的方括号表示，多个数组项之间逗号隔开，如下所示：

var colors = ["red", "blue", "green"]; //创建一个包含3个
var names = []; //创建一个空数组
var values = [1,2,]; //不要这样！这样会创建一个包含2或3项的数组
var options = [,,,,,]; //不要这样！这样创建一个包含5或6项的数组

在读取和设置数值时，要使用方括号并提供相应值的基于0的数字索引，如下所示：

var colors = ["red", "blue", "green"];
alert(colors[0]); //显示第一项
colors[2] = "black";  //修改第三项
colors[3] = "brown";  //新增第四项

方括号的索引表示要访问的值。如果索引小于数组中的项数，则返回对应项的值，就像这个例子中的colors[0]会显示“red”一样。设置数组的值也使用相同的语法，但会替换指定位置的值。如果设置某个值的索引超过了数组现有的最大索引值，如果这个例子中的colors[3]所示，数组就会自动增加到该索引值加1的长度（就这个例子而言，索引是3，因此数组的长度就是4）。

数组的项数保存在length属性中，这个属性始终会返回0或更大的值，如下面的之歌例子所示：

var colors = ["red", "blue", "green"];  //创建一个包含3个字符串的数组
var names = []; //创建一个空数组
alert(colors.length); //3
alert(names.length) //0

数组的length属性不是只读的。因此，通过设置这个属性，可以从数组的末尾移除项或向数组中添加项。请看下面的例子：

var colors = ["red", "blue", "green"];  //创建一个包含3个字符串的数组
colors.length = 2;
alert(colors[2]); //undefined

这个例子中的数组colors一开始有3个值。将其length属性设置为2会移除最后一项，结果在colors[2]就会显示undefined了。如果将其length属性设置为大于数组项数的值，则新增的每一项都会取得undefined值，如下所示：

var colors = ["red", "blue", "green"];  //创建一个包含3个字符串的数组
colors.length = 4;
alert(colors[3]);  //undefined

在此虽然colors数组包含3个项，但它的length属性设置成了4。于是，这个数组中位置为3的那一项就获得了undefined值，数值的项数也增加到4.

利用length属性也可以方便地在数组末尾添加新项，如下所示：

var colors = ["red", "blue", "green"]; //创建一个包含3个字符串的数组
colors[colors.length] = "black"; //(在位置3)添加一种颜色
colors[colors.length] = "brown"; //(在位置4)再添加一种颜色

由于数组最后一项的索引始终是length-1，因此下一个新项的位置就是length。每当在数组末尾添加一项后，其length属性都会自动更新反映这一变化。

检测数组

自从ECMAScript 3做出规定以后，就出现了确定某个对象是不是数组的经典问题。对于一个网页，或者一个全局作用域而言，使用instanceof操作符就能得到满意的结果：

if (value instanceof Array){
//对数组执行某些操作
}

转换方法

所有对象都具有toLocaleString()、toString()和valueOf()方法。其中，调用数组的toString()和valueOf()方法会返回相同的值，即由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。而如果使用join()方法，则可以使用不同的分隔符来构建这个字符串。join()方法只接收一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。

//创建一个包含3个字符串的数组
var colors = ["red","blue","green"];
alert(colors.toString());
alert(colors.valueOf());
alert(colors);
alert(colors.join("|"))

栈方法

栈是一种LIFO(last-in-first-out,后进先出)的数据结构（想象模型：一个一头封闭的管子）。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。ECMAScript为数组专门提供了push()和pop()方法，以便实现类似栈的行为。push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。pop()方法则从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

var colors=new Array();
var count=colors.push("red","green");
alert(count);    //2
count=colors.push("black"); 
alert(count);    //3
var item=colors.pop();
alert(item);    //"black"
alert(colors.length);    //2

队列方法

队列数据结构的访问规则是FIFO(first-in-first-out，先进先出，想象模型：一个没有封闭的管子)。shift()能够移除数组中的第一个项并返回该项，同时将数组长度减1； unshift()能在数组前端添加任意个项并返回新数组的长度。

var colors=new Array();
var count=colors.push("red","green");
alert(count);    //2

count=colors.push("black"); 
alert(count);    //3

var item=colors.shift();
alert(item);    //"red"
alert(colors.length);    //2

var colors=new Array();
var count=colors.unshift("red","green");
alert(count);    //2

count=count.unshift("black"); 
alert(count);    //3

var item=colors.pop();
alert(item);    //"green"
alert(colors.length);    //2

重排序方法

reverse()方法用于颠倒数组中元素的顺序。注：该方法会改变原来的数组，而不会创建新的数组。

var colors=["red","green","blue"];  
var colors2=colors.reverse();  
alert(colors);    //blue,green,red  
alert(colors2);    //blue,green,red

sort()方法用于对数组的元素进行排序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串。注：数组在原数组上进行排序，不生成副本。

var value=[0,1,5,10,15];  
value.sort();  
alert(value);    //0,1,10,15,5
  
function compare(value1,value2){  
    return a-b;  
}  
value.sort(compare);  
alert(value);     //0,1,5,10,15 

操作方法

concat()方法可以基于当前数组中的所有项创建一个新数组。concat()方法常用于连接两个或多个数组。

具体来说，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副本。如果传递给concat()方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var colors=["red","green","blue"];  
var colors2=colors.concat("yellow",["black","brown"]);  
alert(colors);    //red,green,blue  
alert(colors2);    //red,green,blue,yellow,black,brown  

slice()方法能够基于当前数组中的一或多个项创建一个新数组。slice() 方法可从已有的数组中返回选定的元素。

slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。注意，slice()方法不会影响原始数组。

var colors=["red","green","blue","yellow","purple"];
var colors2=colors.slice(1);  
var colors3=colors.slice(1,4);  
alert(colors2);    //green,blue,yellow,purple  
alert(colors3);    //green,blue,yellow 

splice() 方法用于插入、删除或替换数组的元素。

删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。例如，splice(0,2)会删除数组中的前两项。

插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如，splice(2,0,”red”,”green”)会从当前数组的位置2开始插入字符串”red”和”green”。

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,”red”,”green”)会删除当前数组位置2的项，然后再从位置2开始插入字符串”red”和”green”。

var colors=["red","green","blue"];  
var removed=colors.splice(0,1);    //删除  
alert(colors);    //green,blue  
alert(removed);    //red  
  
removed=colors.splice(1,0,"yellow","orange");    //插入  
alert(colors);    //green,yellow,orange,blue  
alert(removed);    //返回一个空数组  
  
removed=colors.splice(1,1,"red","purple");    //替换  
alert(colors);    //green,red,purple,orange,blue  
alert(removed);    //yellow  

位置方法

indexOf()和lastIndexOf()。这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，indexOf()方法从数组的开头（位置0）开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符；也就是说，要求查找的项必须严格相等（就像使用===一样）。

相关阅读：JavaScript学习：数据类型