第5章引用类型（2）Array 类型

来源：互联网发布：郑州玲珑科技数据分析编辑：程序博客网时间：2024/05/18 01:36

5.2 Array 类型

除了Object 之外，Array 类型恐怕是ECMAScript 中最常用的类型了。而且，ECMAScript 中的数组与

其他多数语言中的数组有着相当大的区别。虽然ECMAScript 数组与其他语言中的数组都是

数据的有序列表，但与其他语言不同的是，

ECMAScript 数组的每一项可以保存任何类型的数据。也就是说，可以用数组的第一个位置来保存字符串，

用第二位置来保存数值，用第三个位置来保存对象，

以此类推。而且，ECMAScript 数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。

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

var colors = new Array();

如果预先知道数组要保存的项目数量，也可以给构造函数传递该数量，而该数量会自动变成length属性的值。

例如，下面的代码将创建length 值为20 的数组。

var colors = new Array(20);

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

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

当然，给构造函数传递一个值也可以创建数组。但这时候问题就复杂一点了，

因为如果传递的是数值，则会按照该数值创建包含给定项数的数组；

而如果传递的是其他类型的参数，则会创建包含那个值的只有一项的数组。

下面就两个例子：

<!DOCTYPE html><html><head>    <title>Array Type Example</title>    <script type="text/javascript">                var colors = new Array(3);      //创建一个包含3 项的数组        var names = new Array("Greg");  //创建一个包含1 项，即字符串"Greg"的数组        alert(colors.length);        alert(names.length);    </script></head><body></body></html>

另外，在使用Array 构造函数时也可以省略new 操作符。如下面的例子所示，省略new 操作符的

结果相同：

var colors = Array(3); // 创建一个包含3 项的数组

var names = Array("Greg"); // 创建一个包含1 项，即字符串"Greg"的数组

创建数组的第二种基本方式是使用数组字面量表示法。数组字面量由一对包含数组项的方括号表

示，多个数组项之间以逗号隔开，如下所示：

<!DOCTYPE html><html><head>    <title>Array Type Example 2</title>    <script type="text/javascript">                var colors = ["red", "blue", "green"]; //创建一个包含3 个字符串的数组        var names = [];                        //创建一个空数组        var values = [1,2,];                   //不要这样！这样会创建一个包含2 或3 项的数组        var options = [,,,,,];                 //不要这样！这样会创建一个包含5 或6 项的数组                alert(colors.length);    //3        alert(names.length);     //0        alert(values.length);    //2 (FF, Safari, Opera) or 3 (IE)        alert(options.length);   //5 (FF, Safari, Opera) or 6 (IE)    </script></head><body></body></html>

以上代码的第一行创建了一个包含3个字符串的数组。第二行使用一对空方括号创建了一个空数组。

第三行展示了在数组字面量的最后一项添加逗号的结果：在IE 中，values 会成为一个包含3 个项且每

项的值分别为1、2 和undefined 的数组；在其他浏览器中，values 会成为一个包含2 项且值分别为

1 和2 的数组。

原因是IE8 及之前版本中的ECMAScript 实现在数组字面量方面存在bug。由于这个bug

导致的另一种情况如最后一行代码所示，该行代码可能会创建包含5 项的数组（在IE9+、Firefox、Opera、

Safari 和Chrome 中），也可能会创建包含6 项的数组（在IE8 及更早版本中）。在像这种省略值的情况下，

每一项都将获得undefined 值；这个结果与调用Array 构造函数时传递项数在逻辑上是相同的。

但是由于IE 的实现与其他浏览器不一致，因此我们强烈建议不要使用这种语法。

PS：与对象一样，在使用数组字面量表示法时，也不会调用Array 构造函数（Firefox 3及更早版本除外）。

在读取和设置数组的值时，要使用方括号并提供相应值的基于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 属性很有特点——它不是只读的。因此，通过设置这个属性，可以从数组的末尾移

