9个提高JavaScript 技能必须知道的数组方法

墨蓝 2022-09-08 15:54 251阅读 0赞

![0efebd95b2f187cbe1f6a8c66634adb3.png][]

英文 | https://javascript.plainenglish.io/9-must-know-array-methods-to-boost-your-javascript-skills-4ae1822f7751

翻译 | 杨小二

在 JavaScript 中，数组是一种特殊类型的变量，可以存储不同类型的元素。JavaScript 有一些内置的数组方法，它们在不同的情况下有不同的作用，如果你非常熟悉这些方法的话，将对你非常有帮助，比如，删除、添加、操作数据。了解这些方法将提升你的 JavaScript 技能。

在本文中，我们将看到 9 个基本的 JavaScript 数组方法，它们将帮助你正确操作数据。

9个数组方法如下：

*  some()
 *  map()
 *  filter()
 *  find()
 *  findIndex()
 *  sort()
 *  includes()
 *  reverse()
 *  concat()

**1、some()**

如果数组中的特定元素匹配，则 array.some() 方法将返回 true 或 false 作为输出。

当你想要匹配数组中的元素时，此方法很有用。让我们通过一个例子来理解这个方法。我们有一个包含 5 个字母的数组。

const Array = ["a", "b", "c", "d", "e"]

我们将在该数组上应用 array.some() 方法，它将输出 true 或 false。

const Array = ["a", "b", "c", "d", "e"]
    Array.some(test => test === "b")
    // Output will be True

![c71657eaf9ad18a110c4bcd6b22ae42d.png][]

**2、map()**

此方法将函数作为参数，并使用原始数组中每个元素的图像创建一个新数组。元素的数量将相同，但你可以对其应用任何函数。

当你想将函数应用于数组的所有元素时，此方法很有用。

假设我们有一个包含 5 个元素编号的数组，我们的任务是应用 map 方法并将所有元素乘以 2。我们可以对其应用任何功能。现在，我只是将每个元素乘以 2。

const Array = [1, 2, 4, 5, 6]
    Array.map(x => x * 2 )
    // output : 2
    //   4   
    //   8
    //   10
    //   12

![3577f2eaeb88699f527cbebd4decde29.png][]

**3、filter()**

array.filter() 方法将一个函数作为参数，并返回一个新数组，其中，包含原始数组中与我们在参数中传递的元素相匹配的元素。其余元素被过滤掉。

当你想使用在函数中传递的特定元素filter()数组时，此方法很有用。

让我们通过一个简单的例子来理解这个方法。我们已经声明了一个有 5 个名字的数组。这些名称可以重复或不同。

const array=["Dawn", "Sam", "Eve", "John", "John"]

我们需要从数组中过滤掉名字“John”。我们想要一个只有“John”的数组。

const array=["Dawn", "Sam", "Eve", "John", "John"]
    array.filter(element => element === "John")
    //output : [John, John]

![c8cd24397fc3d61b543b4798f24a7e00.png][]

**4、find()**

array.find() 方法接受一个函数作为参数，并返回在数组中找到的满足测试函数的元素的值。否则，如果未找到测试值，它将返回 Undefined 作为输出。

需要一些例子来理解这一点吗？假设我们有一个包含关键字和值的数组。关键字表示员工姓名，值将是他们的薪水。

const array=[
      {name1:"John", salary:10000},
      {name2:"Andrew", salary:25000},
      {name3:"Tom", salary:10000}
    ]

而你的要求是找到工资为 10,000 美元的员工。

const array=[
      {name1:"John", salary:10000},
      {name2:"Andrew", salary:25000},
      {name3:"Tom", salary:50000}
    ]
    array.find(elements => elements.salary=10000)

惊人的！我们传递一个函数，在该函数中，我们试图找到 10,000 的工资。如果它存在于数组中，它将输出带有关键字和值的内容部分。如果没有，它将简单地返回 undefined。

当你想在具有数千或数百万个元素的大型数组中查找值时，此 find 方法会派上用场。

![22d9919babadb2ff2e5610d8fe5095ee.png][]

**5、findIndex()**

如果你理解了 find 方法，那么你就会很容易理解这个方法。array.findIndex() 方法的工作方式与 find 方法相同，但它不返回值，而是返回数组中值的索引。简单来说，它输出元素在数组中的位置。

当你要查找数组中元素的索引时，此方法很有用。你想知道元素出现在哪个位置，并据此执行你未来的代码逻辑。

一个示例将帮助你清除此方法。假设我们有一个包含 20 个随机数的数组。

const array=[ 10, 6, 54, 67, 87, 89, 45, 83, 123, 90, 345, 346, 21, 56, 78, 30, 341, 98, 99, 100]

我们的任务是找到数字 123 的位置。

const array=[ 10, 6, 54, 67, 87, 89, 45, 83, 123, 90, 345, 346, 21, 56, 78, 30, 341, 98, 99, 100]
    array.findIndex(elements => elements===123)
    //output : 8
    array.findIndex(elements => elements===101)
    //output : -1

现在，你可以了解 findIndex 方法的工作原理了。它返回 8 作为输出，我们知道 123 出现在数组的第 8 个索引处。如果没有找到数字，与返回 undefined 的 find 方法不同，findIndex 方法返回 -1，它不代表任何索引。

![094b7f65fa31ed555faa2a5d61523641.png][]

**6、sort()**

array.sort() 只是将一个函数作为参数并返回一个已排序的数组。当你想对数组重新排序时，此方法非常方便。

为了理解排序方法，假设你有一个由 20 个无序随机数组成的数组。

const array=[ 10, 6, 54, 67, 87, 89, 45, 83, 123, 90, 345, 346, 21, 56, 78, 30, 341, 98, 99, 100]

