提示

本文主要介绍 JavaScript 数组的使用。@ermo

# 数组

上一章学习了 js 中的引用类型对象，对象内部的属性通过键值对的形式存储。在生活中，我们经常会看到商品列表、订单列表等一系列事物的有序集合。这种数据目前是对象无法满足的，因此本章我们要学习一种新的数据类型数组。

数组（Array）就是一组有序的数据集合。

# 创建数组

创建数组有2种方式

// 方式1，简写
var arr = ['JavaScript', 'Java', 'Python'];
var emptyArr = [];
console.log(arr);
console.log(emptyArr);

// 方式2，完整方式
var arr1 = new Array(18, "ermo", false);
console.log(arr1);

上例中变量 arr 就是一个数组，使用简写方式创建，数组中有3个元素，分别为 JavaScript、Java 和 Python。

同时创建了一个变量名为 emptyArr 的空数组。

变量 arr1 创建数组的方式为完整的创建数组方式，开发中常用到方式1，即简写方式。

数组中的元素数据类型可以不同，实际开发中一个数组中更常用到的是保存相同类型的元素。

# 获取数组元素

数组是一个有序的集合，因此每个位置的元素都可以通过索引下标进行获取，索引下标依然是从0开始。

var arr = ['JavaScript', 'Java', 'Python'];
console.log(arr[0]); // JavaScript
console.log(arr[1]); // Java
console.log(arr[2]); // Python

# 新增修改数组元素

数组元素的新增和修改语法是相同的

var arr = ['JavaScript', 'Java', 'Python'];
arr[1] = 'CSS';
console.log(arr[2]);

arr[3] = 'Java';
console.log(arr[3]);

对应索引下标位置有值进行更新，没有值就进行新增。

上例中，索引下标1的位置已经有值，因此 arr[1] 的位置的值被更改为 CSS。索引下标3的位置没有值，因此 arr[3] 相当于在数组 arr 中新增了一个元素。

# 常用的数组属性和函数

数组是一种引用对象，创建一个数组对象后可以使用预定义的属性和方法，便于开发人员进行数据处理。

先对常用方法进行一个总结，后文会逐一进行学习。

序号	方法名	描述
1	length	获取数组长度
2	slice	截取数组一部分元素
3	unshift	在数组头部插入一个或多个元素
4	push	在数组尾部插入一个或多个元素
5	shift	删除数组第一个元素
6	pop	删除数组最后一个元素
7	sort	对数组元素排序
8	reverse	颠倒数组元素
9	join	将数组元素连接为字符串

（1）获取数组长度 length

语法为：

数组对象.length

var arr = ['JavaScript', 'Java', 'Python'];
console.log(arr.length);

输出

（2）截取数组的某个部分 slice

语法为

数组对象.slice(start, end);
数组对象.slice(start);

第一种写法包含2个参数，start 表示截取的开始索引位置，end 表示截取结束的索引位置，截取的范围为左闭右开 [start, end)。经过截取后返回一个新的数组。

第二种写法只有1个 start 参数，表示从索引为 start 的位置截取到数组最末尾，有点类似于字符串中的 substring 方法。

看一个例子。

var arr = new Array(1, 2, 3, 4, 5, 6, 7);
var partArr = arr.slice(3, 6);
console.log(partArr);

console.log(arr.slice(3));

输出

[4, 5, 6]

[4, 5, 6, 7]

上例 arr 从索引为3的位置开始截取，截取到索引位置为6的位置。第二个方法直接从索引3的位置截取到数组末尾。

（3）在数组头部添加元素 unshift

语法为

数组对象.unshift(元素1, 元素2, ..., 元素n);

var arr = new Array('java', 'php', 'python');
arr.unshift('kotlin');
console.log(arr);

输出

 ['kotlin', 'java', 'php', 'python']

这个方法的使用很简单，就是在数组头部插入多个元素。

（4）在数组尾部插入元素 push

语法

数组对象.push(元素1, 元素2, ..., 元素n);

看一个例子

var arr = new Array('java', 'php', 'python');
arr.push('c++', 'c', 'js');
console.log(arr.length);
console.log(arr);

输出

6
['java', 'php', 'python', 'c++', 'c', 'js']

（5）删除第一个数组元素 shift

语法为：

数组对象.shift()

看一个例子

var arr = new Array('java', 'php', 'python');
arr.shift();
console.log(arr.length);
console.log(arr);

输出

2
['php', 'python']

（6）删除数组最后一个元素 pop

语法为

数组对象.pop();

示例

var arr = new Array('java', 'php', 'python');
arr.pop();
console.log(arr.length);
console.log(arr);

输出

2
['java', 'php']

可以从上例中看出最后一个元素 python 被删除了。

（7）数组排序 sort

语法为

数组对象.sort(排序函数名);

看一个例子

var arr = new Array(3, 4, 2, 7, 8);
function asc(a, b) {
    return a - b;
}
function desc(a, b) {
    return b - a;
}
console.log(arr.sort(asc));
console.log(arr.sort(desc));

输出

[2, 3, 4, 7, 8]
[8, 7, 4, 3, 2]

通过这个方法可以看到一种新的语法，那就是函数也可以作为参数进行传递。注意在使用 sort 方法时只需要传入函数名称 asc 就行，千万不要写成 asc()。

（8）颠倒数组 reverse

语法为

数组对象.reverse();

看一个例子。

var arr = new Array(3, 4, 2, 7, 8);
console.log(arr.reverse());

输出

[8, 7, 2, 4, 3]

这个方法也很简单，就是将数组中的元素进行倒排。

（9）将数组元素连接为字符串 join

语法为

数组对象.join(连接符);

看一个例子

var arr = new Array(3, 4, 2, 7, 8);
console.log(arr.join());
console.log(arr.join(""));
console.log(arr.join(" "));
console.log(arr.join("-"));
console.log(arr.join("*"));

输出

3,4,2,7,8
34278
3 4 2 7 8
3-4-2-7-8
3*4*2*7*8

调用 join 方法不输出参数的时候默认连接符为英文逗号（,）。调用 join 方法输出一个空字符 "" 和 " " 得到的结果不同，后者会有空格。

← 对象字符串 →