mirror of
https://github.com/Estom/notes.git
synced 2026-02-03 18:44:19 +08:00
187 lines
9.1 KiB
Markdown
187 lines
9.1 KiB
Markdown
数组是值的有序集合。数组中的每个值叫做一个元素，而每个元素在数组中都有一个唯一的位置。这个位置用数字表示，叫做索引数据；用字符串表示，叫做关联数组。
|
||
|
||
JavaScript 数组是无类型的：数组的元素可以是任何类型，例如字符串、数字值、布尔值等，而且每个数组中的不同元素可能是不同类型。
|
||
|
||
JavaScript 数组是动态的：根据需要，可以动态地向数组插入新的元素，或者从数组中删除指定的元素。
|
||
|
||
## 一维数组
|
||
|
||
### 定义数组
|
||
|
||
数组的最大作用就是用于存储多个值。定义数组分别两种形式:
|
||
|
||
- 使用数组字面量方式:
|
||
|
||
```javascript
|
||
var arr1 = [ ];
|
||
var arr2 = [ 1, "a", true ];
|
||
```
|
||
|
||
- 使用数组关键字方式:
|
||
|
||
```javascript
|
||
var arr1 = Array( );
|
||
var arr2 = Array( 1, "a", true );
|
||
```
|
||
|
||
> **值得注意的是:** 在一个数组中的不同元素可以是不同数据类型。
|
||
|
||
### 索引数组
|
||
|
||
索引数组就是存储元素的位置使用数字值来表示，一般称之为下标或角标。具体创建方式如下述代码:
|
||
|
||
```javascript
|
||
var arr = [];
|
||
arr[0] = 1;
|
||
arr[1] = "a";
|
||
arr[2] = true;
|
||
```
|
||
|
||
> **值得注意的是:** 索引数组的下标是从 0 开始的。
|
||
|
||
### 关联数组
|
||
|
||
关联数组就是存储元素的位置使用字符串来表示，一般称之为名称（name或key）。具体创建方式如下述代码:
|
||
|
||
```javascript
|
||
var arr = [];
|
||
arr['num'] = 1;
|
||
arr['str'] = "a";
|
||
arr['bool'] = true;
|
||
```
|
||
|
||
> **值得注意的是:** 关联数组的名称（name或key）是字符串，必需使用单引号或双引号将其包裹。
|
||
|
||
### 稀疏数组
|
||
|
||
稀疏数组就是包含 0 开始的不连续索引的数组。具体创建方式如下述代码:
|
||
|
||
```javascript
|
||
var arr = Array( 10 );// 数组没有任何元素，数组的长度为 10
|
||
|
||
var arr = [];// 创建一个空数组
|
||
arr[100] = "a";// 向下标为 100 的位置添加一个元素 a
|
||
```
|
||
|
||
> **值得注意的是:** 上述代码中的第一行，并不是创建一个数组包含一个元素 10，而是创建一个不包含任何元素的数组长度为 10。
|
||
|
||
### 数组的长度
|
||
|
||
每个数组都有一个length属性，表示数组的长度。
|
||
|
||
- 如果为非稀疏数组的话，length 属性的值表示当前数组包含元素的个数。
|
||
|
||
```javascript
|
||
var arr1 = [ 1, "a", true ];
|
||
console.log( arr1.length );// 输出 3
|
||
```
|
||
|
||
- 如果为稀疏数组的话，length 属性的值大于当前数组包含元素的个数。
|
||
|
||
```javascript
|
||
var arr2 = [];
|
||
arr2[14] = "a";
|
||
console.log( arr2.length );// 输出 15
|
||
```
|
||
|
||
### 数组元素的读取
|
||
|
||
数组的主要作用是用于存储和读取数据信息，之前已经对数组存储数据信息掌握了。下面来看看如何从数组中读取指定的元素:
|
||
|
||
```javascript
|
||
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
|
||
```
|
||
|
||
### 数组元素的修改
|
||
|
||
不仅可以从数组中读取指定的元素，还可以根据需求修改数组中指定的元素值。
|
||
|
||
```javascript
|
||
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 关键字。
|
||
|
||
```javascript
|
||
var arr = [ 1, "a", true];
|
||
delete arr[1];
|
||
console.log( arr[1] );// 输出字符串 undefined
|
||
```
|
||
|
||
> **值得注意的是:** 上述代码使用 delete 关键字执行删除数组元素值的操作时，并不影响数组的长度。
|
||
|
||
```javascript
|
||
var arr = [ 1, "a", true];
|
||
delete arr[1];
|
||
console.log( arr.length );// 输出 3
|
||
```
|
||
|
||
### 遍历数组元素
|
||
|
||
使用for语句是遍历数组元素最常见的方法:
|
||
|
||
```javascript
|
||
var arr = [ 1, "a", true];
|
||
for( var i = 0; i < arr.length; i++ ){
|
||
console.log( arr[i] );
|
||
}
|
||
```
|
||
|
||
也可以从数组的最后向前（倒序）进行遍历:
|
||
|
||
```javascript
|
||
var arr = [ 1, "a", true];
|
||
for( var i = arr.length-1; i >= 0; i-- ){
|
||
console.log( arr[i] );
|
||
}
|
||
```
|
||
|
||
### for in 语句
|
||
|
||
在 ECMAScript 5 中新增了 for in 语句，同样也可以用于遍历数组:
|
||
|
||
```javascript
|
||
var arr = [ 1, "a", true];
|
||
for( var i in arr ){
|
||
console.log( i + " : " + arr[i] );
|
||
}
|
||
```
|
||
|
||
> **值得注意的是:**
|
||
>
|
||
> - for 关键字后定义的变量 i 表示当前数组的下标。
|
||
> - for in 语句不仅会遍历数组的所有元素，还有一些数组自带的属性。一般建议使用 for 语句进行数组遍历。
|
||
|
||
for in 语句还可以用于遍历稀疏数组，循环的每次将一个有效元素返回。不存在的索引将不会遍历到:
|
||
|
||
```javascript
|
||
var arr = [];
|
||
arr[100] = "a";
|
||
for( var i in arr ){
|
||
console.log( i + " : " + arr[i] );
|
||
}
|
||
```
|
||
|
||
## 二维数组
|
||
|
||
数组是可以嵌套的，这就意味着一个数组可以作为一个元素被包含在另外一个数组里面。利用JavaScript 这个特点，创建二维数组，即数组的数组。
|
||
|
||
|
||
|
||
### 定义二维数组
|
||
|
||
- 定义一个规整的二维数组:
|
||
|
||
```javascript
|
||
var arr1 = [ [11,12,13], [21,22,23], [31,32,33] ];
|
||
```
|
||
|
||
- 定义一个不规整的二维数组:
|
||
|
||
```javascript
|
||
var arr2 = [];
|
||
arr2[0] = [ 101 ];
|
||
arr2[1] = [ 201, 202 ];
|
||
arr2[2] = [ 301, 302, 303 ];
|
||
```
|
||
|
||
### 使用二维数组
|
||
|
||
- 读取二维数组中的具体元素:
|
||
|
||
```javascript
|
||
var arr1 = [ [11,12,13], [21,22,23], [31,32,33] ] ;
|
||
console.log( arr1[0][0] );// 值为11
|
||
arr1[1][2] = 230;// 把23更改为230
|
||
```
|
||
|
||
- 二维数组的遍历需要使用循环嵌套来实现:
|
||
|
||
```javascript
|
||
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() | 返回数组对象的原始值。 |
|
||
|
||
```javascript
|
||
var colors = [ "red", "blue", "green" ];
|
||
|
||
console.log( colors.toString() );// red,blue,green
|
||
console.log( colors.valueOf() );// red,blue,green
|
||
```
|
||
|
||
### 进出栈方法
|
||
|
||
JavaScript 提供了如下方法，用于数组的进出栈操作:
|
||
|
||
| 方法 | 说明 |
|
||
| --- | --- |
|
||
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。|
|
||
| pop() | 删除数组的最后一个元素并返回删除的元素。|
|
||
| shift() | 删除并返回数组的第一个元素。|
|
||
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。|
|
||
|
||
```javascript
|
||
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() | 对数组的元素进行排序。|
|
||
|
||
```javascript
|
||
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() | 连接两个或更多的数组，并返回结果。|
|
||
|
||
```javascript
|
||
var colors = [ "red", "blue", "green" ];
|
||
var colors2 = colors.concat( "yellow", [ "black", "pink" ] );
|
||
|
||
console.log( colors2 );
|
||
// red,blue,green,yellow,black,pink
|
||
```
|
||
|
||
### 操作方法
|
||
|
||
JavaScript 提供了如下方法，用于数组的删除、插入和替换操作:
|
||
|
||
| 方法 | 说明 |
|
||
| --- | --- |
|
||
| slice() | 选取数组的的一部分，并返回一个新数组。|
|
||
| splice() | 从数组中添加或删除元素。|
|
||
|
||
```javascript
|
||
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() | 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。|
|
||
|
||
```javascript
|
||
var numbers = [ 1, 2, 3, 4, 5 , 4, 3, 2, 1 ];
|
||
|
||
console.log( numbers.indexOf( 4 ) );// 3
|
||
console.log( numbers.lastIndexOf( 4 ) );// 5
|
||
```
|