如何在JavaScript中使用数组方法：访问器方法

介绍

JavaScript 数组是一种由元素列表组成的数据类型。有许多有用的内置方法可以在 JavaScript 中处理数组。修改原始数组的方法称为 mutator 方法，返回新值或表示的方法称为 accessor 方法。在本教程中，我们将重点介绍访问器方法。

为了充分利用本教程，您应该熟悉数组的创建、索引、修改和循环，您可以在教程 Understanding Arrays in JavaScript 中查看这些内容。

本教程将介绍连接数组、将数组转换为字符串、将数组的一部分复制到新数组以及查找数组索引的方法。

注意： 数组方法正确写为 Array.prototype.method()，因为 Array.prototype 指的是 Array 对象本身。为简单起见，我们将简单地将名称列为 method()。

连接（）

concat() 方法将两个或多个数组合并在一起形成一个新数组。

在下面的示例中，我们将创建两个贝类类型数组并将它们组合成一个新数组。

// Create arrays of monovalves and bivalves
let monovalves = [ "abalone", "conch" ];
let bivalves = [ "oyster", "mussel", "clam" ];

// Concatenate them together into shellfish variable
let shellfish = monovalves.concat(bivalves);

调用新数组后，我们会看到它由两个原始数组的组合组成：

shellfish;

Output[ 'abalone', 'conch', 'oyster', 'mussel', 'clam' ]

concat() 方法可以采用多个参数，有效地允许您使用单个方法将多个数组连接在一起。

加入（）

join() 方法将数组的所有元素转换为新字符串。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

如果没有给出参数，join() 的输出将是一个逗号分隔的字符串，没有额外的空格。

// Join the elements of an array into a string
let fishString = fish.join();

fishString;

Output'piranha,barracuda,koi,eel'

为了包含空格或其他分隔符，您可以将分隔符字符串作为参数添加到 join() 方法。此参数将包含您想要的每个数组元素之间的分隔符。

// Join the elements of an array into a string
let fishString = fish.join(', ');

fishString;

Output'piranha, barracuda, koi, eel'

在上面的示例中，用空格编写 ', ' 以更易读的方式分隔数组项。作为参数提供的空字符串将完全删除默认逗号。

片（）

slice() 方法将数组的一部分复制到新数组中。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

假设我们想将数组中的最后两项复制到一个新数组中。我们将从我们想要的第一个元素的索引号开始，即 2 对应 koi。我们将以索引号结束我们想要的最后一个元素。因为最后一个元素 eel 的索引号为 3，我们将放置 4。

// Slice a new array from 2 to 5
let fishWithShortNames = fish.slice(2, 4);

fishWithShortNames;

Output[ 'koi', 'eel' ]

在这种特殊情况下，由于 eel 是数组中的最后一项，因此第二个参数实际上是不必要的。如果没有提供第二个参数，slice() 将从第一个索引开始并在数组末尾停止。

// Slice a new array from 2 to the end of the array
let fishWithShortNames = fish.slice(2);

fishWithShortNames;

Output[ 'koi', 'eel' ]

slice() 不要与 mutator 方法 splice() 混淆，后者可以从原始数组中添加或删除项目。

指数（）

indexOf() 方法返回元素第一个实例的索引号。

在下面的示例中，我们有一个字符串，其中 barracuda 列出了两次。

let fish = [ "piranha", "barracuda", "koi", "barracuda" ];

我们将使用 indexOf() 来查找第一个实例。

// Find the first instance of an element
fish.indexOf("barracuda");

Output1

如果给定的参数是数组中不存在的值，控制台将返回 -1。

fish.indexOf("shark");

Output-1

indexOf() 方法在包含许多项的数组中特别有用。

最后索引（）

lastIndexOf() 方法返回元素最后一个实例的索引号。

我们可以在 indexOf() 中的同一个示例上进行测试，其中包括两次 barracuda。

let fish = [ "piranha", "barracuda", "koi", "barracuda" ];

// Find the last instance of an element
fish.lastIndexOf("barracuda");

Output3

lastIndexOf() 将从数组末尾开始搜索并返回它找到的第一个索引号。

结论

在本教程中，我们回顾了 JavaScript 中主要的内置访问器数组方法。访问器方法创建数组的新副本或表示，而不是改变或修改原始数组。

我们学习了如何将数组连接在一起，将它们端到端组合，以及如何将数组转换为逗号分隔的字符串。我们还学习了如何将数组的一部分复制到一个新数组中，并找到数组中给定元素的第一个和最后一个索引。

要复习数组的基础知识，请阅读 Understanding Arrays in JavaScript。要查看所有数组方法的完整列表，请查看 Mozilla Developer Network 上的 Array 参考。