JS数组Array及其用法 – JavaScript教程

上一章JavaScript教程请查看：JS switch…case分支语句

在本教程中，你将学习如何在JavaScript中创建和操作数组Array。

什么是数组

数组是复杂的变量,允许我们存储超过一个值或一组值在一单独的变量名称。JavaScript数组可以存储任何有效的价值,包括字符串、数字、对象、功能、甚至其他数组,因此它可以创建更复杂的数据结构,如一个对象数组或数组的数组。

假设你想要颜色的名称存储在你的JavaScript代码，存储颜色名称一个一分之一变量可能看起来像这样:

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

但是如果你需要将一个国家的州名或城市名存储在变量中会发生什么呢？这次不是3个而是100个，将它们分别存储在单独的变量中是相当困难和乏味的。此外，同时使用这么多变量并跟踪它们将是一项非常困难的任，这时数组就派上用场了。数组通过提供用于存储多个值或一组值的有序结构来解决这个问题。

创建一个数组

用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为止。5个元素的数组的索引范围是0到4。

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

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

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

获取数组的长度

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

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

遍历数组元素

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

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); // 打印: Red,Green,Blue,Yellow
document.write(colors.length); // 打印: 4

类似地，要在数组的开头添加新元素，可以使用unshift()方法，如下所示

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

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

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

从数组中删除元素

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

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

类似地，可以使用shift()方法从数组中删除第一个元素，该方法还返回shift后的值。这里有一个例子

var colors = ["Red", "Green", "Blue"];
var first = colors.shift();
 
document.write(first); // : Red
document.write(colors.length); // : 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); // 删除第一个元素
 
document.write(colors); // 打印: Green,Blue
document.write(removed); // 打印: Red (one item array)
document.write(removed.length); // 打印: 1
 
removed = colors.splice(1, 0, "Pink", "Yellow"); // 在位置1处插入两个
document.write(colors); // 打印: Green,Pink,Yellow,Blue
document.write(removed); // Empty array
document.write(removed.length); // 打印: 0
 
removed = colors.splice(1, 1, "Purple", "Voilet"); // 插入两个，删除1个
document.write(colors); //打印: Green,Purple,Voilet,Yellow,Blue
document.write(removed); // 打印: Pink (one item array)
document.write(removed.length); // 打印: 1

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

从数组创建字符串

在某些情况下，你可能只想通过连接数组的元素来创建一个字符串。为此，可以使用join()方法，此方法接受一个可选参数，该参数是在每个元素之间添加的分隔符字符串。如果省略了分隔符，那么JavaScript将默认使用逗号(，)。下面的例子展示了它是如何工作的:

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

还可以使用toString()将数组转换为逗号分隔的字符串，此方法不接受诸如join()之类的分隔符参数。这里有一个例子

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

提取数组的一部分

如果你想提取一个数组的一部分(即子数组)，但保持原始数组不变，你可以使用slice()方法，这个方法有两个参数: start index(开始提取的索引)和一个可选的end index(结束提取之前的索引)，比如arr.slice(startIndex endIndex)。这里有一个例子:

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

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

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

合并两个或多个数组

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

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
 
// 通过组合pets和wilds数组创建新数组
var animals = pets.concat(wilds); 
document.write(animals); // 打印: Cat,Dog,Parrot,Tiger,Wolf,Zebra

concat()方法可以接受任意数量的数组参数，因此可以从任意数量的其他数组创建数组，如下面的示例所示

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")); // 打印: 0
document.write(fruits.indexOf("Banana")); // 打印: 1
document.write(fruits.indexOf("Pineapple")); // 打印: -1

这两个方法还从index中接受一个可选的整数参数，该参数指定要在其中开始搜索的数组中的索引。这里有一个例子：

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
// 向前搜索，从-index开始
document.write(arr.indexOf(1, 2)); // 打印: 3
 
// 向后搜索，从索引开始
document.write(arr.lastIndexOf(1, 2)); // 打印: 0

还可以使用include()方法确定数组是否包含某个元素，这个方法使用与indexOf()和lastIndexOf()方法相同的参数，但是它返回的是真或假，而不是索引号。例如

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
document.write(arr.includes(1)); // 打印: true
document.write(arr.includes(6)); // 打印: false
document.write(arr.includes(1, 2)); // 打印: true
document.write(arr.includes(3, 4)); // 打印: 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); // 打印: 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); // 打印: 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); // 打印: 5,7
document.write(result.length); // 打印: 2