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

英文 | 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

2、map()​

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

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

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

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

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]

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 方法会派上用场。

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，它不代表任何索引。

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 ]

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

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

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

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

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 ]

结论

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

感谢你的阅读。

学习更多技能

请点击下方公众号

​