iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >分享15个JavaScript的重要数组方法
  • 123
分享到

分享15个JavaScript的重要数组方法

2024-04-02 19:04:59 123人浏览 薄情痞子
摘要

目录1、ForEach2、Map3、Filter4、Find5、FindIndex6、Reduce7、Every8、Some9、 Sort10、Flat11、 Reverse12、I

前言;

我们会在构建的每个应用程序中使用数组。它有几种方法,其中一些非常令人困惑。我列出了 15 种,我们应该掌握的数组方法,因为它们经常派上用场。

数组方法的重要一点是有些是可变的,有些是不可变的。在决定针对特定问题使用哪种方法时,务必牢记这一点。

此列表中的大多数数组方法都采用类似的回调作为参数。第一个参数是当前项,第二个参数是索引,第三个是整个数组。现在我们已经解决了这个问题,让我们从列表开始:

1、ForEach

循环遍历数组中的每个元素并执行回调函数。

const arr = [1, 2, 3];
arr.forEach(num => console.log(num));
// Console: 1, 2, 3

2、Map

循环遍历数组中的每个元素并执行回调函数。使用回调函数的返回值创建一个新数组。

const arr = [1, 2, 3, 4, 5];
const areEven = arr.map(num => num % 2 === 0);
console.log(areEven); // Console: [false, true, false, true, false]

3、Filter

循环遍历数组中的每个元素,并仅选择符合条件的元素。根据所选元素返回一个新数组。

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // Console [2, 4]

4、Find

查找数组中满足条件的第一个元素。如果没有找到,将返回 undefined。

const arr = [1, 2, 3, 4, 5];
const firstEvenNumber = arr.find(num => num % 2 === 0);
console.log(firstEvenNumber); // Console [2]

5、FindIndex

与前面的方法类似,它返回满足给定条件的第一个元素的索引。如果没有找到,则返回 -1。

const arr = [1, 2, 3, 4, 5];
const firstEvenNumberIdx = arr.findIndex(num => num % 2 === 0);
console.log(firstEvenNumberIdx);

6、Reduce

这是一种高级方法,可用于组合数组的元素。主要区别在于回调将累加器作为第一个参数。回调的返回值成为下一次迭代的累加器。

const arr = [1, 2, 3, 4, 5];
// `acc` is the value of the accumulator
// the acccumulator is return value of the previous callback
// the second argument i.e `0` is the default value
const sum = arr.reduce((acc, num) => acc + num, 0);
console.log(sum); // Console: 15

7、Every

此方法接受一个返回布尔值的回调。如果条件对数组中的所有元素都有效,那么 Every() 将返回 true。

const arr = [1, 2, 3, 4, 5];
const areAllEven = arr.every(num => num % 2 === 0);
console.log(areAllEven); // Console: false

8、Some

像前面的方法一样,这个方法也接受一个返回布尔值的回调。如果条件对至少一个元素有效,Some() 将返回 true。

const arr = [1, 2, 3, 4, 5];
const isOneEven = arr.some(num % 2 === 0);
console.log(isOneEven); // true

9、 Sort

这是一种用于对数组中的元素进行排序的方法。

默认情况下,它按升序对数组进行排序。它需要一个回调函数,有两个元素——a 和 b。如果 a 小于 b,则返回 -1,否则返回 1。

如果它们相等,则返回 0。

const arr = [1, 2, 3, 4, 5];
const descendingArr = arr.sort((a, b) => b - a);
console.log(descendingArr);

请记住,与其他数组方法不同,sort 会改变数组。

10、Flat

Flat 用于将嵌套数组展平为单个数组。您可以指定将数组展平的深度。

const arr = [[[1, 2], [3]], [4, 5]];
const flattenedArr = arr.flat(4);
console.log(flattenedArr); // Console [1, 2, 3, 4, 5]

11、 Reverse

反转数组中元素的顺序。

const arr = [1, 2, 3, 4, 5];
const reversedArr = arr.reverse();
console.log(reversedArr); // Console [5, 4, 3, 2, 1]

12、Include

如果数组中存在元素,则此方法返回 true。

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(5)); // true
console.log(arr.includes(10)); // false

13、Fill

fill 方法将数组的元素设置为给定值。当我想使用 map/forEach 方法特定次数时,我喜欢使用此方法。

const emptyArr = new Array(5);
// The problem with this is that you get `[empty x 10]`
// You need real values to map over it.
const filledArr = emptyArr.fill(3); // Console [3, 3, 3, 3, 3]

14、At

此方法返回给定索引的元素。这与访问(即 arr[1])元素的传统方式之间的区别在于它也支持负索引。

const arr = [1, 2, 3, 4, 5];
console.log(arr.at(1)); // 2
console.log(arr.at(-1)); // 5
// Important: Negative indices start from `1`, positive indices start from `0`.

15、 Concat

此方法用于组合两个数组。

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];
console.log(arr1.concat(arr2)); // Console [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

