高级开发人员知识：JavaScript 数组方法第 3 部分

prisma

今天让我们来点高级的。这些数组方法总是遍历数组。基本上，您可以通过基本的 for 循环获得相同的功能。如果是这样，我们为什么要使用它们？让我们始终使用 for 循环（！）。使用数组方法有几个优点。在开发人员体验方面，它们更加简洁，已经优化，更易于阅读等。无需再次发明轮子。你需要好好利用你宝贵的时间。当您想打印 hello world 1000 次时。您不会将相同的代码编写 1000 次，对吧？

笔记：
第1部分： https://medium.com/@the.soylemez/powerful-tools-javascript-array-methods-part-1-be1fe55ea29e _
第2部分：_ https://medium.com/@the.soylemez/do-you-really-know-javascript-array-methods-part2-8d3349e33986

Array.prototype.findIndex()

你还记得第 2 部分中的 find 方法吗？这两种方法非常相似。基本上，findIndex 方法接受一个返回条件的函数。数组中第一个满足条件的元素，将返回其索引。如果没有满足条件的元素，该方法将返回-1。

假设我们有一个充满名称的数组。我们想得到哈利的索引。

 const names = ['Hermione', 'Harry', 'Ron', 'Harry', 'Albus'];  
 const harryIndex = names.findIndex((element) => element === 'Harry');  
 console.log(harryIndex);

输出：

Array.prototype.findLastIndex()

此方法与 findIndex 方法完全相同，只是有一个区别。与 findIndex 方法不同，此方法从最后一个元素开始。这意味着该方法将返回满足条件的最后一个元素。

让我们尝试上面的相同示例。但这一次我们要找到最后一个哈利。

 const names = ['Hermione', 'Harry', 'Ron', 'Harry', 'Albus'];  
 const lastHarryIndex = names.findLastIndex((element) => element === 'Harry');  
 控制台.log(lastHarryIndex);

输出

Array.prototype.findLast()

就像 find 方法一样，但是这个方法是从最后一个索引开始的。 findLast 方法接受一个返回条件的函数参数。将返回数组中满足条件的最后一个元素。

让我们在给定的 numbers 数组中找到最后一个奇数元素。

 常量数 = [1, 2, 3, 4, 5, 6];  
 const lastOddNumber = numbers.findLast((element) => element % 2 !== 0);  
 控制台.log(lastOddNumber);

输出：

Array.prototype.flat()

这个可能看起来很复杂。 flat 方法将数组中的子数组展平。如果您有嵌套数组。 flat 方法将帮助您将这些元素升级到给定的深度。接受一个论点。这个论点回答了你想要走多深和扁平化的问题。

假设我们有嵌套数组。我们希望这个数组只是一个包含所有值的数组。在下面的示例中，我们的数组有多深？好吧，我看到 1 个元素周围有 3 个方括号。所以我们需要深入 3 倍。

 常量嵌套 = [1,2,[3,4],[[[5,6,7]]]];  
 const flattened = nested.flat(3);  
 console.log（扁平化）；

输出：

 [ 1、2、3、4、5、6、7]

注意：尝试给出 1 或 2 作为参数。查看结果。

Array.prototype.forEach()

顾名思义，forEach 方法遍历数组中的所有元素。并执行给定的函数参数。

假设我们要记录数组中的每个元素。

 const names = ['Hermione', 'Ron', 'Harry', 'Albus'];  
 names.forEach((element) => console.log(element));

输出：

 赫敏  
 罗恩  
 哈利  
 阿不思

Array.prototype.includes()

包含方法从给定的 startIndex 开始搜索数组作为第二个参数。如果匹配，则返回 true，否则返回 false。

 const names = ['Hermione', 'Ron', 'Harry', 'Albus'];  
 const isRonIn = names.includes('Ron');  
 const isRonInAfterSecondIndex = names.includes('Ron',2);  
 const isTomRiddleIn = names.includes('Tom Riddle');  
 控制台.log(isRonIn);  
 控制台.log(isRonInAfterSecondIndex);  
 console.log(isTomRiddleIn);

首先，我们询问“Ron”是否在数组中。其次，我们询问“Ron”是否在从第二个索引开始的数组范围内。最后我们询问“Tom Riddle”是否在数组中。

输出：

 真的  
 错误的  
 错误的

Array.prototype.indexOf()

indexOf 方法与 include 方法非常相似。不同之处在于 indexOf 方法返回找到的元素的索引。 indexOf 方法有 2 个参数（searchElement、startIndex）。如果 searchElement 在数组的给定范围内，则返回它的索引，否则返回 -1。 startIndex 参数的默认值为 0。

让我们尝试上面的相同示例，看看有什么不同。

 const names = ['Hermione', 'Ron', 'Harry', 'Albus'];  
 const isRonIn = names.indexOf('Ron');  
 const isRonInAfterSecondIndex = names.indexOf('Ron',2);  
 const isTomRiddleIn = names.indexOf('汤姆谜语');  
 控制台.log(isRonIn);  
 控制台.log(isRonInAfterSecondIndex);  
 console.log(isTomRiddleIn);