服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript 中七个鲜为人知的数组方法

JavaScript 中七个鲜为人知的数组方法

2024-03-21 16:00web前端开发 js教程

JavaScript 数组除了 map()、filter()、find() 和 push() 之外还有更多功能。今天这篇文章就来给大家分享一些鲜有人知道的数组方法,我们现在开始吧。

JavaScript 数组除了 map()、filter()、find() 和 push() 之外还有更多功能。今天这篇文章就来给大家分享一些鲜有人知道的数组方法,我们现在开始吧。

JavaScript 中七个鲜为人知的数组方法

1.copyWithin()

Array copyWithin() 将数组的一部分复制到同一数组中的另一个位置并返回它,而不增加其长度。

JavaScript 中七个鲜为人知的数组方法

end 参数是可选的:

JavaScript 中七个鲜为人知的数组方法

JavaScript 中七个鲜为人知的数组方法

2. at() 和 with()

at() 首先出现,with() 在一年后的 2023 年出现。

它们是单元素数组修改和访问的函数式和不可变版本。

JavaScript 中七个鲜为人知的数组方法

这些新方法的最酷之处在于它们如何让您使用负索引获取和更改元素值。

3.reduceRight()

与reduce()类似,但回调是从右到左而不是从左到右:

JavaScript 中七个鲜为人知的数组方法

这是reduceRight() 的另一个很好的场景:

JavaScript 中七个鲜为人知的数组方法

4. findLast()

ES13 中的新增功能:从最后一个元素开始查找数组项。

非常适合从结束位置搜索比使用 find() 产生更好性能的情况:

例子:

JavaScript 中七个鲜为人知的数组方法

这是可行的,但由于我们的目标对象更接近数组的尾部,findLast() 应该运行得更快:

JavaScript 中七个鲜为人知的数组方法

findLast() 的另一个用例是当我们必须从末尾专门搜索数组以获得正确的元素时。

例如,如果我们想查找数字列表中的最后一个偶数,find() 将产生完全错误的结果:

JavaScript 中七个鲜为人知的数组方法

但 findLast() 将从末尾开始搜索并为我们提供正确的项目。

5. toSorted()、toReversed()、toSpliced()

ES2023 完全包含了 sort()、reverse() 和 splice() 的不可变版本。

好吧,也许 splice() 的使用不如其他方法那么多,但它们都会就地改变数组。

JavaScript 中七个鲜为人知的数组方法

不变性为我们提供了可预测且更安全的代码;调试要容易得多,因为我们确定某些变量永远不会改变它们的值。

参数完全相同,但 splice() 和 toSpliced() 的返回值必须不同。

JavaScript 中七个鲜为人知的数组方法

6.lastIndexOf()

lastIndexOf() 方法返回可以在数组中找到特定元素的最后一个索引。

我们可以将第二个参数传递给lastIndexOf()来指定数组中的一个索引,在该索引之后它应该停止搜索字符串:

JavaScript 中七个鲜为人知的数组方法

7. flatMap()

flatMap() 方法使用给定的回调函数转换数组,然后将转换后的结果展平一级:

JavaScript 中七个鲜为人知的数组方法

在数组上调用 flatMap() 与调用 map() 后跟深度为 1 的 flat() 执行相同的操作,但它比单独调用这两个方法更有效。

JavaScript 中七个鲜为人知的数组方法

它们还不是那么出名,但它们有其独特的用途并且非常强大。

总结

以上就是今天这篇文章跟你分享的全部内容,希望今天的内容能够帮助到你,最后,感谢你的阅读。

原文地址:https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649141332&idx=1&sn=1f27cfbbeac6ce87d53b799d67025dae

延伸 · 阅读

精彩推荐
  • js教程JavaScript实现下拉列表

    JavaScript实现下拉列表

    这篇文章主要为大家详细介绍了JavaScript实现下拉列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    编程的牛牛11992022-01-05
  • js教程用原生 JS 写一个简易版的台球

    用原生 JS 写一个简易版的台球

    突发奇想想用JS写一个台球小游戏,磕磕碰碰之后,算是实现了一个简易版的。用到的知识主要是通过递归来调用requestAnimationFrame,以及一些简单的三角函...

    前端YUE11862022-10-20
  • js教程Three.js添加阴影和简单后期处理实现示例详解

    Three.js添加阴影和简单后期处理实现示例详解

    这篇文章主要为大家介绍了Three.js添加阴影和简单后期处理实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职...

    Data_Adventure11722023-04-25
  • js教程Strve.js开发一个属于自己的库或框架

    Strve.js开发一个属于自己的库或框架

    Strve.js是一个可以将字符串转换为视图的JS库。这里的字符串指的是模板字符串,所以你仅需要在JavaScript中开发视图。Strve.js不仅易于上手,还便于灵活拆装...

    前端历劫之路6112021-12-23
  • js教程微信小程序自定义scroll-view的实例代码

    微信小程序自定义scroll-view的实例代码

    这篇文章主要给大家介绍了关于微信小程序自定义scroll-view的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价...

    xianshengwen11752022-02-22
  • js教程Javascript的15种数组去重方法,总有一种适合你

    Javascript的15种数组去重方法,总有一种适合你

    数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试...

    前端微视界9142021-12-31
  • js教程用js控制电灯开关

    用js控制电灯开关

    这篇文章主要为大家详细介绍了用js控制电灯开关,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    小苏(º﹃º )4532022-03-08
  • js教程JS实现一个微信录音功能过程示例详解

    JS实现一个微信录音功能过程示例详解

    这篇文章主要介绍了JS实现一个微信录音功能过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...

    砂糖橘加盐7032023-05-29