JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)

简介: array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~


作者:watermelo37

涉及领域:Vue、SpingBoot、Docker、LLM、python等

---------------------------------------------------------------------

温柔地对待温柔的人,包容的三观就是最大的温柔。

---------------------------------------------------------------------

image.gif 编辑

JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)

image.gif 编辑

一、什么时候该使用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)。

// 创建一个新的数组,其中每个元素是一个对象,包含订单的 id、订单总金额、订单日期以及基于总金额计算的税费
// 其中如果总金额小于1000,则税费为总金额的10%,否则为100
// 示例订单数组
const orders = [
  { id: 1, date: '2023-04-01', items: [{ name: 'Item1', price: 100, quantity: 2 }], shipping: 50 },
  { id: 2, date: '2023-04-02', items: [{ name: 'Item2', price: 200, quantity: 1 }], shipping: 30 },
  // ... 更多订单
];
// 税费计算函数
function calculateTax(totalAmount) {
  return totalAmount < 1000 ? totalAmount * 0.1 : 100;
}
// 创建新数组,包含每个订单的id, 总金额, 订单日期和税费
const orderDetails = orders.map(order => {
  const totalAmount = order.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const tax = calculateTax(totalAmount);
  return {
    id: order.id,
    totalAmount: totalAmount + order.shipping + tax, // 包括运费和税费的最终总金额
    date: order.date,
    tax: tax
  };
});
console.log(orderDetails);
// 输出:
[
  {
    id: 1,
    totalAmount: 300, // 100 * 2 (items) + 50 (shipping) + 20 (tax)
    date: '2023-04-01',
    tax: 20
  },
  {
    id: 2,
    totalAmount: 330, // 200 * 1 (item) + 30 (shipping) + 30 (tax)
    date: '2023-04-02',
    tax: 30
  },
  // ... 更多订单详情
]

image.gif

2、创建派生数组

       要创建派生数组,相比于直接通过for循环来“以旧换新”,array.map()比for、foreach还有非常不常用的while、do...while高级,代码清晰,可读性强,代码就看起来很优雅,如果都是嵌套循环和嵌套回调,看起来就是一团乱麻,可读性差,很不优雅。

       举个例子:有一个员工信息的数组,每个员工对象包含 name、age 和 salary。我们想要创建一个新的数组,其中只包含年龄超过30岁的员工的姓名和工资。

// 有一个员工信息的数组,每个员工对象包含 name、age 和 salary。我们想要创建一个新的数组,其中只包含年龄超过30岁的员工的姓名和工资。
const employees = [
  { name: 'Alice', age: 25, salary: 70000 },
  { name: 'Bob', age: 32, salary: 80000 },
  { name: 'Charlie', age: 35, salary: 90000 },
  { name: 'David', age: 22, salary: 60000 }
];
const olderEmployees = employees
  .filter(employee => employee.age > 30) // 筛选年龄超过30岁的员工
  .map(employee => ({
    name: employee.name,
    salary: employee.salary
  })); // 创建新数组,只包含姓名和工资
console.log(olderEmployees);
// 输出:
[
  { name: 'Bob', salary: 80000 },
  { name: 'Charlie', salary: 90000 }
]

image.gif

3、链式调用

       有一个用户信息的数组,每个用户对象包含 id、name 和 isActive。我们想要获取所有活跃用户的姓名,并按照字母顺序排序。

//有一个用户信息的数组,每个用户对象包含 id、name 和 isActive。我们想要获取所有活跃用户的姓名,并按照字母顺序排序
const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true },
  { id: 4, name: 'David', isActive: true }
];
const activeUserNames = users
  .filter(user => user.isActive) // 筛选活跃用户
  .map(user => user.name) // 获取用户名
  .sort(); // 按照字母顺序排序
console.log(activeUserNames);
// 输出:
// ['Alice', 'Charlie', 'David']

image.gif

4、异步数据流处理

       有一个用户列表,每个用户都有一个异步函数 fetchUserData 来获取用户的详细信息。我们想要获取所有用户的详细信息,并对结果进行处理。