除项或向数组中添加新项。请看下面的例子：

<!DOCTYPE html><html><head>    <title>Array Type Example 3</title>    <script type="text/javascript">                var colors = ["red", "blue", "green"];    //创建一个包含3 个字符串的数组        colors.length = 2;        alert(colors[2]);        //undefined    </script></head><body></body></html>

这个例子中的数组colors 一开始有3 个值。将其length 属性设置为2 会移除最后一项（位置为2 的那一项），

结果再访问colors[2]就会显示undefined 了。如果将其length 属性设置为大于数组项数的值，

则新增的每一项都会取得undefined 值，如下所示：

<!DOCTYPE html><html><head>    <title>Array Type Example 4</title>    <script type="text/javascript">                var colors = ["red", "blue", "green"];    //创建一个包含3 个字符串的数组        colors.length = 4;        alert(colors[3]);        //undefined    </script></head><body></body></html>

在此，虽然colors 数组包含3 个项，但把它的length 属性设置成了4。这个数组不存在位置3，

所以访问这个位置的值就得到了特殊值undefined。

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

<!DOCTYPE html><html><head>    <title>Array Type Example 5</title>    <script type="text/javascript">                var colors = ["red", "blue", "green"];    //创建一个包含3 个字符串的数组        colors[colors.length] = "black";          //（在位置3）添加一种颜色        colors[colors.length] = "brown";          //（在位置4）再添加一种颜色        alert(colors.length);    //5        alert(colors[3]);        //black        alert(colors[4]);        //brown    </script></head><body></body></html>

由于数组最后一项的索引始终是length-1，因此下一个新项的位置就是length。每当在数组末尾添加一项后，

其length 属性都会自动更新以反应这一变化。换句话说，上面例子第二行中的colors[colors.length]为位置3

添加了一个值，最后一行的colors[colors.length]则为位置4添加了一个值。

当把一个值放在超出当前数组大小的位置上时，数组就会重新计算其长度值，即长度值

等于最后一项的索引加1，如下面的例子所示：

<!DOCTYPE html><html><head>    <title>Array Type Example 6</title>    <script type="text/javascript">                var colors = ["red", "blue", "green"];    //创建一个包含3 个字符串的数组        colors[99] = "black";                     //（在位置99）添加一种颜色        alert(colors.length);  //100    </script></head><body></body></html>

在这个例子中，我们向colors 数组的位置99 插入了一个值，结果数组新长度（length）就是100

（99+1）。而位置3 到位置98 实际上都是不存在的，所以访问它们都将返回undefined。

PS：数组最多可以包含4 294 967 295 个项，这几乎已经能够满足任何编程需求了。如

果想添加的项数超过这个上限值，就会发生异常。而创建一个初始大小与这个上限值

接近的数组，则可能会导致运行时间超长的脚本错误。

-----------------------------------------------------------------------------------------------------------------------------------------

5.2.1 检测数组

自从ECMAScript 3 做出规定以后，就出现了确定某个对象是不是数组的经典问题。对于一个网页，

或者一个全局作用域而言，使用instanceof 操作符就能得到满意的结果：

if (value instanceof Array){

//对数组执行某些操作

}

instanceof 操作符的问题在于，它假定只有一个全局执行环境。如果网页中包含多个框架，那实

际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的Array 构造函数。如果你从

一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自

不同的构造函数。

为了解决这个问题，ECMAScript 5 新增了Array.isArray()方法。这个方法的目的是最终确定某

个值到底是不是数组，而不管它是在哪个全局执行环境中创建的。这个方法的用法如下。

if (Array.isArray(value)){

//对数组执行某些操作

}

支持Array.isArray()方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome。要

在尚未实现这个方法中的浏览器中准确检测数组，请参考22.1.1 节。

0 0

第5章 引用类型（2）Array 类型

第5章引用类型（2）Array 类型