JavaScript 数组

Created: October-14, 2018

在本教程中，你将学习如何在 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 = ["John", "Wick", 32];

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

访问数组的元素

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

数组索引从零开始。这意味着数组的第一项存储在索引 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 运算符将返回 object。

获取数组的长度

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

从数组中删除元素

要从数组中删除最后一个元素，可以使用 pop() 方法。此方法返回弹出的值。这是一个例子：

var colors = ["Red", "Green", "Blue"];
var last = colors.pop();
 
document.write(last); // Prints: Blue
document.write(colors.length); // Prints: 2

同样，你可以使用 shift() 方法从数组中删除第一个元素。此方法还返回已移出的值。这是一个例子：

var colors = ["Red", "Green", "Blue"];
var first = colors.shift();
 
document.write(first); // Prints: Red
document.write(colors.length); // Prints: 2

提示： 在 push() 和 pop() 方法的运行速度比 unshift() 和 shift() 快。因为 push() 和 pop() 方法只是简单地增加，并在一个数组的末尾删除元素因此元素不动，而 unshift() 与 shift() 需要在整个数组的重建索引的数组的开始增加或者删除元素。

在任何位置添加或删除元素

splice() 方法是一种非常通用的数组方法，允许你使用语法 arr.splice(startIndex, deleteCount, elem1, ..., elemN) 在任何索引中添加或删除元素。

这个方法有三个参数：第一个参数是开始拼接数组的索引，它是必需的; 第二个参数是要删除的元素数（0 如果你不想删除任何元素，则使用它），它是可选的; 第三个参数是一组替换元素，它也是可选的。以下示例显示了它的工作原理：

var colors = ["Red", "Green", "Blue"];
var removed = colors.splice(0,1); // Remove the first element
 
document.write(colors); // Prints: Green,Blue
document.write(removed); // Prints: Red (one item array)
document.write(removed.length); // Prints: 1
 
removed = colors.splice(1, 0, "Pink", "Yellow"); // Insert two items at position one
document.write(colors); // Prints: Green,Pink,Yellow,Blue
document.write(removed); // Empty array
document.write(removed.length); // Prints: 0
 
removed = colors.splice(1, 1, "Purple", "Voilet"); // Insert two values, remove one
document.write(colors); //Prints: Green,Purple,Voilet,Yellow,Blue
document.write(removed); // Prints: Pink (one item array)
document.write(removed.length); // Prints: 1

splice() 方法返回已删除元素的数组，如果没有删除任何元素，则返回一个空数组，如上例所示。如果省略第二个参数，则删除从数组的开头到结尾的所有元素。不像 slice() 和 concat() 方法，splice() 方法修改它所调用的数组。

从数组创建字符串

在某些情况下，你可能只想通过连接数组的元素来创建字符串。为此，你可以使用 join() 方法。此方法采用可选参数，该参数是在每个元素之间添加的分隔符字符串。如果省略分隔符，则默认情况下 JavaScript 将使用逗号（,）。以下示例显示了它的工作原理：

var colors = ["Red", "Green", "Blue"];
 
document.write(colors.join()); // Prints: Red,Green,Blue
document.write(colors.join("")); // Prints: RedGreenBlue
document.write(colors.join("-")); // Prints: Red-Green-Blue
document.write(colors.join(", ")); // Prints: Red, Green, Blue

你还可以使用 toString() 将数组转换为逗号分隔的字符串。此方法不接受分隔符参数 join() 。这是一个例子：

var colors = ["Red", "Green", "Blue"];
document.write(colors.toString()); // Prints: Red,Green,Blue

提取数组的一部分

如果要提取数组的一部分（即子数组）但保持原始数组完整，则可以使用 slice() 方法。此方法需要 2 个参数：start index（开始提取的索引）和可选的 end index（结束提取之前的索引），如 arr.slice(startIndex, endIndex) 。这是一个例子：

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var subarr = fruits.slice(1, 3);
document.write(subarr); // Prints: Banana,Mango

如果省略 endIndex 参数，则提取到数组末尾的所有元素。你还可以指定负索引或偏移量 - 在这种情况下， slice() 方法从数组的末尾提取元素，而不是从开头提取。例如：

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

合并两个或更多数组

concat() 方法可用于合并或组合两个或更多个数组。此方法不会更改现有数组，而是返回新数组。例如：

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
 
// Creating new array by combining pets and wilds arrays
var animals = pets.concat(wilds); 
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra

concat() 方法可以使用任意数量的数组参数，因此你可以从任意数量的其他数组创建数组，如以下示例所示：

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
var bugs = ["Ant", "Bee"];
 
// Creating new array by combining pets, wilds and bugs arrays
var animals = pets.concat(wilds, bugs); 
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee

通过数组搜索

如果要在数组中搜索特定值，可以使用 indexOf() 和 lastIndexOf() 。如果找到该值，则两个方法都返回表示数组元素的索引。如果未找到该值，则返回 -1。indexOf() 方法返回找到的第一个，而 lastIndexOf() 返回找到的最后一个。

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

两种方法还接受可选的整数参数 from index，该参数指定数组中开始搜索的索引。这是一个例子：

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
// Searching forwards, starting at from- index
document.write(arr.indexOf(1, 2)); // Prints: 3
 
// Searching backwards, starting at from index
document.write(arr.lastIndexOf(1, 2)); // Prints: 0

你还可以使用 includes() 方法来确定数组是否包含某个元素。此方法采用 indexOf() 与 lastIndexOf() 方法相同的参数，但它返回 true 或 false 代替索引。例如：

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
document.write(arr.includes(1)); // Prints: true
document.write(arr.includes(6)); // Prints: false
document.write(arr.includes(1, 2)); // Prints: true
document.write(arr.includes(3, 4)); // Prints: false

如果要根据特定条件搜索数组，则可以使用 ES6 中新引入的 JavaScript 方法 find() 。此方法返回数组中满足提供的测试函数的第一个元素的值。否则它会返回 undefined。

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.find(function(element) {
  return element > 4;
});
document.write(result); // Prints: 5

还有一个同 find() 方法相似的是 findIndex() 方法，它返回一个检索到的元素的索引数组，而不是它的值，例如：

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.findIndex(function(element) {
  return element > 6;
});
document.write(result); // Prints: 8

find() 方法仅查找满足所提供的测试函数的第一个元素。但是，如果要查找所有匹配的元素，可以使用 filter() 方法。

filter() 方法创建一个新数组，其中包含成功通过给定测试的所有元素。以下示例将向你展示这实际上是如何工作的：

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.filter(function(element) {
  return element > 4;
});
document.write(result); // Prints: 5,7
document.write(result.length); // Prints: 2