JavaScript 数组:地图

javascript 数组:地图

数组映射:一对一数据转换

需要修改数组数据并返回部分数据或执行统一操作?JavaScript 的 .map() 方法正是为此而生的。它进行一对一的数据转换,对数组中的每个元素应用一个函数,并返回一个包含转换结果的新数组。

方法 返回值 一对一 应用于所有元素

.map((value, index, array) => *)数组是是

.map() 需要一个 映射函数 作为参数,该函数对数组的每个元素进行操作并返回一个值。映射函数的返回值将按顺序填充新数组,与原始数组元素一一对应。

从 for 循环到 .map()

立即学习“Java免费学习笔记(深入)”;

.map() 方法是 for 循环的简洁替代方案。例如,将数组元素转换为大写字母:

const data = ['a', 'b', 'c', 'd'];// 传统 for 循环方式function maptoupper(data) {  const newdata = new Array(data.length);  for (let i = 0; i  data.map(value => value.toUpperCase());

登录后复制

虽然不同循环方式略有差异,但 .map() 提供了更简洁、更具声明式的代码风格。

使用案例

数据转换

.map() 常用于从对象中提取值或对数据执行统一的修改或转换。

例如,从包含姓名和角色的对象数组中提取姓名:

const data = [{  name: 'alec berg',  roles: ['creator', 'executive producer'],}, {  name: 'bill hader',  roles: ['creator', 'executive producer', 'actor', 'director'],}];// 提取姓名data.map((entry) => entry.name); // ['alec berg', 'bill hader']

登录后复制

另一个例子是为购物车中的商品应用折扣:

const cart = [{  itemid: 12345,  name: 'shoes',  price: 70.00,},{  itemid: 54321,  name: 'shirt',  price: 15.25,}];// 应用折扣const applydiscount = (discountpercent, order) => {  const multiplier = 1 - (discountpercent / 100);  return order.map((item) => ({    ...item,    price: item.price * multiplier,    originalprice: item.price,  }));};

登录后复制

增量计数

.map() 还可以用于生成增量序列。利用映射函数的索引参数,可以将索引转换为计数数字:

const getcountingnumbers = (upto) => new Array(upto)  .fill('')  .map((_, index) => index + 1);getcountingnumbers(5); // [1, 2, 3, 4, 5]

登录后复制

Array.from() 方法也可以实现类似功能:

const getCountingNumbers = (upTo) => Array.from(  { length: upTo },  (_, index) => index + 1);

登录后复制

总结

.map() 方法是 JavaScript 中一个强大的工具,用于简洁高效地进行数组数据转换。 熟练掌握 .map() 方法可以显著提高代码的可读性和效率。

以上就是JavaScript 数组:地图的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2641999.html

(0)
上一篇 2025年3月7日 06:42:08
下一篇 2025年3月5日 15:11:03

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 我们必须了解 JavaScript 数组方法

    1. 筛选 (filter) filter() 方法创建一个新数组,其中只包含满足指定条件的元素。若条件为真,则元素保留;否则,元素被过滤掉。 工作机制: 该方法遍历数组中的每个元素。若回调函数返回 true,则元素被添加到新数组。若返回 …

    2025年3月7日
    200
  • 释放效率:测试用例生成器的力量

    在快节奏的软件开发世界中,确保质量与交付速度同样重要。测试构成了质量保证的支柱,但手动创建测试用例可能很乏味、容易出错且耗时。输入测试用例生成器,这是一个旨在自动创建测试用例并简化整个测试过程的工具。这篇文章探讨了有效使用测试用例生成器的功…

    2025年3月7日
    200
  • 如何在几分钟内将 Firebase 与 React Native Expo 应用程序集成

    Firebase 作为强大的后端即服务平台,提供用户身份验证、实时数据库和分析等功能。如果您使用 React Native Expo 进行开发,集成 Firebase 是快速便捷地添加这些功能的理想途径。 本文将引导您在短短 5 分钟内完成…

    2025年3月7日
    200
  • JavaScript 中的 DOM

    文档对象模型 (DOM) DOM API 是网页文档的编程接口,它以编程方式呈现页面,允许修改文档结构、样式和内容。DOM 将文档表示为对象树,每个对象代表页面的一部分。 JavaScript 中的 DOM 操作 以下是一些在 JavaSc…

    2025年3月7日
    200
  • 趋势网络编程

    2025年Web编程领域将涌现哪些关键技术趋势?以下几点值得关注: 一、人工智能(AI)与机器学习(ML)的全面融入: AI赋能开发工具: 预计AI驱动的开发工具将大幅增加,为开发者提供代码生成、测试、调试及设计建议等全方位辅助。个性化用户…

    2025年3月7日
    200
  • Javascript – 数组方法

    JavaScript数组常用方法详解 本文将深入探讨JavaScript中常用的数组方法,涵盖数组元素的增删、查找、转换、排序、组合及迭代等操作。 一、元素添加与删除 push(): 向数组末尾添加一个或多个元素,并返回新数组的长度。 le…

    2025年3月7日
    200
  • 系统集成测试:确保组件之间的无缝协作

    系统集成测试 (SIT) 是软件开发中的关键阶段,可确保系统的各个组件无缝交互。通过验证这些组件如何协同工作,SIT 有助于防止可能破坏应用程序性能的潜在集成问题。在这篇博客中,我们将探讨 SIT 的重要性、其流程、挑战、最佳实践和实现有效…

    2025年3月7日
    200
  • Javascript – 数组、字符串、函数、变量类型

    javascript 数组、字符串和函数详解 本文将深入探讨 JavaScript 中数组、字符串和函数的用法,并涵盖一些重要的控制流语句。 数组 JavaScript 数组是一种用于存储多个值(数字、字符串、对象甚至其他数组)的灵活数据结…

    2025年3月7日
    200
  • 分支覆盖率:有效软件测试的关键指标

    分支覆盖率是软件测试中一项关键指标,它衡量测试是否充分覆盖了程序所有可能的执行路径。 不同于仅测试代码语句,分支覆盖率更关注程序中的决策点,例如条件语句(if、else、switch),确保所有分支都至少执行一次。本文将深入探讨分支覆盖率的…

    2025年3月7日
    200
  • 使用 React 和 Pushpad 进行 Web 推送通知

    本教程演示如何在React网站上轻松实现用户订阅网页推送通知功能。我们将创建一个React组件,方便用户订阅/取消订阅推送通知。 我们将使用Pushpad SDK来创建和管理推送订阅。 一、配置Pushpad JavaScript SDK …

    2025年3月7日
    200

发表回复

登录后才能评论