JavaScript 数组
在本教程中，您将学习如何在 JavaScript 中创建和操作数组。
什么是数组
数组是复杂的变量，允许我们在一个变量名下存储多个值或一组值。 JavaScript 数组可以存储任何有效值，包括字符串、数字、对象、函数，甚至其他数组，从而可以创建更复杂的数据结构，例如对象数组或数组数组。
假设您想在 JavaScript 代码中存储颜色名称。 将颜色名称一一存储在变量中可能如下所示：
var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";但是如果您需要将一个地区的州或城市名称存储在变量中会发生什么，而这一次不仅仅是三个可能是一百个。 将它们中的每一个存储在一个单独的变量中是非常困难和无聊的。 此外，同时使用这么多变量并跟踪它们将是一项非常困难的任务。 这里数组开始发挥作用。 数组通过提供一个有序的结构来存储多个值或一组值来解决这个问题。
创建数组
在 JavaScript 中创建数组的最简单方法是将逗号分隔的值列表括在方括号 ([]) 中，如以下语法所示：
也可以使用 Array() 构造函数创建数组，如以下语法所示。 但是，为了简单起见，建议使用以前的语法。
以下是一些使用数组字面量语法创建的数组示例：
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 运算符将为数组返回"对象"。
获取数组的长度
length 属性返回数组的长度，即数组中包含的元素的总数。 数组长度总是大于其任何元素的索引。
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.length); // Prints: 5遍历数组元素
You can use for loop to access each element of an array in sequential order, like this:
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// 遍历数组元素
for(var i = 0; i < fruits.length; i++) {
document.write(fruits[i] + "<br>"); // 打印数组元素
}ECMAScript 6 引入了一种更简单的方法来迭代数组元素，即 for-of 循环。 在这个循环中，您不必初始化和跟踪循环计数器变量 (i)。
这是使用 for-of 循环重写的相同示例：
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// 遍历数组元素
for(var fruit of fruits) {
document.write(fruit + "<br>"); // 打印数组元素
}您还可以使用 for-in 循环遍历数组元素，如下所示：
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// 循环遍历数组中的所有元素
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, ..., 元素）。
该方法需要三个参数：第一个参数是开始拼接数组的索引，它是必需的； 第二个参数是要移除的元素个数（如果你不想移除任何元素，使用0），它是可选的； 第三个参数是一组替换元素，也是可选的。 下面的例子展示了它是如何工作的：
var colors = ["Red", "Green", "Blue"];
var removed = colors.splice(0,1); // 删除第一个元素
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"); // 在位置一插入两个项目
document.write(colors); // Prints: Green,Pink,Yellow,Blue
document.write(removed); // 空数组
document.write(removed.length); // Prints: 0
removed = colors.splice(1, 1, "Purple", "Voilet"); // 插入两个值，删除一个
document.write(colors); //打印: Green,Purple,Voilet,Yellow,Blue
document.write(removed); // Prints: Pink (one item array)
document.write(removed.length); // Prints: 1splice() 方法返回一个包含已删除元素的数组，如果没有删除任何元素，则返回一个空数组，如上例所示。 如果省略第二个参数，则从数组的开头到结尾的所有元素都将被删除。 与 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 个参数：开始索引（开始提取的索引）和可选的结束索引（结束提取的索引），如 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"];
// 通过组合 pets 和 wilds 数组创建新数组
var animals = pets.concat(wilds);
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebraconcat() 方法可以接受任意数量的数组参数，因此您可以从任意数量的其他数组创建一个数组，如下例所示：
var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
var bugs = ["Ant", "Bee"];
// 通过组合 pets、wilds 和 bugs 数组创建新数组
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];
// 向前搜索，从 from-index 开始
document.write(arr.indexOf(1, 2)); // Prints: 3
// 向后搜索，从索引开始
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: 8find() 方法仅查找满足提供的测试功能的第一个元素。 但是，如果您想找出所有匹配的元素，您可以使用 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