英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

那么，在今天的教程中，我们将一起来学习数组，了解 JavaScript 数组及其基本操作。

JavaScript 数组简介

在 JavaScript 中，数组是一个有序的值列表。每个值称为由索引指定的元素。

JavaScript 数组具有以下特征：

首先，数组可以保存不同类型的值。例如，您可以拥有一个存储数字和字符串以及布尔值的数组。

其次，数组的长度是动态调整大小和自动增长的。换句话说，您不需要预先指定数组大小。

创建 JavaScript 数组

JavaScript 为您提供了两种创建数组的方法。 

第一种是使用Array构造函数，如下所示：

let scores = new Array();

scores 数组为空，即它不包含任何元素。

如果您知道数组将容纳的元素数量，您可以创建一个具有初始大小的数组，如下例所示：

let scores = Array(10);

要创建包含某些元素的数组，请将元素用逗号分隔的列表传递到 Array() 构造函数中。

例如，以下scores创建了五个元素（或数字）的数组：

let scores = new Array(9,10,8,7,6);

需要注意的是，如果您使用数组构造函数创建一个数组并传入一个数字，那么您将创建一个具有初始大小的数组。

但是，当您将其他类型的值（如字符串）传递给 Array() 构造函数时，您将创建一个包含该值元素的数组。例如：

let athletes = new Array(3); // creates an array with initial size 3let scores = new Array(1, 2, 3); // create an array with three numbers 1,2 3let signs = new Array('Red'); // creates an array with one element 'Red'

JavaScript 允许您在使用数组构造函数时省略 new 运算符。例如，以下语句创建了artists数组。

let artists = Array();

实际上，您很少会使用 Array() 构造函数来创建数组。

创建数组的更优选方法是使用数组文字表示法：

let arrayName = [element1, element2, element3, ...];

数组文字形式使用方括号 [] 来包装以逗号分隔的元素列表。

以下示例创建包含三个字符串的颜色数组：

let colors = ['red', 'green', 'blue'];

要创建一个空数组，请使用方括号而不指定任何元素，如下所示：

let emptyArray = [];

访问 JavaScript 数组元素

JavaScript 数组是从零开始索引的。换句话说，数组的第一个元素从索引 0 开始，第二个元素从索引 1 开始，依此类推。

要访问数组中的元素，请在方括号 [] 中指定索引：

arrayName[index]

下面显示了如何访问mountains数组的元素：

let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];
console.log(mountains[0]); // 'Everest'console.log(mountains[1]); // 'Fuji'console.log(mountains[2]); // 'Nanga Parbat'

要更改元素的值，请将该值分配给元素，如下所示：

let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];mountains[2] = 'K2';
console.log(mountains);

输出：

[ 'Everest', 'Fuji', 'K2' ]

获取数组大小

通常，length数组的属性返回元素的数量。以下示例显示了如何使用该length属性：

let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];console.log(mountains.length); // 3

数组的基本操作

下面解释一些对数组的基本操作。在接下来的教程中，您将学习诸如 map()、filter() 和 reduce() 之类的高级操作。

1) 在数组末尾添加一个元素

要将元素添加到数组的末尾，请使用 push() 方法：

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];seas.push('Red Sea');
console.log(seas);

输出：

[ 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea', 'Red Sea' ]

2) 在数组的开头添加一个元素

要将元素添加到数组的开头，请使用以下unshift()方法：

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];seas.unshift('Red Sea');
console.log(seas);

输出：

[ 'Red Sea', 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea' ]

3) 从数组的末尾移除一个元素

要从数组末尾删除元素，请使用以下pop()方法：

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];const lastElement = seas.pop();console.log(lastElement);

输出：

Baltic Sea

4) 从数组的开头删除一个元素

要从数组的开头删除元素，请使用以下shift()方法：

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];const firstElement = seas.shift();
console.log(firstElement);

输出：

Black Sea

5) 查找数组中元素的索引

要查找元素的索引，请使用以下indexOf()方法：

let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];let index = seas.indexOf('North Sea');
console.log(index); // 2

6) 检查一个值是否是一个数组

要检查值是否为数组，请使用Array.isArray()方法：

console.log(Array.isArray(seas)); // true

总结

• 在 JavaScript 中，数组是值的顺序列表。每个值称为由索引指定的元素。

• 数组可以保存混合类型的值。

• JavaScript 数组是动态的。它们根据需要增长或缩小。

今天的数组的内容到这里就结束了，感谢您的阅读，希望对您有帮助。

如果您还想学习前面第五章字符串的内容，请点击下文链接进行学习。

【JavaScript 教程】第五章 字符串11— includes()：检查字符串是否包含子字符串

【JavaScript 教程】第五章 字符串10— slice()：提取字符串的一部分

【JavaScript 教程】第五章 字符串09— substring()：从字符串中提取子字符串

【JavaScript 教程】第五章 字符串08— lastIndexOf()：查找字符串中子字符串最后一次出现的索引

【JavaScript 教程】第五章 字符串07— indexOf()：获取字符串中子字符串第一次出现的索引

【JavaScript 教程】第五章 字符串06— split()：将字符串拆分为子字符串数组

【JavaScript 教程】第五章 字符串05— concat()：将多个字符串连接成一个新字符串

【JavaScript 教程】第五章 字符串04— padStart() 和 padEnd()

【JavaScript 教程】第五章 字符串03— trim()、trimStart() 和 trimEnd()

【JavaScript 教程】第五章 字符串02— 字符串类型

【JavaScript 教程】第五章 字符串01— JavaScript 字符串

学习更多技能

请点击下方公众号