数组的基础语法

发表于 | 分类于 ，

数组对于每一门编程语言来说都是重要的数据结构之一，当然不同语言对数组的实现及处理也不尽相同。

JavaScript 中的数组是一个可以储存多个任意类型数据的有序集合。

数组的特点：

  1. 数组的作用就是可以将多条零散的数据结合成一个整体；
  2. 数组本身属于“引用数据类型”，即数组是“对象”。但是数组内部储存的数据可以是任意数据类型。
  3. 根据需要可以对数组内部的数据进行操作（例如：增、删、查、改）

定义数组

创建数组的方式分为两种：

  1. 字面量方式

    1
    [];

  2. 构造函数方式

    1
    new Array();

通过以上两种方式都可以创建出一个还未储存数据的空数组。其中字面量方式效率更高一些。因为方括号是使用 JSON 格式的语法，可以被 JavaScript 引擎直接解释，而 new 关键字的方式则需要调用构造函数。

一般情况下，为了方便后面对数组的操作使用，我们将数组创建好后都会赋值给一个变量保存起来。

1
2
let ary1 = [];
let ary2 = new Array();

数组初始化

数组初始化即在创建数组的同时就将数据添加进去。

1
2
let ary1 = [10, true, null, 'hello', undefined];
let ary2 = new Array(10, true, null, 'hello', undefined);

数组的下标

前面提到，数组里面储存的数据是有顺序的。因此，每一条数据在数组中都有一个对应的位置编号，称之为“下标/索引”。

下标的取值从 0 开始，依次递增 1。

下标的使用

通过下标，就可以找到并操作数组中的任意数据。语法结构如下：

1
数组名[下标]

查看数据

1
2
3
4
let ary = [100, 200, 300];
console.log(ary[0]);    // 100
console.log(ary[1]);    // 200
console.log(ary[2]);    // 300

修改数据

1
2
3
4
5
let ary = [100, 200, 300];
ary[0] = 'a';
ary[1] = 'b';
ary[2] = 'c';
console.log(ary);     // ['a', 'b', 'c']

新增数据

1
2
3
4
let ary = [100, 200, 300];
ary[3] = 400;
ary[5] = 500;
console.log(ary);     // [100, 200, 300, 400, empty, 500];

下标 4 这个位置上没有赋值，当访问这个位置时会得到undefined的结果。

删除数据

1
2
3
let ary = [100, 200, 300];
delete ary[0];
console.log(ary);     // [empty, 200, 300];

数组的长度

数组的长度，即数组内保存的数据的条数。JavaScript 中为数组提供了一个length属性，用来设置或返回数组的长度。

语法结构：

1
数组名.length

例：

1
2
3
4
5
6
let ary = [100, 200, 300];
// 获取长度
console.log(ary.length);     // 3
// 设置长度
ary.length = 2;
console.log(ary);            // [100, 200]

小技巧：想要快速清空一个数组，就可以将数组的长度赋值为 0。

多维数组

JavaScript 中的数组有一个特点是可以储存任意类型的数据。也就意味着，数组里面的数据也可以是数组。

1
let ary = [100, 200, ['a', 'b'], 300, 400];

这种数组里面嵌套数组的结构，就叫做多维数组。

多维数组和普通数组的操作方式一样，都是通过下标来实现：

1
2
3
4
5
6
7
8
9
let ary = [100, 200, ['a', 'b'], 300, 400];
// 查看
console.log(ary[2][0]);      // 'a'
// 修改
ary[2][0] = 'A';
// 新增
ary[5] = [true, false];
// 删除
delete ary[2][0];

数组的遍历

数组的作用是可以批量保存多条数据，但是当我们需要对数据进行操作时，并不能通过直接操作数组来实现效果，还是需要将每一条数据从数组中取出来，然后再依次取对其进行操作。

数组的遍历就是指依次访问数组中每一项数据。

for 循环

for循环是遍历数组最简单的一种，也是使用频率最高的一种。

1
2
3
4
5
let ary = [100, 200, 300, 400];
// i 即用来控制循环次数，也可用作数组的下标
for(let i = 0; i < ary.length; i++){
    console.log(ary[i]);
}

优化版 for 循环

对于 for 循环的执行流程来说，i < ary.length这个表达式会反复执行很多次，也就是说，数组的长度每次都要去重新获取。优化版 for 循环就是在普通版 for 循环基础之上，使用临时变量，将数组的长度ary.length缓存起来，避免重复获取数组长度。代码如下：

1
2
3
for(let i = 0, len = ary.length; i < len; i++){
    console.log(ary[i]);
}

for-of

ES6 中新增了一种遍历数组的方法 for-of，相比起 for 循环来说它的代码更加简洁。

1
2
3
4
5
let ary = [100, 200, 300, 400];
// 创建一个变量 value 用来接收数组中的每一个值
for(let value of ary){
    console.log(value);
}

说明：效率上来说 for-of 还是比不上普通的 for 循环。但是 for-of 除了可以遍历数组外，还可以遍历大多数类数组对象。例如后面会讲到的 Set、Map。

我 秦始皇 打钱