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

譯文 | 楊小愛

那么，在今天的教程中，我們將一起來學(xué)習(xí)數(shù)組，了解 JavaScript 數(shù)組及其基本操作。

JavaScript 數(shù)組簡介

在 JavaScript 中，數(shù)組是一個(gè)有序的值列表。每個(gè)值稱為由索引指定的元素。

JavaScript 數(shù)組具有以下特征：

首先，數(shù)組可以保存不同類型的值。例如，您可以擁有一個(gè)存儲數(shù)字和字符串以及布爾值的數(shù)組。

其次，數(shù)組的長度是動態(tài)調(diào)整大小和自動增長的。換句話說，您不需要預(yù)先指定數(shù)組大小。

創(chuàng)建 JavaScript 數(shù)組

JavaScript 為您提供了兩種創(chuàng)建數(shù)組的方法。 

第一種是使用Array構(gòu)造函數(shù)，如下所示：

let scores = new Array();

scores 數(shù)組為空，即它不包含任何元素。

如果您知道數(shù)組將容納的元素?cái)?shù)量，您可以創(chuàng)建一個(gè)具有初始大小的數(shù)組，如下例所示：

let scores = Array(10);

要創(chuàng)建包含某些元素的數(shù)組，請將元素用逗號分隔的列表傳遞到 Array() 構(gòu)造函數(shù)中。

例如，以下scores創(chuàng)建了五個(gè)元素（或數(shù)字）的數(shù)組：

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

需要注意的是，如果您使用數(shù)組構(gòu)造函數(shù)創(chuàng)建一個(gè)數(shù)組并傳入一個(gè)數(shù)字，那么您將創(chuàng)建一個(gè)具有初始大小的數(shù)組。

但是，當(dāng)您將其他類型的值（如字符串）傳遞給 Array() 構(gòu)造函數(shù)時(shí)，您將創(chuàng)建一個(gè)包含該值元素的數(shù)組。例如：

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 允許您在使用數(shù)組構(gòu)造函數(shù)時(shí)省略 new 運(yùn)算符。例如，以下語句創(chuàng)建了artists數(shù)組。

let artists = Array();

實(shí)際上，您很少會使用 Array() 構(gòu)造函數(shù)來創(chuàng)建數(shù)組。

創(chuàng)建數(shù)組的更優(yōu)選方法是使用數(shù)組文字表示法：

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

數(shù)組文字形式使用方括號 [] 來包裝以逗號分隔的元素列表。

以下示例創(chuàng)建包含三個(gè)字符串的顏色數(shù)組：

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

要創(chuàng)建一個(gè)空數(shù)組，請使用方括號而不指定任何元素，如下所示：

let emptyArray = [];

訪問 JavaScript 數(shù)組元素

JavaScript 數(shù)組是從零開始索引的。換句話說，數(shù)組的第一個(gè)元素從索引 0 開始，第二個(gè)元素從索引 1 開始，依此類推。

要訪問數(shù)組中的元素，請?jiān)诜嚼ㄌ?[] 中指定索引：

arrayName[index]

下面顯示了如何訪問mountains數(shù)組的元素：

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' ]

獲取數(shù)組大小

通常，length數(shù)組的屬性返回元素的數(shù)量。以下示例顯示了如何使用該length屬性：

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

數(shù)組的基本操作

下面解釋一些對數(shù)組的基本操作。在接下來的教程中，您將學(xué)習(xí)諸如 map()、filter() 和 reduce() 之類的高級操作。

1) 在數(shù)組末尾添加一個(gè)元素

要將元素添加到數(shù)組的末尾，請使用 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) 在數(shù)組的開頭添加一個(gè)元素

要將元素添加到數(shù)組的開頭，請使用以下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) 從數(shù)組的末尾移除一個(gè)元素

要從數(shù)組末尾刪除元素，請使用以下pop()方法：

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

輸出：

Baltic Sea

4) 從數(shù)組的開頭刪除一個(gè)元素

要從數(shù)組的開頭刪除元素，請使用以下shift()方法：

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

輸出：

Black Sea

5) 查找數(shù)組中元素的索引

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

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

6) 檢查一個(gè)值是否是一個(gè)數(shù)組

要檢查值是否為數(shù)組，請使用Array.isArray()方法：

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

總結(jié)

• 在 JavaScript 中，數(shù)組是值的順序列表。每個(gè)值稱為由索引指定的元素。

• 數(shù)組可以保存混合類型的值。

• JavaScript 數(shù)組是動態(tài)的。它們根據(jù)需要增長或縮小。

今天的數(shù)組的內(nèi)容到這里就結(jié)束了，感謝您的閱讀，希望對您有幫助。

如果您還想學(xué)習(xí)前面第五章字符串的內(nèi)容，請點(diǎn)擊下文鏈接進(jìn)行學(xué)習(xí)。

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

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

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

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

【JavaScript 教程】第五章 字符串07— indexOf()：獲取字符串中子字符串第一次出現(xiàn)的索引

【JavaScript 教程】第五章 字符串06— split()：將字符串拆分為子字符串?dāng)?shù)組

【JavaScript 教程】第五章 字符串05— concat()：將多個(gè)字符串連接成一個(gè)新字符串

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

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

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

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

學(xué)習(xí)更多技能

請點(diǎn)擊下方公眾號