介绍
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 参考。