数组是值的有序集合。数组中的每个值叫做一个元素，而每个元素在数组中都有一个唯一的位置。这个位置用数字表示，叫做索引数据；用字符串表示，叫做关联数组。

JavaScript 数组是无类型的：数组的元素可以是任何类型，例如字符串、数字值、布尔值等，而且每个数组中的不同元素可能是不同类型。

JavaScript 数组是动态的：根据需要，可以动态地向数组插入新的元素，或者从数组中删除指定的元素。

一维数组

定义数组

数组的最大作用就是用于存储多个值。定义数组分别两种形式:

  • 使用数组字面量方式:
1
2
var arr1 = [ ];
var arr2 = [ 1, "a", true ];
  • 使用数组关键字方式:
1
2
var arr1 = Array( );
var arr2 = Array( 1, "a", true );

值得注意的是: 在一个数组中的不同元素可以是不同数据类型。

索引数组

索引数组就是存储元素的位置使用数字值来表示，一般称之为下标或角标。具体创建方式如下述代码:

1
2
3
4
var arr = [];
arr[0] = 1;
arr[1] = "a";
arr[2] = true;

值得注意的是: 索引数组的下标是从 0 开始的。

关联数组

关联数组就是存储元素的位置使用字符串来表示，一般称之为名称（name或key）。具体创建方式如下述代码:

1
2
3
4
var arr = [];
arr['num'] = 1;
arr['str'] = "a";
arr['bool'] = true;

值得注意的是: 关联数组的名称（name或key）是字符串，必需使用单引号或双引号将其包裹。

稀疏数组

稀疏数组就是包含 0 开始的不连续索引的数组。具体创建方式如下述代码:

1
2
3
4
var arr = Array( 10 );// 数组没有任何元素，数组的长度为 10

var arr = [];// 创建一个空数组
arr[100] = "a";// 向下标为 100 的位置添加一个元素 a

值得注意的是: 上述代码中的第一行，并不是创建一个数组包含一个元素 10，而是创建一个不包含任何元素的数组长度为 10。

数组的长度

每个数组都有一个length属性，表示数组的长度。

  • 如果为非稀疏数组的话，length 属性的值表示当前数组包含元素的个数。
1
2
var arr1 = [ 1, "a", true ];
console.log( arr1.length );// 输出 3
  • 如果为稀疏数组的话，length 属性的值大于当前数组包含元素的个数。
1
2
3
var arr2 = [];
arr2[14] = "a";
console.log( arr2.length );// 输出 15

数组元素的读取

数组的主要作用是用于存储和读取数据信息，之前已经对数组存储数据信息掌握了。下面来看看如何从数组中读取指定的元素:

1
2
3
4
5
6
7
8
9
var arr = [ 1, "a", true];
console.log( arr[1] );// 输出字符串 a

var arr = [];
arr['num'] = 1;
arr['str'] = "a";
arr['bool'] = true;

console.log( arr['str'] );// 输出字符串 a

数组元素的修改

不仅可以从数组中读取指定的元素，还可以根据需求修改数组中指定的元素值。

1
2
3
4
5
6
7
8
9
10
11
var arr = [ 1, "a", true];
console.log( arr[1] );// 输出字符串 a
arr[1] = "b";
console.log( arr[1] );// 输出字符串 b

var arr = [];
arr['num'] = 1;
arr['str'] = "a";
console.log( arr['str'] );// 输出字符串 a
arr['str'] = "b";
console.log( arr['str'] );// 输出字符串 b

数组元素的删除

不仅可以根据需求修改数组中指定的元素值，也可以删除数组中指定的元素值。数组删除指定元素值使用 delete 关键字。

1
2
3
var arr = [ 1, "a", true];
delete arr[1];
console.log( arr[1] );// 输出字符串 undefined

值得注意的是: 上述代码使用 delete 关键字执行删除数组元素值的操作时，并不影响数组的长度。

1
2
3
var arr = [ 1, "a", true];
delete arr[1];
console.log( arr.length );// 输出 3

遍历数组元素

使用for语句是遍历数组元素最常见的方法:

1
2
3
4
var arr = [ 1, "a", true];
for( var i = 0; i < arr.length; i++ ){
	console.log( arr[i] );
}

也可以从数组的最后向前（倒序）进行遍历:

1
2
3
4
var arr = [ 1, "a", true];
for( var i = arr.length-1; i >= 0; i-- ){
	console.log( arr[i] );
}

for in 语句

在 ECMAScript 5 中新增了 for in 语句，同样也可以用于遍历数组:

1
2
3
4
var arr = [ 1, "a", true];
for( var i in arr ){
	console.log( i + " : " + arr[i] );
}