到此这篇关于分享15个javascript的重要数组方法的文章就介绍到这了,更多相关js数组方法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 分享15个JavaScript的重要数组方法

本文链接: https://www.lsjlt.com/news/148489.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 分享15个JavaScript的重要数组方法
    目录1、ForEach2、Map3、Filter4、Find5、FindIndex6、Reduce7、Every8、Some9、 Sort10、Flat11、 Reverse12、I...
    99+
    2024-04-02
  • 15个JavaScript数组方法的实例介绍
    本篇内容主要讲解“15个JavaScript数组方法的实例介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“15个JavaScript数组方法的实例介绍”吧!在...
    99+
    2024-04-02
  • JavaScript中清空数组的三种方法分享
    方式1,splice 复制代码 代码如下: var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输...
    99+
    2022-11-21
    清空数组
  • javascript数组去重的方法
    今天小编给大家分享一下javascript数组去重的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2024-04-02
  • JavaScript中好用的数组对象排序方法分享
    目录简单的排序方法实现多重排序具有通用性的排序方法使用 Lodash 库结论在日常工作中,我们经常需要对数组对象进行排序。尤其是在处理数据可视化需求中,根据不同的数值维度进行排序是必...
    99+
    2023-05-19
    JavaScript数组对象排序方法 JavaScript数组对象排序 JavaScript排序
  • JavaScript常用数组去重方法
    本篇内容主要讲解“JavaScript常用数组去重方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript常用数组去重方法”吧!数组去重,一般都是在面试的时候才会碰到,一般是要求手...
    99+
    2023-06-20
  • JavaScript获取URL参数的方法分享
    目录一、字符串 split 方法二、使用 URLSearchParams 方法1、解析搜索字符串2、生成搜索字符串3、Node.js 代码三、使用正则匹配方法四、使用第三方库 qs一...
    99+
    2024-04-02
  • JS数组方法reduce的妙用分享
    目录1. 基本用法2. 使用技巧(1)数组求和(2)扁平数组(3)数组分组(4)使用 reduce() 代替 filter().map()(5)统计数组元素出现次数(6)串行执行异步...
    99+
    2023-02-01
    JS 数组方法reduce JS reduce使用 JS reduce
  • 分享Golang中的数组删除方法
    Golang数组删除技巧分享 在日常开发中,我们经常会遇到需要对数组进行删除操作的情况。对于 Golang 这样一门强类型的语言,删除数组元素可能并不像其他语言那样直接。本文将分享一些...
    99+
    2024-02-25
    golang 技巧分享 数组删除
  • JavaScript数组去重算法的示例分析
    小编给大家分享一下JavaScript数组去重算法的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!测试用例:arr = ...
    99+
    2024-04-02
  • JavaScript数组实例的9个方法
    目录前言mapfiltersomeeveryreduceforEachfind和findIndexjoin总结前言 手写JS原生API在面试中很常见,今天努力工作之余(摸鱼的时候)翻...
    99+
    2024-04-02
  • 创建一个JavaScript数组的方法
    这篇文章主要介绍“创建一个JavaScript数组的方法”,在日常操作中,相信很多人在创建一个JavaScript数组的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”创建...
    99+
    2024-04-02
  • javascript数组去重有哪些方法
    本篇内容介绍了“javascript数组去重有哪些方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!去重方...
    99+
    2024-04-02
  • javascript数组去重方法有哪些
    这篇文章给大家分享的是有关javascript数组去重方法有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 第一种--对象键值去重Array.prototype.u...
    99+
    2024-04-02
  • JavaScript数组方法的示例分析
    这篇文章将为大家详细讲解有关JavaScript数组方法的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。抛砖引玉在开始正式讲被我们忽略的一些数组方法之前,我还是想...
    99+
    2024-04-02
  • JavaScript数组去重的几种方法详谈
    目录一、Set去重二、双重for循环去重三、利用indexOf去重四、利用icludes去重五、filter六、Map总结一、Set去重 function funSet(arr...
    99+
    2024-04-02
  • JavaScript中数组去重的方法有哪些
    本篇内容介绍了“JavaScript中数组去重的方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • JavaScript实现数组去重的7种方法
    目录前言方法实现双循环去重indexOf方法去重1indexOf方法去重2相邻元素去重利用对象属性去重set与解构赋值去重Array.from与set去重总结前言 去重是开发中经常会...
    99+
    2024-04-02
  • Javascript数组去重的几种方法详解
    目录数组去重1 双层for循环(类似冒泡排序的双层循环写法)2 循环和indexof、循环和includes3 利用对象属性不能重复去重4 ES6 Set5 ES6 Array. p...
    99+
    2024-04-02
  • react-redux多个组件数据共享的方法
    目录多个组件数据共享总结: 多个组件数据共享 我们之前讲解的一直都是只有一个组件需要向redux读取状态,也就是Count这个求和组件。那么我们在实际使用redux的场景中,当然是有...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作