// 有一个用户列表,每个用户都有一个异步函数 fetchUserData 来获取用户的详细信息。我们想要获取所有用户的详细信息,并对结果进行处理。
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  // ... 更多用户
];
// 模拟异步获取用户详细信息的函数
const fetchUserData = userId => 
  new Promise(resolve => setTimeout(() => resolve(`Data for user ${userId}`), 1000));
// 使用 map() 和 Promise.all() 处理异步数据流
const fetchAllUserData = users.map(user =>
  fetchUserData(user.id).then(data => ({ ...user, details: data }))
);
Promise.all(fetchAllUserData).then(usersWithData => {
  console.log(usersWithData); // 输出处理后包含每个用户详细信息的数组
});

image.gif

5、复杂API请求梳理

       有时候需要从不同的API端点获取数据,并将这些数据汇总到一个数组中。

// 需要从不同的API端点获取数据,并将这些数据汇总到一个数组中。
const apiEndpoints = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  // ... 更多API端点
];
// 模拟异步API请求
const fetchDataFromApi = url => 
  new Promise(resolve => setTimeout(() => resolve(`Data from ${url}`), 500));
// 使用 map() 来对每个API端点发起请求
const fetchAllData = apiEndpoints.map(endpoint =>
  fetchDataFromApi(endpoint)
);
Promise.all(fetchAllData).then(allData => {
  console.log(allData); // 输出包含所有API请求结果的数组
});

image.gif

6、提供DOM操作

       假设我们有一个用户列表,我们想要为每个用户创建一个列表项并将其添加到页面上的一个列表中。

// 假设我们有一个用户列表,我们想要为每个用户创建一个列表项并将其添加到页面上的一个列表中。
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  // ... 更多用户
];
// 选择页面上的列表元素
const userList = document.getElementById('user-list');
// 使用 map() 生成每个用户的列表项
const listItems = users.map(user => {
  const li = document.createElement('li');
  li.textContent = `User ${user.name}`;
  return li;
});
// 将所有列表项添加到列表中
listItems.forEach(item => userList.appendChild(item));

image.gif

7、用来搜索和过滤

       假设我们有一个商品列表,我们想要根据用户的搜索输入来过滤商品。

// 假设我们有一个商品列表,我们想要根据用户的搜索输入来过滤商品。
const products = [
  { id: 1, name: 'Apple', category: 'Fruits' },
  { id: 2, name: 'Banana', category: 'Fruits' },
  // ... 更多商品
];
// 用户输入的搜索关键词
const searchQuery = 'Apple';
// 使用 map() 和 filter() 进行搜索和过滤
const filteredProducts = products
  .filter(product => product.name.includes(searchQuery))
  .map(product => ({
    id: product.id,
    name: product.name,
    // 其他需要展示的信息
  }));
console.log(filteredProducts); // 输出匹配搜索关键词的商品列表

image.gif

四、总结

       array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。

       W3school传送门(我的博客更详细):JavaScript Array map() 方法

       只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

       其他热门文章,请关注:

       极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图

       你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解

       通过array.filter()实现数组的数据筛选、数据清洗和链式调用

       通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能

       通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制

       TreeSize:免费的磁盘清理与管理神器,解决C盘爆满的燃眉之急

       el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能

       深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解

       MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver

       Dockerfile全面指南:从基础到进阶,掌握容器化构建的核心工具

       在线编程实现!如何在Java后端通过DockerClient操作Docker生成python环境

       干货含源码!如何用Java后端操作Docker(命令行篇)

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=59ob9q3wxhx