值得注意的是:

  • for 关键字后定义的变量 i 表示当前数组的下标。
  • for in 语句不仅会遍历数组的所有元素，还有一些数组自带的属性。一般建议使用 for 语句进行数组遍历。

for in 语句还可以用于遍历稀疏数组，循环的每次将一个有效元素返回。不存在的索引将不会遍历到:

1
2
3
4
5
var arr = [];
arr[100] = "a";
for( var i in arr ){
	console.log( i + " : " + arr[i] );
}

二维数组

数组是可以嵌套的，这就意味着一个数组可以作为一个元素被包含在另外一个数组里面。利用JavaScript 这个特点，创建二维数组，即数组的数组。

定义二维数组

  • 定义一个规整的二维数组:
1
var arr1 = [ [11,12,13], [21,22,23], [31,32,33] ];
  • 定义一个不规整的二维数组:
1
2
3
4
var arr2 = [];
arr2[0] = [ 101 ];
arr2[1] = [ 201, 202 ];
arr2[2] = [ 301, 302, 303 ];

使用二维数组

  • 读取二维数组中的具体元素:
1
2
3
var arr1 = [ [11,12,13], [21,22,23], [31,32,33] ] ;
console.log( arr1[0][0] );// 值为11
arr1[1][2] = 230;// 把23更改为230
  • 二维数组的遍历需要使用循环嵌套来实现:
1
2
3
4
5
for( var i = 0; i < arr1.length; i++ ){
	for( var j = 0; j < arr1[i].length; j++ ){
		console.log( arr1[i][j] );
	}
}

数组的常见方法

检测数组

如何确定当前是一个数组，JavaScript 提供如下几种方式:

  1. typeof 无法检测数组对象：typeof [] 返回 object
  2. instanceof ：[] instanceof Array 返回 true/false
  3. Object.prototype.toString.call( [] )：返回 [ object Array ]
  4. Array.prototype.isPrototypeOf( [] )：返回 true/false
  5. ES5 中新方法： Array.isArray( [] ) : 返回 true/false

转换方法

JavaScript 提供了如下方法，用于数组的转换:

方法 说明
toString() 把数组转换为字符串，并返回结果。
valueOf() 返回数组对象的原始值。 
1
2
3
4
var colors = [ "red", "blue", "green" ];

console.log( colors.toString() );// red,blue,green
console.log( colors.valueOf() );// red,blue,green

进出栈方法

JavaScript 提供了如下方法，用于数组的进出栈操作:

方法 说明
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
pop() 删除数组的最后一个元素并返回删除的元素。
shift() 删除并返回数组的第一个元素。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 
1
2
3
4
5
var colors = [ "red", "blue", "green" ];
var count = colors.push( "black" );// 4
var item = colors.pop();// black
var count = colors.unshift( "pink" );// 4
var item = colors.shift();// pink

排序方法

JavaScript 提供了如下方法，用于数组的排序操作:

方法 说明
reverse() 反转数组的元素顺序。
sort() 对数组的元素进行排序。 
1
2
3
4
var values = [ 0, 1, 5, 10, 20 ];

console.log( values.sort() );// 0,1,10,20,5
console.log( values.reverse() );// 20,10,5,1,0

值得注意的是: reverse( ) 和 sort( ) 方法的返回值是经过排序之后的数组。

连接方法

JavaScript 提供了如下方法，用于多个数组之间的连接操作:

方法 说明
concat() 连接两个或更多的数组，并返回结果。 
1
2
3
4
5
var colors = [ "red", "blue", "green" ];
var colors2 = colors.concat( "yellow", [ "black", "pink" ] );

console.log( colors2 );
// red,blue,green,yellow,black,pink

操作方法

JavaScript 提供了如下方法，用于数组的删除、插入和替换操作:

方法 说明
slice() 选取数组的的一部分，并返回一个新数组。
splice() 从数组中添加或删除元素。 
1
2
3
4
5
6
7
var colors = [ "red", "blue", "green", "yellow" ];
var colors2 = colors.slice( 1 );// blue,green,yellow
var colors3 = colors.slice( 1, 3 );// blue,green
var removed1 = colors.splice( 0, 1 );// red
colors.splice( 1, 0, "orange" );// red,orange,blue,green,yellow
var removed2 = colors.splice( 1, 1, "purple" );// blue
console.log( colors );// red,purple,green,yellow

位置方法

JavaScript 提供了如下方法，用于获取数组中指定元素的索引值:

方法 说明
indexOf() 搜索数组中的元素，并返回它所在的位置。
lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。 
1
2
3
4
var numbers = [ 1, 2, 3, 4, 5 , 4, 3, 2, 1 ];

console.log( numbers.indexOf( 4 ) );// 3
console.log( numbers.lastIndexOf( 4 ) );// 5