JavaScript中通过array.map()实现数据转换、创建派生数组、异步处理等操作,array.map()的使用详解
作者:watermelo37
涉及领域:Vue、SpingBoot、Docker、LLM、python等
---------------------------------------------------------------------
温柔地对待温柔的人,包容的三观就是最大的温柔。
---------------------------------------------------------------------
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
一、什么时候该使用Array.map(),与forEach()的区别是什么?
1、什么时候该用Array.map()
一般满足下列三种情况之一就可以使用Array.map()了:
- 需要返回一个新数组,新数组的长度与原数组相同
- 需要进行链式调用,方便进行多步数据转换。
- 需要修改数组且不修改原数组内容
2、Array.map()与Array.forEach()的区别
最大的区别就是Array.map()有返回值,Array.forEach()没有返回值。以上三种情况也都是基于Array.map()有返回值所以才适用的。
二、Array.map()的使用与技巧
1、基本语法
array.map(callback(currentValue, index, array), thisArg)
callback:一个函数,用于处理每个元素,并返回处理后的值。
- currentValue:正在处理的当前元素。
- index(可选):正在处理的当前元素的索引。
- array(可选):调用 map() 的数组。
thisArg(可选):执行 callback 函数时,用作 this 的值。
2、返回值
返回一个新数组,结果为原始数组元素依次调用 callback 后的值(往往为一个新的数组)。
3、使用技巧
array.map()创建一个新数组,其结果是该数组中的每个元素(调用一个提供的函数)调用一个提供的函数后的返回值。这个方法对原数组不进行任何修改。
应用场景:数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等。其中应用函数常作为map操作中的其中一步,更多指一种封装和复用的思想而不是一种具体的需求。
三、Array.map()的应用领域与实际案例
1、数据转换与应用函数
假设我们有一个电子商务网站的订单数组,每个订单是一个对象,包含 id、date、items 和 shipping。每个 items 是一个对象数组,包含 name、price 和 quantity。
我们的目标是创建一个新的数组,其中每个元素是一个对象,包含订单的 id、订单总金额(所有商品价格和数量的总和)、订单日期以及基于总金额计算的税费(税费计算函数为 calculateTax(totalAmount),其中如果总金额小于1000,则税费为总金额的10%,否则为100)。
2、创建派生数组
要创建派生数组,相比于直接通过for循环来“以旧换新”,array.map()比for、foreach还有非常不常用的while、do...while高级,代码清晰,可读性强,代码就看起来很优雅,如果都是
和嵌套回调,看起来就是一团乱麻,可读性差,很不优雅。举个例子:有一个员工信息的数组,每个员工对象包含 name、age 和 salary。我们想要创建一个新的数组,其中只包含年龄超过30岁的员工的姓名和工资。
3、链式调用
有一个用户信息的数组,每个用户对象包含 id、name 和 isActive。我们想要获取所有活跃用户的姓名,并按照字母顺序排序。
4、异步数据流处理
有一个用户列表,每个用户都有一个异步函数 fetchUserData 来获取用户的详细信息。我们想要获取所有用户的详细信息,并对结果进行处理。
5、复杂API请求梳理
有时候需要从不同的API端点获取数据,并将这些数据汇总到一个数组中。
6、提供DOM操作
假设我们有一个用户列表,我们想要为每个用户创建一个列表项并将其添加到页面上的一个列表中。
7、用来搜索和过滤
假设我们有一个商品列表,我们想要根据用户的搜索输入来过滤商品。
四、总结
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。
W3school传送门(我的博客更详细):
只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
其他热门文章,请关注:
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=59ob9q3wxhx
- 点赞
- 收藏
- 关注作者
评论(0)