JavaScript数组操作必须熟练运用的10个方法
发布网友
发布时间：2024-09-05 23:11
共1个回答
热心网友
时间：2024-10-23 09:51
JavaScript提供了大量不同的处理数组的方法，这里花几分钟时间介绍10个项目中可以用到的数组方法。
1.Array.map()使用.map()方法，可以创建一个基于原始数组的修订版数组。.map()方法接受一个函数，该函数遍历数组中的所有项并进行相应的修改。
当需要更新数组中的所有项并将其存储到一个新数组中时，.map()方法就可以派上用场了。
例如有一个文章列表的数组，如下：
constarticles=[{article_id:"6976209276364652558",title:"如何在Vue的计算属性中传递参数",views:1258,},{article_id:"6976113133358153736",title:"Angular数据状态管理框架：NgRx/Store",views:2258,},{article_id:"6975722363241365534",title:"Angular管道PIPE介绍",views:1568,},];现在基于上面文章列表数组，获取所有title组成的数组，如下：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);输出的结果如下：
['如何在Vue的计算属性中传递参数','Angular数据状态管理框架：NgRx/Store','Angular管道PIPE介绍']当然，只要是数组都可以使用.map()，接下来就基于上面标题数组，增加作者信息，如下：
constarrayTitlesWithAuthor=arrayTitles.map((title)=>`《${title}》作者：天行无忌`);console.log(arrayTitlesWithAuthor);输出结果如下：
['《如何在Vue的计算属性中传递参数》作者：天行无忌','《Angular数据状态管理框架：NgRx/Store》作者：天行无忌','《Angular管道PIPE介绍》作者：天行无忌'].map()方法是一个用来创建新数组、修改其内容并保持原始数组不变的通用方法。当出现需要修改现有数组的内容并将结果存储为新变量的时候就可以用。
2.Array.filter()从方法名称可以很容易知道其用途，没错用于过滤数组元素。
filter()方法根据特定条件获取数组中的元素，像.map()方法一样，它将返回一个新数组，并保持原始数组不变。
基于上面的articles数组，分别获取views小于2000的和大于2000的文章列表：
constlessArticles=articles.filter((item)=>item.views<2000);constmuchArticles=articles.filter((item)=>item.views>2000);console.log(lessArticles);console.log("\r\n==========================================\r\n");console.log(muchArticles);输出的结果如下：
[{article_id:'6976209276364652558',title:'如何在Vue的计算属性中传递参数',views:1258},{article_id:'6975722363241365534',title:'Angular管道PIPE介绍',views:1568}]==========================================[{article_id:'6976113133358153736',title:'Angular数据状态管理框架：NgRx/Store',views:2258}]当需要从数组中删除不符合特定条件的元素时，可以使用.filter()。
3.Array.find().find()方法看起来很像前面介绍的.filter()方法。跟.filter()方法一样，将匹配的条件的元素返回，区别在于，.find()将只返回与提供的条件匹配的第一个元素，不是数组。
将上面的.filter()方法改为.find()，如下：
constlessArticle=articles.find((item)=>item.views<2000);constmuchArticle=articles.find((item)=>item.views>2000);console.log(lessArticle);console.log("\r\n==========================================\r\n");console.log(muchArticle);输出结果如下：
{article_id:'6976209276364652558',title:'如何在Vue的计算属性中传递参数',views:1258}=========================================={article_id:'6976113133358153736',title:'Angular数据状态管理框架：NgRx/Store',views:2258}什么时候使用Array.find()？当需要获取数组通过定义条件的第一个元素时。
4.Array.findIndex().findIndex()方法在名称上跟.find()前半部分一样，其实现的功能和.find()一样，其区别在于返回值不一样，只返回与提供的条件匹配的第一个元素的索引值。
constlessArticle=articles.findIndex((item)=>item.views<2000);constmuchArticle=articles.findIndex((item)=>item.views>2000);console.log(lessArticle);//0console.log(muchArticle);//1什么时候使用Array.findIndex()？当需要获取数组通过定义条件的第一个元素所在数组中的索引值时。
5.Array.forEach().forEach()方法的工作方式很像常规的for循环，遍历一个数组并在每个元素上执行一个函数。.forEach()的第一个参数是回调函数，它包含循环数组的当前值和索引。
如下：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);0输出结果如下：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);1当需要简单地循环遍历数组的每个元素而不需要构建新数组时。
6.for...offor...of是es6推出的迭代器，号称最简洁，可以是用break，continue和return终止循环。跟.forEach()不同的是，不提供数组索引。跟for语句相比代码少得多，更简洁。
下面代码遍历输出数组，如下：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);27.for...in这个方法跟上面的for...of语法上看起来相似，for...of是对值的遍历，for...in是对key/index的遍历。for...in应用于数组则key对应的就是数组的索引值，应用于对象则key对应键值。
来看代码执行效果，先应用于数组，如下：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);3上面代码输出的是数组的索引值：0、1、2，下面应用于数组第一个对象，如下：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);4输出的就是：article_id、title、views。
在实际开发中不提倡使用for...in，如果需要遍历对象属性，推荐使用Object.keys。
8.Array.every().every()方法将检查数组中的每个元素是否都通过提供的条件，如果数组中的所有元素都通过条件，则将返回true，如果没有，将返回false。
例如，检查articles数组所有的文章views都超过1000，如下：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);5检查articles数组所有的文章views都超过2000，如下：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);6什么时候使用Array.every()？当需要确认数组的每一项都通过定义的条件时。
9.Array.some().some()方法和.every()方法类似，但验证的结果是相反的，如果数组中的所有元素只要有一个通过条件，则将返回true，如果所有的元素都不通过条件，将返回false。
.some()方法和.every()方法在文章《7个你应该掌握的JavaScript编码技巧》中介绍了如何实现逻辑and和or。
例如，检查articles数组所有的文章views是否有views超过2000的文章，如下：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);7检查articles数组所有的文章是否有views超过3000的文章，如下：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);810.Array.rece()前面专门为此方法分享过一篇文章《javascript数组之includes、rece》。
.rece()方法接受一个回调函数作为其第一个参数，一个可选的初始值作为其第二个参数。如果没有提供初始值，则使用第一个数组元素作为值。回调函数提供一个累加器accumulator和currentValue参数，用于执行rece计算。
这里就简单举个例子，对articles数组的views进行累加求和：
constarrayTitles=articles.map((item)=>item.title);console.log(arrayTitles);9使用.rece()方法可以用于展平一个数组，当然已经有很多方法可以做到这一点，这就是其中的方法之一。
['如何在Vue的计算属性中传递参数','Angular数据状态管理框架：NgRx/Store','Angular管道PIPE介绍']0总结JavaScript提供了大量不同的处理数组的方法，本文介绍的10个在日常项目开发中使用频率比较高的数组处理方法，可以作为基础知识收藏。
