我的 React 之旅:第 16 天

我的 react 之旅:第 16 天

函数式编程
函数式编程侧重于使用避免共享状态可变数据副作用的函数。它强调纯粹的函数和操作,如映射、过滤和归约,以实现干净、简洁和可预测的代码。

函数式编程的核心功能
1.map()

使用回调函数转换数组中的每个元素并返回一个新数组。语法:array.map(callback)示例:

正方形和立方体

const numbers = [1, 2, 3, 4, 5];function square(element) {    return math.pow(element, 2);}function cube(element) {    return math.pow(element, 3);}const squares = numbers.map(square);const cubes = numbers.map(cube);console.log(squares); // [1, 4, 9, 16, 25]console.log(cubes);   // [1, 8, 27, 64, 125]

登录后复制

格式化日期

const dates = ["2024-1-10", "2025-2-20", "2026-3-30"];function formatdate(element) {    const parts = element.split("-");    return `${parts[1]}/${parts[2]}/${parts[0]}`;}const formatteddates = dates.map(formatdate);console.log(formatteddates); // ['1/10/2024', '2/20/2025', '3/30/2026']

登录后复制

2.filter()

通过过滤掉不满足给定条件的元素(回调)来创建新数组。语法:array.filter(回调)示例:

偶数和奇数

const numbers = [1, 2, 3, 4, 5, 6, 7];function iseven(element) {    return element % 2 === 0;}function isodd(element) {    return element % 2 !== 0;}const evennums = numbers.filter(iseven);const oddnums = numbers.filter(isodd);console.log(evennums); // [2, 4, 6]console.log(oddnums);  // [1, 3, 5, 7]

登录后复制

过滤成人(年龄 >= 18)

const ages = [16, 17, 18, 18, 19, 20, 60];function isadult(element) {    return element >= 18;}const adults = ages.filter(isadult);console.log(adults); // [18, 18, 19, 20, 60]

登录后复制

3.reduce()

通过迭代应用回调函数将数组减少为单个值。语法:array.reduce(回调, 初始值)示例:

价格总和

const prices = [5, 30, 10, 25, 15, 20];function sum(previous, next) {    return previous + next;}const total = prices.reduce(sum);console.log(`$${total.tofixed(2)}`); // $105.00

登录后复制

查找最高成绩

const grades = [75, 50, 90, 80, 65, 95];function getMax(accumulator, element) {    return Math.max(accumulator, element);}const maximum = grades.reduce(getMax);console.log(maximum); // 95

登录后复制

倒影
我学到了什么

如何使用映射转换数组。使用过滤器根据条件过滤数组。使用reduce 将数组减少为单个值(总和、最大值)。

我喜欢这种成长。

以上就是我的 React 之旅:第 16 天的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月7日 07:37:17
下一篇 2025年2月28日 20:15:20

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

相关推荐

  • 斯堪的纳维亚航空因无障碍问题被罚款 10 美元

    他们在两个不同的市场面临法律诉讼。 您知道吗,2017 年,挪威政府给斯堪的纳维亚航空公司 (SAS) 12 个月的时间来修复其网站上的辅助功能错误。 SAS 没有构建可与 WCAG 内联访问的主网站,而是根据第三方公司的建议创建了一个单独…

    2025年3月7日
    200
  • React 给我们带来了哪些关键更新和创新

    2024年,React生态系统持续发展壮大,稳固其作为现代前端开发核心技术的地位。这一年涌现出令人振奋的更新、优化和新趋势,帮助开发者构建更快速、高效、用户友好的应用程序。本文深入探讨React在2024年的重大更新及其对开发者带来的影响。…

    2025年3月7日
    200
  • 你需要知道的 React v 的主要特性

    React 框架在2025年持续演进,最新版本v19带来了多项令人兴奋的更新,显著提升了性能、易用性和开发体验。本文将深入探讨React v19的五大核心特性,包括全新编译器、服务器组件、Actions、增强型Hooks以及改进的资源加载机…

    2025年3月7日
    200
  • 设计令人愉快的维护中页面 HTML 和 CSS

    网站维护期间,一个设计精良的“维护中”页面至关重要,它能有效地向用户传达网站暂时停运的信息,并确保透明度和用户参与度。本文将深入探讨如何使用HTML和CSS设计这样的页面,使其兼具视觉吸引力、响应速度和功能性。 为什么“维护中”页面如此重要…

    2025年3月7日
    200
  • ❄️Devto新年快乐!我的结果️

    新年快乐!回顾2024,展望2025!这一年,我取得了一些令人兴奋的成果,现在就和大家分享一下。也欢迎大家在评论区分享你们的成就! Campel.js 的优化之路 2024 年,我的主要目标是提升 Campel.js 框架的性能,使其成为网…

    2025年3月7日 编程技术
    200
  • SaaS产品开发的主要挑战是什么

    软件即服务 (SaaS) 应用开发面临诸多独特挑战,这些挑战直接关系到应用的成功与否及长期发展。本文将重点剖析SaaS开发的九大难点: 用户获取: 说服用户放弃现有方案或选择一款新产品并非易事。成功的关键在于精准的营销策略和清晰的价值主张,…

    2025年3月7日
    200
  • 一致性模型和复制缓存

    一致性模型详解:分布式系统中的数据一致性保证 一致性模型定义了一组规则,规定了分布式系统中数据的一致性程度。本文将探讨几种常见的一致性模型,并分析其特点及适用场景。 之前的文章讨论过PACELC理论中延迟和一致性之间的权衡,以及不同权衡下的…

    2025年3月7日 编程技术
    200
  • 将人工智能和编程融入早期 STEM 教育

    在蓬勃发展的STEM领域,及早培养人工智能和编程技能至关重要。本文将分享一些实践项目,帮助教师有效地向学生传授这些关键概念。 面对日益激烈的STEM就业竞争,尤其在人工智能时代,尽早接触这些技术能让学生掌握解决问题、创新和批判性思维等核心技…

    2025年3月7日
    200
  • 发现最新的 React 生态系统趋势和创新 5

    React,这个构建动态用户界面的领先JavaScript库,持续引领着Web开发的变革。2025年,React生态系统涌现出诸多突破性功能和新兴工具,显著提升开发效率、流畅度和可扩展性。 本文将深入探讨最新更新,剖析React 19的核心…

    2025年3月7日
    200
  • 了解 JavaScript 异步编程:回调、Promise 和 Async/Await

    JavaScript 的异步特性对于构建响应迅速、高效且用户友好的应用至关重要。熟练掌握异步编程的核心概念(例如回调函数、Promise 和 Async/Await)是开发成功的关键。本文将深入探讨这些概念,分析它们的应用场景、优势和不足。…

    2025年3月7日
    200

发表回复

登录后才能评论