你的要求是按升序重新排列数组中的数字。

const array=[ 10, 6, 54, 67, 87, 89, 45, 83, 123, 90, 345, 346, 21, 56, 78, 30, 341, 98, 99, 100]
    array.sort()
    //output : [ 10, 100, 123, 21, 30, 341, 345, 346, 45, 54, 56, 6, 67, 78, 83, 87, 89, 90, 98, 99 ]

![672f388dce4a4f22c2cd6f9ef592ae5f.png][]

sort 方法不仅适用于数字，而且在按字母顺序对字符串进行排序时也很有用。让我们假设一个场景，我们要按字母顺序对 5 个名字进行排序。

const array=["John", "Evie", "Alex", "Ryan", "Sam"]
    array.sort()
    //output : [ "Alex", "Evie", "John", "Ryan", "Sam" ]

![d667f0878deec00573197cbb73f07078.png][]

**7、includes()**

此方法不接受任何函数，而是将一个元素作为参数，并根据该值是否存在于该特定数组中来输出 true 或 false。

当数组中有一堆元素并且你想检查该数组中是否存在特定元素时，此方法很有用。显然，我们可以使用 find 或 findIndex 方法。但有时，我们只需要执行知道元素是否存在于数组中的简单任务。

我们将举一个例子来理清我们的概念。我们有一系列包含姓名和职业的数据。

const array=[ "Computer Scientist", "Programmer", "AI Expert", "Web Developer", "App Developer", "White Hacker"]

我们的任务是找出“Programmer”是否存在于数组中。

const array=[ "Computer Scientist", "Programmer", "AI Expert", "Web Developer", "App Developer", "White Hacker"]
    array.includes("Programmer")
    //output : true

![98a478db47f4900f75a3297b9b1ede46.png][]

**8、forEach()**

此方法将函数作为参数，并返回与提供元素数组中的关键字匹配的元素列表。

是的，当你想使用键查找元素时，此方法对字典数组特别有用。假设有一个带有id 和 name 的数据数组。

const myAwesomeArray = [
      { id: 1, name: "john" },
      { id: 2, name: "Downey" },
      { id: 3, name: "Karlo" },
      { id: 4, name: "Harry" },
    ]

现在，我们需要与数组中的名称键关联的所有值的输出。

const array = [
      { id: 1, name: "john" },
      { id: 2, name: "Downey" },
      { id: 3, name: "Karlo" },
      { id: 4, name: "Harry" },
    ]
    array.forEach(element => console.log(element.name))
    //output : John
    //     Downey
    //     Karlo
    //     Harry

![1ca0df54ab0e437bee2c3d976fc60679.png][]

**9、concat()**

array.concat() 方法将另一个数组而不是任何函数或元素作为参数，并返回一个合并的数组。当我们想要将两个数组合并为一个时，此方法很有用。

例如，假设我们有 2 个包含数字的数组。

const array1 = [1, 2, 3, 4, 5]
    const array2 = [6, 7, 8, 9, 10]

现在，我们的任务是将 array1 与 array2 合并。

const array1 = [1, 2, 3, 4, 5]
    const array2 = [6, 7, 8, 9, 10]
    array1.concat(array2)
    //output : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

![eea4d1583ff784ff114163280afdf7ea.png][]

**结论**

希望你从这篇文章中学到了一些有用的东西。JavaScript 中还有许多其他数组方法。你现在可以查看它们，因为你已经了解了数组方法。

感谢你的阅读。

#  #

**学习更多技能**

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

![e42eb0115d3cfe2a87da853e6db9d709.gif][]

![4d50849e204f76f53eec4a8fc79c1ca9.png][]

![cfcc6a1af856a11bdac4b8f0a6d481eb.png][]

[0efebd95b2f187cbe1f6a8c66634adb3.png]: /images/20220829/b7844db9d8c1423ca65e8bb297c42f55.png
[c71657eaf9ad18a110c4bcd6b22ae42d.png]: /images/20220829/0877cc05b66d45f2aa0091fca0de293a.png
[3577f2eaeb88699f527cbebd4decde29.png]: /images/20220829/c9d42864279c49e3a0d320bd5e4f5898.png
[c8cd24397fc3d61b543b4798f24a7e00.png]: /images/20220829/93025d76e2a6472398dd973968ad5976.png
[22d9919babadb2ff2e5610d8fe5095ee.png]: /images/20220829/8e3cdd6b839340afb7ee275e5745503a.png
[094b7f65fa31ed555faa2a5d61523641.png]: /images/20220829/159f5df3a89a4e43806226138b6600cf.png
[672f388dce4a4f22c2cd6f9ef592ae5f.png]: /images/20220829/1c1857399a0c408d9f2bf1842410642f.png
[d667f0878deec00573197cbb73f07078.png]: /images/20220829/8b6f2d2d83484720beddfd097f94d9f4.png
[98a478db47f4900f75a3297b9b1ede46.png]: /images/20220829/a807ec0bd9fe476abeaef5c760a0f397.png
[1ca0df54ab0e437bee2c3d976fc60679.png]: /images/20220829/71932a08f30b46ae9feea77084ae0687.png
[eea4d1583ff784ff114163280afdf7ea.png]: /images/20220829/d1c27a0a9745419da967c569fa94dea9.png
[e42eb0115d3cfe2a87da853e6db9d709.gif]: /images/20220829/d20953a525fc48959f4ac65db46a3d69.png
[4d50849e204f76f53eec4a8fc79c1ca9.png]: /images/20220829/984fdb6240c24b1d9254df00b19cf9c0.png
[cfcc6a1af856a11bdac4b8f0a6d481eb.png]: /images/20220829/b7fd35ba7483405e9c1ef798bef38580.png