江苏龙网

  1. 主页 > 生活百科 > >

JavaScript 数组操作必须熟练运用的 10 个方法

JavaScript

JAVAScript 提供了大量不同的处理数组的方法，这里花几分钟时间介绍 8 个项目中可以用到的数组方法 。
1. Array.map()使用.map() 方法，可以创建一个基于原始数组的修订版数组 。.map() 方法接受一个函数，该函数遍历数组中的所有项并进行相应的修改 。
当需要更新数组中的所有项并将其存储到一个新数组中时，.map() 方法就可以派上用场了 。
例如有一个文章列表的数组，如下：
const articles = [{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 组成的数组，如下：
const arrayTitles = articles.map((item) => item.title);console.log(arrayTitles);输出的结果如下：
['如何在 Vue 的计算属性中传递参数','Angular数据状态管理框架：NgRx/Store','Angular管道PIPE介绍']当然，只要是数组都可以使用 .map() ，接下来就基于上面标题数组，增加作者信息，如下：
const arrayTitlesWithAuthor = arrayTitles.map((title) => `《${title}》作者：天行无忌`);console.log(arrayTitlesWithAuthor);输出结果如下：
['《如何在 Vue 的计算属性中传递参数》作者：天行无忌','《Angular数据状态管理框架：NgRx/Store》作者：天行无忌','《Angular管道PIPE介绍》作者：天行无忌']

.map() 方法是一个用来创建新数组、修改其内容并保持原始数组不变的通用方法 。当出现需要修改现有数组的内容并将结果存储为新变量的时候就可以用 。
2. Array.filter()从方法名称可以很容易知道其用途，没错用于过滤数组元素 。
filter()方法根据特定条件获取数组中的元素，像 .map() 方法一样，它将返回一个新数组，并保持原始数组不变 。
基于上面的 articles 数组，分别获取 views 小于 2000 的和大于 2000 的文章列表：
const lessArticles = articles.filter((item) => item.views < 2000);const muchArticles = articles.filter((item) => item.views > 2000);console.log(lessArticles);console.log("rn==========================================rn");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()，如下：
const lessArticle = articles.find((item) => item.views < 2000);const muchArticle = articles.find((item) => item.views > 2000);console.log(lessArticle);console.log("rn==========================================rn");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() 一样，其区别在于返回值不一样，只返回与提供的条件匹配的第一个元素的索引值 。
const lessArticle = articles.findIndex((item) => item.views < 2000);const muchArticle = articles.findIndex((item) => item.views > 2000);console.log(lessArticle); // 0console.log(muchArticle); // 1
**什么时候使用 Array.findIndex() ？**当需要获取数组通过定义条件的第一个元素所在数组中的索引值时 。


推荐阅读


上一篇：关于头条极速版领2000金币的方法

下一篇：金钱橘饼的制作,丑橘的功效与作用