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

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

翻译 | 杨小二

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

在本文中&＃xff0c;我们将看到 9 个基本的 Javascript 数组方法&＃xff0c;它们将帮助你正确操作数据。

9个数组方法如下&＃xff1a;

• some()

• map()

• filter()

• find()

• findIndex()

• sort()

• includes()

• reverse()

• concat()

1、some()

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

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

const Array &＃61; ["a", "b", "c", "d", "e"]


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

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


2、map()

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

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

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

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


3、filter()

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

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

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

const array&＃61;["Dawn", "Sam", "Eve", "John", "John"]


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

const array&＃61;["Dawn", "Sam", "Eve", "John", "John"]
array.filter(element &＃61;> element &＃61;&＃61;&＃61; "John")
//output : [John, John]


4、find()

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

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

const array&＃61;[{name1:"John", salary:10000},{name2:"Andrew", salary:25000},{name3:"Tom", salary:10000}
]


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

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


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

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

5、findIndex()

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

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

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

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


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

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


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

6、sort()

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

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

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


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

const array&＃61;[ 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 方法不仅适用于数字&＃xff0c;而且在按字母顺序对字符串进行排序时也很有用。让我们假设一个场景&＃xff0c;我们要按字母顺序对 5 个名字进行排序。

const array&＃61;["John", "Evie", "Alex", "Ryan", "Sam"]
array.sort()
//output : [ "Alex", "Evie", "John", "Ryan", "Sam" ]


7、includes()

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

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

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

const array&＃61;[ "Computer Scientist", "Programmer", "AI Expert", "Web Developer", "App Developer", "White Hacker"]


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

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


8、forEach()

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

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

const myAwesomeArray &＃61; [{ id: 1, name: "john" },{ id: 2, name: "Downey" },{ id: 3, name: "Karlo" },{ id: 4, name: "Harry" },
]


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

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


9、concat()

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

例如&＃xff0c;假设我们有 2 个包含数字的数组。

const array1 &＃61; [1, 2, 3, 4, 5]
const array2 &＃61; [6, 7, 8, 9, 10]


现在&＃xff0c;我们的任务是将 array1 与 array2 合并。

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


结论

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

感谢你的阅读。

学习更多技能

请点击下方公众号