15个你应该掌握的JavaScript数组方法

一时失言乱红尘 2022-08-28 10:59 145阅读 0赞

![dc5eabfe26df70e5df96e4898502cf05.png][]

英文 | https://medium.com/@sujeetmishraofficial/15-javascript-array-methods-you-should-master-today-1f21a14cfc8a

翻译 | 杨小二

**什么是数组方法？**

数组方法是 JavaScript 内置的函数，可以应用于数组。每种方法都有一个独特的函数，可以对数组执行更改或计算，从而使你无需从头开始编写常用函数。

JavaScript 中的数组方法使用附加到数组变量的点符号运行。因为它们只是 JavaScript 函数，所以它们总是以括号结尾，括号可以容纳可选参数。

这是一个附加到名为 myArray 的简单数组的方法。

这些示例将假设你知道 javascript 是什么以及它是如何工作的这些基础知识。如果你不知道也没关系，我们都在这里学习和成长。

现在就让我们深入挖掘这15种强大的数组方法吧！

**1、Array.push()**

**它的作用：**push() 获取你的数组并将一个或多个元素添加到数组的末尾，然后返回数组的新长度。此方法将修改你现有的数组。

通过运行 push() 将数字 20 添加到数组中，使用 20 作为参数。

let myArray = [2,4,5,7,9,12,14];
    myArray.push(20);

检查它是否有效：

console.log(myArray);
    [2,4,5,7,9,12,14,20]

在 myArray 上运行 push() 方法将参数中给定的值添加到数组中。在本例中为 20。当你在控制台中检查 myArray 时，你将看到该值现在已添加到数组的末尾。

**2、Array.concat()**

**它的作用：**concat() 可以将两个或多个数组合并为一个新数组。它不会修改现有数组，而是创建一个新数组。

取 myArray 并将名为 newArray 的数组合并到其中。

let myArray = [2,4,5,7,9,12,14];
    let newArray = [1,2,3];
    let result = myArray.concat(newArray);
    console.log(result);
    [2,4,5,7,9,12,14,1,2,3]

在处理需要组合的多个数组或值时，此方法非常有效，在使用变量时只需一个非常简单的步骤。

**3、 Array.join()**

**它的作用：**join() 接受一个数组并连接数组的内容，用逗号分隔。结果放在一个字符串中。如果要使用逗号的替代方法，可以指定分隔符。

看看它是如何使用 myArray 工作的。首先使用没有分隔符参数的默认方法，它将使用逗号。

let myArray = [2,4,5,7,9,12,14];
    myArray.join();
    "2,4,5,7,9,12,14"

JavaScript 将输出一个字符串，数组中的每个值用逗号分隔。你可以在函数中使用参数来更改分隔符。用两个参数观察它：一个空格和一个字符串。

myArray.join(' ');
    "2 4 5 7 9 12 14"
    myArray.join(' and ');
    "2 and 4 and 5 and 7 and 9 and 12 and 14"

第一个示例是一个空格，它是一个你可以轻松阅读的字符串。

第二个示例使用 (‘ 和 ‘)，这里有两件事需要了解。

首先，我们使用单词“and”来分隔值。其次，“and”字两边各有一个空格。在使用 join() 时要记住这一点很重要。

JavaScript 从字面上读取参数；所以如果这个空间被遗漏了，所有的东西都会被压缩在一起（即“2and4and5...”等）不是一个非常可读的输出！

**4、 Array.forEach()**

**它的作用：**forEach() （区分大小写！）对数组中的每个项目执行一个函数。此函数是你创建的任何函数，类似于使用“for”循环将函数应用于数组，但代码工作量要少得多。

forEach(); 还有一点。看语法，然后执行一个简单的函数来演示。

myArray.forEach(function(item){
    //code
    });

我们使用的是 myArray，forEach() 使用点符号。你将希望使用的函数放在参数括号内，在示例中为 function(item)。

看看功能（项目）。这是在 forEach() 内部执行的函数，它有自己的参数。我们正在调用参数项。关于这个论点，有两件事需要了解：

当 forEach() 遍历你的数组时，它会将代码应用于此参数。将其视为保存当前元素的临时变量。

你选择参数的名称，它可以命名为你想要的任何名称。通常，这将命名为更易于理解的名称，例如“项目”或“元素”。

考虑到这两件事，请查看这个简单的示例。将每个值加 15，并让控制台显示结果。

myArray.forEach(function(item){
        console.log(item + 15);
    });

我们在这个例子中使用 item 作为变量，所以函数被编写为通过 item 为每个值添加 15。然后控制台打印结果。这就是结果的样子。

16
     17
     18
    undefined

结果是数组中的每个数字，但添加了 15！

