在本文中，您将学习如何在 JavaScript 中创建和操作数组。

什么是数组

数组是复杂的变量，允许我们在一个变量名下存储多个值或一组值。JavaScript 数组可以存储任何有效值，包括字符串、数字、对象、函数，甚至其他数组，因此可以创建更复杂的数据结构，例如对象数组或数组数组。

假设您想在 JavaScript 代码中存储颜色的名称。将颜色名称一一存储在变量中可能如下所示：

var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";

但是如果您需要将一个国家的城市名称存储在变量中会发生什么，这一次不仅仅是三个可能是一百个。将它们中的每一个存储在一个单独的变量中是非常困难和无聊的。此外，同时使用这么多变量并跟踪它们将是一项非常困难的任务。这里数组开始发挥作用。数组通过提供用于存储多个值或一组值的有序结构来解决这个问题。

创建一个数组

在 JavaScript 中创建数组的最简单方法是将逗号分隔的值列表括在方括号 ( []) 中，如以下语法所示：

var myArray = [ element0 , element1 , ..., elementN ];

也可以使用Array()构造函数创建数组，如以下语法所示。但是，为了简单起见，建议使用以前的语法。

var myArray = new Array( element0 , element1 , ..., elementN );

以下是使用数组字面量语法创建的数组的一些示例：

例子

var colors = ["Red", "Green", "Blue"]; 
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["jk", "dy", 24];

注意：数组是值的有序集合。数组中的每个值称为一个元素，每个元素在数组中都有一个数字位置，称为它的索引。

访问数组的元素

数组元素可以通过使用方括号表示法的索引来访问。索引是一个数字，表示元素在数组中的位置。

数组索引是从零开始的。这意味着数组的第一项存储在索引 0，而不是 1，第二项存储在索引 1，依此类推。数组索引从 0 开始，直到元素数减 1。因此，由五个元素组成的数组的索引从 0 到 4。

以下示例将向您展示如何通过索引获取单个数组元素。

例子

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits[0]); // Prints: Apple
document.write(fruits[1]); // Prints: Banana
document.write(fruits[2]); // Prints: Mango
document.write(fruits[fruits.length - 1]); // Prints: Papaya

注意：在 JavaScript 中，数组实际上只是一种特殊类型的对象，它以数字索引作为键。运算符将返回数组的typeof“对象”。

获取数组的长度

该length属性返回数组的长度，即数组中包含的元素的总数。数组长度总是大于其任何元素的索引。

例子

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.length); // Prints: 5

遍历数组元素

您可以使用for循环按顺序访问数组的每个元素，如下所示：

例子

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(var i = 0; i < fruits.length; i++) {    
    document.write(fruits[i] + "<br>"); // Print array element
}

ECMAScript 6 引入了一种更简单的方法来迭代数组元素，即for-of循环。在这个循环中，您不必初始化和跟踪循环计数器变量 ( i)。

for-of这是使用循环重写的相同示例：

例子

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(var fruit of fruits) {    
    document.write(fruit + "<br>"); // Print array element
}

您还可以使用循环遍历数组元素for-in，如下所示：

例子

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i in fruits) {  
    document.write(fruits[i] + "<br>");
}

注意：for-in循环不应用于迭代索引顺序很重要的数组。该for-in循环针对迭代对象的属性进行了优化，您最好使用for带有数字索引或循环的for-of循环。

向数组添加新元素

要在数组末尾添加新元素，只需使用该push()方法，如下所示：

例子

var colors = ["Red", "Green", "Blue"]; 
colors.push("Yellow");
 
document.write(colors); // Prints: Red,Green,Blue,Yellow
document.write(colors.length); // Prints: 4

同样，要在数组的开头添加一个新元素，请使用该unshift()方法，如下所示：

例子

var colors = ["Red", "Green", "Blue"]; 
colors.unshift("Yellow");
 
document.write(colors); // Prints: Yellow,Red,Green,Blue
document.write(colors.length); // Prints: 4

您还可以使用push()方法和unshift()一次添加多个元素，如下所示：

例子

var colors = ["Red", "Green", "Blue"];
colors.push("Pink", "Voilet");
colors.unshift("Yellow", "Grey");
 
document.write(colors); // Prints: Yellow,Grey,Red,Green,Blue,Pink,Voilet
document.write(colors.length); // Prints: 7