相关文章
|
8月前
|
供应链 搜索推荐 数据挖掘
探秘京东 API 接口的神奇应用场景
京东API如同数字钥匙,助力商家实现商品、库存、订单等多平台高效同步,提升效率超80%。支持物流实时追踪,增强用户满意度;赋能精准营销与数据分析,决策准确率提升20%以上,全面优化电商运营。
|
9月前
|
人工智能 自然语言处理 机器人
使用 API 编程开发扣子应用
扣子(Coze)应用支持通过 API 编程,将 AI 聊天、内容生成、工作流自动化等功能集成至自有系统。主要 API 包括 Bot API(用于消息交互与会话管理)及插件与知识库 API(扩展功能与数据管理)。开发流程包括创建应用、获取密钥、调用 API 并处理响应,支持 Python 等语言。建议加强错误处理、密钥安全与会话管理,提升集成灵活性与应用扩展性。
2834 0
|
10月前
|
监控 供应链 搜索推荐
电商数据开发实践:深度剖析1688商品详情 API 的技术与应用
在电商数字化转型中,数据获取效率与准确性至关重要。本文介绍了一款高效商品详情API,具备全维度数据采集、价格库存管理、多媒体资源获取等功能,结合实际案例探讨其在电商开发中的应用价值与优势。
|
10月前
|
API 定位技术 调度
实现精准定位的—坐标系经纬度转换API技术说明和行业应用
在地图服务、物流调度等应用中,多源地理位置数据因采用不同坐标系(如WGS84、GCJ02、BD09)需统一转换,以避免位置偏移影响路径规划与分析精度。本文介绍坐标转换背景、技术方案及Python调用示例,强调其在智慧交通与物流系统中的重要性。
1003 0
|
8月前
|
Ubuntu API C++
C++标准库、Windows API及Ubuntu API的综合应用
总之,C++标准库、Windows API和Ubuntu API的综合应用是一项挑战性较大的任务,需要开发者具备跨平台编程的深入知识和丰富经验。通过合理的架构设计和有效的工具选择,可以在不同的操作系统平台上高效地开发和部署应用程序。
305 11
|
9月前
|
人工智能 数据可视化 测试技术
AI 时代 API 自动化测试实战:Postman 断言的核心技巧与实战应用
AI 时代 API 自动化测试实战:Postman 断言的核心技巧与实战应用
1096 11
|
9月前
|
安全 API 数据安全/隐私保护
【Azure 环境】Microsoft Graph API实现对Entra ID中应用生成密码的时间天数
本文介绍如何通过 Azure 的 App Management Policy 限制用户在创建 AAD 应用程序的 Client Secret 时设置最长 90 天的有效期。通过 Microsoft Graph API 配置 defaultAppManagementPolicy,可有效控制密码凭据的生命周期,增强安全管理。
218 4
|
9月前
|
Java API 开发者
揭秘淘宝详情 API 接口:解锁电商数据应用新玩法
淘宝详情API是获取商品信息的“金钥匙”,可实时抓取标题、价格、库存等数据,广泛应用于电商分析、比价网站与智能选品。合法调用,助力精准营销与决策,推动电商高效发展。(238字)
|
10月前
|
存储 搜索推荐 安全
几个常用的电商API接口及其应用场景
电商平台依赖商品、订单、支付、客户、营销及数据分析六大API,实现商品管理、订单追踪、安全支付、用户个性化服务及精准营销等功能,全面支撑电商高效运营与业务拓展,推动行业智能化发展。
|
11月前
|
数据采集 API 调度
Python爬虫框架对比:Scrapy vs Requests在API调用中的应用
本文对比了 Python 中 Scrapy 与 Requests 两大爬虫框架在 API 调用中的差异,涵盖架构设计、调用模式、性能优化及适用场景,并提供实战建议,助力开发者根据项目需求选择合适工具。

热门文章

最新文章

  • 1
    PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?
    288
  • 2
    Java 中数组Array和列表List的转换
    1024
  • 3
    通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据和性能优化,reduce()的使用详解(附实际应用代码)
    1564
  • 4
    通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
    682
  • 5
    通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
    481
  • 6
    多维数组操作,不要再用遍历循环foreach了!来试试数组展平的小妙招!array.flat()用法与array.flatMap() 用法及二者差异详解
    324
  • 7
    别再用双层遍历循环来做新旧数组对比,寻找新增元素了!使用array.includes和Set来提升代码可读性
    322
  • 8
    Array.forEach实战详解:简化循环与增强代码可读性;Array.forEach怎么用;面对大量数据时怎么提高Array.forEach的性能
    200
  • 9
    深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
    778
  • 10
    JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
    1239