**5、Array.map()**

**它的作用：**map() 对数组中的每个元素执行一个函数，并将结果放入一个新数组中。

在每个元素上运行一个函数听起来像 forEach()。这里的区别是 map() 在运行时创建一个新数组。forEach() 不会自动创建新数组，你必须编写特定函数才能这样做。

使用 map() 将 myArray 中每个元素的值加倍，并将它们放入一个新数组中。你将看到相同的 function(item) 语法以进行更多练习。

let myArray = [2,4,5,7,9,12,14];
    let doubleArray = myArray.map(function(item){
    return item * 2;
    });

在控制台中检查结果。

console.log(doubleArray);
    [4,8,10,14,18,24,28]

myArray 不变：

console.log(myArray);
    [2,4,5,7,9,12,14]

**6、Array.unshift()**

**它的作用：**与 push() 方法的工作方式类似，unshift() 方法接受你的数组并将一个或多个元素添加到数组的开头而不是结尾，并返回数组的新长度。此方法将修改你现有的数组。

let myArray = [2,4,5,7,9,12,14];
    myArray.unshift(0);

在将数组记录到控制台时，你应该会在数组的开头看到数字 0。

console.log(myArray);
    [0, 2,4,5,7,9,12,14]

**7、Array.sort()**

**它的作用：**排序是对数组执行的最常见操作之一，非常有用。JavaScript 的 sort() 数组方法可用于仅用一行代码对数字，甚至字符串数组进行排序。这个操作到位，通过修改初始数组返回排序后的数组。这次为 myArray 取一组不同的数字。

let myArray = [12, 55, 34, 65, 10];
    myArray.sort((a,b) => a - b);

由于排序是就地完成的，因此，你不必为排序数组声明单独的变量。

console.log(myArray);
    [10, 12, 34, 55, 65]

默认情况下，数组按升序排序，但你可以选择将自定义函数传递给 sort() 方法，以按所需方式对数组进行排序。在这种情况下，我传递了一个自定义箭头函数来按数字升序对数组进行排序。

**8、Array.reverse()**

**它的作用：**顾名思义，reverse() 方法用于反转数组中元素的顺序。请注意，这不会反转数组的内容，而只会反转顺序本身。这是一个可以更好地理解此方法的示例：

let myArray = [2,4,5,7,9,12,14];
    myArray.reverse()

将输出记录到控制台以验证操作。

console.log(myArray);
    [14, 12, 9, 7, 5, 4, 2]

如你所见，元素的顺序已颠倒。以前，最后一个索引处的元素（索引 6 处的元素 14）现在是第0个索引处的元素，依此类推。

**9、 Array.slice()**

**它的作用：**slice() 用于检索数组一部分的浅拷贝。简单来说，此方法允许你通过索引从数组中选择特定元素。你可以传递要从中检索的元素的起始索引和元素以及可选的结束索引。

如果不提供结束索引，则将检索从开始索引到数组末尾的所有元素。此方法返回一个新数组并且不会修改现有数组。

let myArray = [2,4,5,7,9,12,14];
    let slicedArray = myArray.slice(2);

在上面的代码中，由于没有传递结束索引参数，因此检索了从第二个索引到最后一个索引的所有元素。将两个阵列都记录到控制台。

console.log(myArray);
    console.log(slicedArray);
    [2, 4, 5, 7, 9, 12, 14]
    [5, 7, 9, 12, 14]

显然，slice() 方法没有修改初始数组，而是返回一个存储在 slicedArray 变量中的新数组。这是一个示例，其中结束索引参数也传递给 slice() 方法。

let myArray = [2,4,5,7,9,12,14];
    let slicedArray = myArray.slice(1, 3);
    console.log(slicedArray);
    [4, 5]

**10、Array.splice()**

**它的作用：**splice() 是一种有用的数组方法，用于删除或替换数组中的元素。通过指定要删除的元素的索引和数量，它修改了数组。

let myArray = [2,4,5,7,9,12,14];
    myArray.splice(2, 3);
    console.log(myArray);

在上面的例子中，myArray 数组是从索引 2 拼接而成的，并且从中删除了 3 个元素。该数组现在包括：

[2, 4, 12, 14]

要替换元素而不是仅仅删除它们，你可以使用要替换的元素传递任意数量的可选参数，如下所示：

let myArray = [2,4,5,7,9,12,14];
    myArray.splice(2, 3, 1, 2, 3);
    console.log(myArray);
    [2, 4, 1, 2, 3, 12, 14]

**11、 Array.filter()**

**它的作用：**filter() 方法是一个有用的数组方法，它接受一个包含测试的函数并返回一个包含所有通过该测试的元素的新数组。

