HTML代码调用JS里的数组,如何在JavaScript中使用数组方法：访问器方法

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

为了充分利用本教程，您应该对数组的创建、索引、修改和循环有一定的了解，您可以在了解JavaScript中的数组的教程中查看这些知识。

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

注意：数组方法正确写出Array.prototype.method()，就像Array.prototype引用Array对象本身一样。为简单起见，我们只需将名称列为method()。

concat()

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;

输出：[ 'abalone', 'conch', 'oyster', 'mussel', 'clam' ]

concat()方法可以接受多个参数，有效地允许您用一个方法连接多个数组。

join()

join()方法将数组的所有元素转换为新字符串。let fish = [ "piranha", "barracuda", "koi", "eel" ];

如果没有给出参数，join()的输出将是逗号分隔的字符串，没有额外的空格。// Join the elements of an array into a string

let fishString = fish.join();

fishString;

输出：'piranha,barracuda,koi,eel'

为了包含空格或其他分隔符，可以将分隔符字符串作为参数添加到join()方法中。此参数将包含您希望在每个数组元素之间使用的分隔符。// Join the elements of an array into a string

let fishString = fish.join(', ');

fishString;

输出：'piranha, barracuda, koi, eel'

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

slice()

slice()方法将数组的一部分复制到一个新数组中。let fish = [ "piranha", "barracuda", "koi", "eel" ];

假设我们想将数组中的最后两项复制到一个新数组中。我们将从我们想要的第一个元素的索引号开始，对于koi，索引号是2。最后一个元素后面是索引号。因为最后一个元素eel的索引号是3，所以我们输入4。// Slice a new array from 2 to 5

let fishWithShortNames = fish.slice(2, 4);

fishWithShortNames;

输出：[ 'koi', 'eel' ]

在本例中，由于eel是数组中的最后一项，所以第二个参数实际上是不必要的。如果没有提供第二个参数，slice()将从第一个索引开始，并在数组的末尾停止。// Slice a new array from 2 to the end of the array

let fishWithShortNames = fish.slice(2);

fishWithShortNames;

输出：[ 'koi', 'eel' ]

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

indexOf()

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

在下面的例子中，我们有一个字符串，其中barracuda被列出两次。let fish = [ "piranha", "barracuda", "koi", "barracuda" ];

我们将使用indexOf()来查找第一个实例。// Find the first instance of an element

fish.indexOf("barracuda");

输出：1

如果给定的参数是数组中不存在的值，控制台将返回-1。fish.indexOf("shark");

输出：-1

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

lastIndexOf()

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

我们可以对indexOf()中的相同示例进行测试，其中包含两次barracuda。let fish = ["piranha", "barracuda", "koi", "barracuda"];

// Find the last instance of an element

fish.lastIndexOf("barracuda");

输出：3

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

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

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