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

介绍

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

为了充分利用本教程,您应该熟悉创建,索引,修改和循环数组,您可以在“ 了解JavaScript中的数组”一节中查看。

本教程将介绍将串联数组,将数组转换为字符串的方法,将数组的部分复制到新数组,并找到数组的索引。

注意: Array方法被正确地写成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;
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" ];

假设我们想将数组中的最后两个项目复制到一个新的数组。 我们先从我们想要的第一个元素的索引号开始,对于koi2 我们将以跟随我们想要的最后一个元素的索引号结束。 因为最后一个元素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()

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

我们可以在indexOf()同样的例子进行测试,其中包括barracuda两次。

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

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

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

结论

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

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

要查看数组的基础知识,请阅读JavaScript中的“了解数组” 要查看所有数组方法的完整列表,请查看Mozilla Developer Network上Array引用

赞(52) 打赏
未经允许不得转载:优客志 » 系统运维
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