顾名思义，此方法用于从其他元素中过滤你需要的元素。过滤是使用返回布尔值的函数完成的。

下面是一个 filter() 方法的示例，该方法用于仅从数组中获取可被 2 整除的元素。

let myArray = [2,4,5,7,9,12,14];
    let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
    console.log(divisibleByTwo);

在上面的例子中，一个箭头函数作为参数传递，它从原始数组中获取每个数字，并使用除 (%) 和相等 (===) 运算符检查它是否可以被 2 整除。输出如下所示：

[2, 4, 12, 14]

**12、Array.reduce()**

**它的作用：**reduce() 是一个数组方法，它接受一个 reducer 函数并在每个数组元素上执行它以在返回时输出单个值。

它需要一个带有累加器变量和当前元素变量的 reducer 函数作为必需的参数。累加器的值在所有迭代中都会被记住，并最终在最后一次迭代后返回。

此方法的一个流行用例是计算数组中所有元素的总和。该功能的实现如下：

let myArray = [2,4,5,7,9,12,14];
    let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

0 作为上面例子中的第二个参数传递，用作累加器变量的初始值。sumOfNums 变量将包含 reduce() 方法的返回值，该值预计是数组中所有元素的总和。

console.log(sumOfNums);
    53

**13、Array.includes()**

**它的作用：**在数组中搜索一个元素以检查它是否存在是一个经常使用的操作，因此，JavaScript 有一个内置的方法，以 contains() 数组方法的形式。使用方法如下：

let myArray = [2,4,5,7,9,12,14];
    console.log(myArray.includes(4));
    console.log(myArray.includes(2, 1));
    console.log(myArray.includes(12, 2));
    console.log(myArray.includes(18));

此方法接受一个必需参数（要搜索的元素）和一个可选参数（从其开始搜索的数组索引）。

根据该元素是否存在，它将分别返回 true 或 false。因此，输出将是：

true
    false
    true
    false

**14、 Array.indexOf()**

**它的作用：**indexOf() 方法用于找出可以在数组中找到第一次出现指定元素的索引。尽管它类似于includes() 方法，但如果元素不存在于数组中，则此方法返回数字索引或-1。

let myArray = [2,4,5,7,9,12,14];
    console.log(myArray.indexOf(4));
    console.log(myArray.indexOf("4"));
    console.log(myArray.indexOf(9, 2));

indexOf() 方法使用严格相等来检查元素是否存在，这意味着值以及数据类型应该相同。可选的第二个参数采用索引开始搜索。根据这些标准，输出将如下所示：

1
    -1
    4

**15、 Array.fill()**

**它的作用：**通常，你可能需要将数组中的所有值设置为静态值，例如 0。你可以尝试使用 fill() 方法来代替循环，以达到相同目的。

你可以在具有 1 个必需参数的数组上调用此方法：用于填充数组的值和 2 个可选参数：要填充的开始和结束索引。此方法修改现有数组。

let myArray = [2,4,5,7,9,12,14];
    let array1 = myArray.fill(0);
    myArray = [2,4,5,7,9,12,14];
    let array2 = myArray.fill(0, 2);
    myArray = [2,4,5,7,9,12,14];
    let array3 = myArray.fill(0, 1, 3);

在将输出记录到控制台时，你将看到：

console.log(array1);
    console.log(array2);
    console.log(array3);
    [0, 0, 0, 0, 0, 0, 0]
    [2, 4, 0, 0, 0, 0, 0]
    [2, 0, 0, 7, 9, 12, 14]

**JavaScript 之旅的后续步骤**

数组是 JavaScript 语言的一个强大部分，这就是为什么有这么多内置方法可以让你作为开发人员的生活更轻松。掌握这15种方法最好的方法就是练习。

如果你喜欢这篇文章，请给我我点个赞。

感谢你的时间，谢谢阅读，祝编程快乐！

#  #

**学习更多技能**

**请点击下方公众号**

![a3fed9d186d8e95e6d17d412d0fd831c.gif][]

![727a4bd8a6fe2178476ba16832dbed61.png][]

![f957995d36e9a65631adcfcb2db4cd78.png][]

[dc5eabfe26df70e5df96e4898502cf05.png]: /images/20220828/cfefb4e298264f5e98864c6d9769351d.png
[a3fed9d186d8e95e6d17d412d0fd831c.gif]: /images/20220828/3484fd4ba89849de8ecfd23fe2a96a7d.png
[727a4bd8a6fe2178476ba16832dbed61.png]: /images/20220828/20596fc41c3b433c8f244310a722cb5f.png
[f957995d36e9a65631adcfcb2db4cd78.png]: /images/20220828/9e88f95a725448e583e5d6f965986a82.png