毫无疑问,数组是最有用和最高效的JS数据结构之一。这些索引的集合一次又一次地证明它们仍然是各种用例(如果不是一个)的最佳选择。但是,如果数组本身没有完整的、富有表现力的API,就不会那么有价值。这就是今天这篇文章的主题!我们将介绍一些鲜为人知的方法,以及其他可能难以记住的方法,这些方法原生包含在ArrayAPI中。有些人甚至走了很远的路!在他们的帮助下,您将能够编写更清晰、更实用的代码(当然是FP风格),有时甚至可以编写性能更高的JS代码!其中一些可能更简单,有些可能更难一些,但这篇文章绝对不适合初学者!当然,如果您已经知道并记住所有这些,请花点时间提醒自己一些细节或学习一些新技巧!为了更好的阅读体验,我将所有列出的方法分为4组。每个组收集至少共享一个特殊属性的方法。第一组称为“转换”。其中的所有方法都将数组转换为其他形式。它们都以不可变的方式运行,在结果中返回一个新数组而不影响原始数组。.filter()我想我不需要讨论过滤数组有多么有用。使用.filter()你可以做到这一点!您所要做的就是传递一个过滤函数,给定当前元素的值、索引和源数组,该函数将输出一个布尔值,指示给定元素是否应包含在结果数组中。.map().map()可能是FP定制JS编程中最好的数组方法之一。正如您所提到的,它使用给定的映射函数处理(“映射”)您的数组,并返回一个包含新处理数据的新数组。上面提到的函数提供了一组标准参数,其中包括元素、索引和源数组参数,并且应该返回将包含在结果中的值。因此,有了所有这些数据,您就拥有了按照您想要的方式改变数组所需的一切。现在,flat[Map]()嵌套数组很常见。事实证明,它们在表示2D或3D数据格式时特别有用。完全可以利用这样的维度进行更深入的研究,但众所周知,跟踪和访问这些数据将变得越来越困难。ECMAScript规范的开发者清楚地认识到了这种模式,并向我们介绍了新的.flat()方法,从最新的ES规范和永远绿色的浏览器开始。它的规则很简单-它只是将嵌套数组展平指定的深度(默认为1),并有效地为您提供一个比以往更扁平的数组!还有一个与数组扁平化相关的方法有关。我说的是.flatMap(),如您所料,它是.map()和.flat()方法的完美结合。基本上,您可以像.map()一样使用此方法-使用相同的参数集等,但生成的数组稍后将被扁平化1层。很简单。那么,这种方法的可能用例是什么?为此,请考虑以下字符串处理示例。也许这有点粗略,但我想你明白了。了解此方法的工作原理后,您一定会找到自己的一些用例。附带说明一下,这种方法的性能比单独使用.map()和.flat()略好。InteractionsInteractions类别将对源数组进行操作的所有方法归为一组,这些方法不提供全新的数组,而是改变数组或返回完全不同类型的值。.reverse()当然,.reverse()方法很简单,但鲜为人知,它的作用正如其名称所暗示的那样——反转数组中元素的顺序。因此,最好的将被放在第一位。在处理不同类型的队列时,此方法可能会派上用场。请记住,此方法会改变源数组。.reduce[Right]()如果您想快速将数组(“reduce”)转换为单个值,可以使用.reduce()方法轻松完成。如果提供了正确的函数(所谓的reducer),它稍后会对数组中的每个元素执行该函数并将结果累积到一个变量中。此参数函数返回一个累积值,稍后您可以使用它的第一个参数引用该值。在其高峰期,该函数可以被赋予4个参数(按给定的顺序):累加值(可以是字符串、数组、对象或其他任何形式);要减少的数组的当前值;当前值的索引;值是Reducedarrays;如果减少的顺序对你很重要,那么你应该知道你也可以使用.reduceRight()方法,它做的事情与前面的方法完全相同,但它从右边开始并向前工作。.find[Index]()在数组中查找特定元素可能是一项艰巨的任务,除非它是第一个或最后一个元素。在这里,ES6规范中添加的.find()方法非常有用。它只接受处理标准参数集并返回给定数组中第一个匹配值的检查函数,否则返回未定义。还有一个.findIndex()方法,它和第一种方法一样,使用匹配函数查找值,但返回索引而不是原始值。它可以与.indexOf()或.lastIndexOf()进行比较,也可以用于检索与提供的值匹配的第一个和最后一个值的索引,但它的表现力不如.findIndex()及其匹配函数。***需要注意的一件事——如果你使用.indexOf()只是为了检查一个值是否在给定的数组中,你可以考虑使用.includes()(ES6特性)——它返回一个布尔值,并且性能比它的替代品。.every()正如某些人可能期望的那样,.every()只是在给定数组的每个元素上运行提供的函数,此处的命名可能会产生误导。相比之下,.every()确实在每个元素上运行一个函数,但只是为了检查它们是否遵循我们提供的指南,并最终返回一个合法的布尔值。检查函数提供一组标准参数。.copyWithin(),在单个数组的范围内复制数据对某些人来说可能有点复杂且毫无意义。然而,由于其优越的性能(特别是对于其对应的TypedArrays),此方法提供了一种快速移动数组元素的好方法!这里,你可以传入1到3个参数:复制的数据将是要粘贴的目标索引。由于.copyWithin()不会改变源数组的长度,源数组将被替换,旧数据将被删除。startindex,标记要复制的数据的开始(默认为0,数组的起始索引)endindex,标记要复制的数据的结束(不包括提供的索引)(默认为.length,这是给定数组的末尾).sort().sort()是执行其名称所说的方法之一。在这种情况下,它只是对数组进行排序,你可以给它一个比较函数,也可以不给它。默认情况下,所有的值都会被转换为字符串,并按照UTF-16编码升序排序,即数字从小到大,字符串按字母顺序排列。您还可以提供一个函数,该函数接受两个元素作为单独的参数进行比较。此比较函数返回一个数字,该数字将用于以给定方式对提供的值进行排序。如果函数返回一个小于0的数字,则作为第一个参数提供的值优先;如果函数返回一个等于0的数字,则该值保持不变(规范并不能真正保证这一点);如果函数返回一个大于0的数字,则作为第二个参数提供的值优先;.some().some()是一个类似于.every()的方法。它检查源数组中的元素是否满足一定的规则(以检查函数的形式提供),并在最后返回一个布尔值。不同之处在于.some()只需要一个元素满足测试并返回一个正值,不像.every()需要每个元素都满足测试。例如,它可以帮助您检查是否至少有一个值具有给定的属性。提供的测试函数接收一组标准参数(元素、索引和源数组)。迭代是惊人的!事实上,在数组API中,只有一种方法可以进行迭代操作。这只是对那些使用.map()、.reduce()和类似方法的人的警告,因为这些方法仅用于迭代源数组。只有一种方法适用于此任务,因此,它应该受到尊重并广为人知。.forEach().forEach()顾名思义——遍历源数组的每个元素。在提供接受一组标准参数的函数的情况下,它会在给定数组的每个元素上运行该函数。其他除了上述所有类别外,ArrayAPI还有更多的方法。以下是其中一些,当然鲜为人知和使用,但在某些特殊情况下可能会派上用场。.entries().entries()是三个返回迭代器对象方法中的第一个。数组迭代器对象或所谓的iterable是一种简单的结构,可以使用for...of循环进行迭代,它还有一个.next()方法,称为底层while迭代方法。直接调用时返回一个包含value和done属性的对象,分别表示当前值和迭代是否完成。再次调用时,它将返回数组的下一个值,这个过程将一直持续到源数组的末尾,此时done属性将被设置为true。.entries()方法返回的迭代器将具有键值对(数组)形式的值,其中第一个元素代表当前索引,第二个元素代表各自的值。您可以将它(其他方法将在后面讨论)与相应的对象进行比较。像Object.entries()或Object.keys()这样的函数(不在原型中)当然比它们的数组兄弟更受欢迎,但它们做的事情相似。迭代完成后无法重新启动它。再次做同样事情的唯一方法是使用相同的方法再次创建一个新的可迭代对象。但是这种方法的用例是什么?.next()方法绝对可以让您更好地控制如何遍历数组。此外,当我们想要访问元素的值和索引时,.entries()返回的键值对绝对有用。然而,在这些情况下,标准对象或地图(我在之前的帖子中讨论过)可能对您来说更方便。.keys()我们之前已经介绍了iterable背后的所有复杂性,并且有两种类似于.entries()的方法-.keys()和.values()。第一种方法,顾名思义,返回一个iterable,其值等于源数组的索引(即键)。它返回一个表示数组元素索引的数字,而不是键值数组。.values().values()方法也返回一个可迭代对象。这次它的值等于源数组元素的值。.toString()我要讨论的最后一个方法是.toString()。它存在于JS对象、函数、字符串、数字、数组等等!可能在每个JS对象中(一切都是对象)!但我认为,尽管.toString()方法无处不在,它仍然没有得到应有的关注。.toString()方法的核心是简单地将数组转换为字符串。返回值的形式是将元素组合在一起并用逗号分隔的数组形式。但它最大的优点是不需要直接调用!这样,每次需要将您的值转换为字符串(例如字符串常量或串联)时,您都可以调用此方法。考虑到这一点,并且您可以使用自己的实现自由更改此方法,您不仅可以返回自定义字符串,还可以在执行这些操作时执行特定操作!?相信我——这会让你做一些有趣的事情!阵法时间!这些是我个人挑选的一些最有趣和最有价值的ArrayAPI方法!你都认识他们吗?我知道内置的API很容易被遗忘,导致我们寻找不一定存在的问题的解决方案。我希望本文至少能帮助您解决其中的一些问题。现在,您如何看待这篇文章?请在评论区写下你的看法,如果你喜欢,请在下方回复告诉我!当然,您也可以在Twitter和我的Facebook页面上关注我,您还可以注册时事通讯以获取此博客的最新内容。一如既往,感谢您阅读本文,我们下次再见!
