JavaScript中的数组访问器方法及实例解析

68 阅读4分钟

在JavaScript中,有几个内置的方法在处理数组的时候非常有用,比如修改实际数组的方法被称为突变器方法。而不修改主数组/原数组,而是在原数组的基础上返回一些新的数组表示的方法被称为访问器方法。在这篇文章中,我们将介绍各种数组访问器方法,如concat(), slice(), indexOf(), filter(), 和lastIndexOf()方法。

JavaScript中的concat()方法

在JavaScript中,concat方法是用来连接多个数组的,其结果是返回一个新的数组。让我们考虑一个例子,我们创建了两个数组,并在第三个数组中连接它们,看看下面给出的代码,了解**"concat() "** 方法在JavaScript中是如何工作的。

const Array1 = [ 5,10,15,20,25 ];

const Array2 = [ 30,35,40,45,50 ];

const Resultant_Array = Array1.concat(Array2);

console.log("The resultant array is : ", Resultant_Array);

在上面给出的代码中,结果数组连接了前两个数组。

console.log函数被用来在浏览器的控制台产生结果数组的输出。

该输出验证了结果数组结合了 "array1 "和 "array2 "的元素。

JavaScript中的join()方法

在JavaScript中,**"join() "方法通过连接一个字符串中的所有数组元素,并以逗号", "**分开,返回一个新的字符串。

const Array1 = [ '5','10','15','20','25' ];

const Resultant_Array = Array1.join();

console.log("The resultant array using Join method is : ",Resultant_Array);

这里我们把array1的值作为字符串值,上面给出的代码的JavaScript实现将是。

在输出中,你会发现**"join"**() 函数返回一个用逗号分隔的字符串。

在JavaScript中,任何人都可以用他们选择的任何其他符号来分隔字符串元素;假设我们想用**"|"**来代替逗号,那么我们就用它来分隔。

const Array1 = [ '5','10','15','20','25' ];

const Resultant_Array = Array1.join(‘|’);

console.log("The resultant array using Join method is: ", Resultant_Array);

我们将在JavaScript中实现上述代码为:

结果的输出将是:

在JavaScript中的filter()方法

在JavaScript中,"filter() "方法被用来在某些条件的基础上过滤一个数组。例如,我们想从一个数组中过滤正数,在JavaScript中的代码是。

const all_numbers = [5,-10,15,-20,-25,30];

const Positive_only = all_numbers.filter(function(number){

return number >= 0;

});

console.log(Positive_only);

所以,在这个例子中,我们有一个由正数和负数组成的数组,我们想过滤这个数组,只显示正数。所以我们设置了一个条件,将检查 "数字是否大于或等于0",作为一个结果。

我们的输出显示,"filter() "方法只打印了正数。

JavaScript中的slice()方法

JavaScript利用 "slice() "方法将数组的某些部分复制到某个新的数组中,它接受两个可选参数:起始索引和最后一个索引。让我们考虑一种情况,我们只想得到数组的前三个元素,我们将使用slice方法来完成这个任务。最后的索引必须是 "n+1 "的索引,这意味着如果你想得到索引0到索引2之间的值,那么你必须把最后的索引写成'3'。

const Array1 = [ 5,10,15,20,25 ];

const Resultant_Array = Array1.slice(0,3);

console.log("The resultant array is : ", Resultant_Array);

这里,我们把第一个索引作为0,把最后一个索引写成3,slice方法将排除最后一个索引'3',它将只考虑索引0、索引1和索引2的数组元素。

上述程序的输出将是:

JavaScript中的indexOf()方法

JavaScript利用indexOf方法来寻找一个元素在数组中的出现,如果在数组中没有找到该元素,它将返回-1。此外,如果一个数组有两次相同的元素,那么**"indexOf "方法将返回第一次出现的位置。请看下面的代码,了解"indexOf "**方法的工作原理。

const Array1 = [ 5,10,15,15,20,25 ];

const Resultant_Array = Array1.indexOf(15);

console.log("The resultant array is : ", Resultant_Array);

indexOf方法的JavaScript实现将是:

上面给出的代码的输出将验证 "indexOf "方法返回搜索到的元素的第一个实例。

JavaScript中的lastIndexOf()方法

JavaScript利用**"lastindexOf "**方法来寻找一个元素在数组中的最后出现,当这个方法在数组中找不到一个元素时,将返回-1。

const Array1 = [ 5,10,15,15,20,25 ];

const Resultant_Array = Array1.lastIndexOf(15);

console.log("You searched for array index : ", Resultant_Array);

上述代码的实现将是:

在Array1中,'15'重复出现了两次,所以**"lastIndexOf "**方法将返回'15'最后出现的索引。

JavaScript中的includes()方法

JavaScript使用**"includes() "**方法来搜索数组中的任何元素,其结果将返回一个布尔值。

const Array1 = [ 5,10,15,15,20,25 ];

const Resultant_Array = Array1.includes(15);

console.log("Searched value found : ", Resultant_Array);

这里我们使用 "includes() "方法搜索了'15'。

由于'15'在数组中存在,"includes() "方法将返回输出真。

结论

数组访问器方法对数组进行了一些操作,结果是它们在JavaScript中返回了一个新的增强表示。在这篇文章中,我们通过考虑一些例子详细了解了这些方法。此外,我们在JavaScript中实现了每个方法,并注意到每个方法的预期输出。这篇文章将帮助读者在JavaScript中实现内置的数组访问器方法。