我的 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 天的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 21:46:22
下一篇 2025年12月19日 21:46:30

相关推荐

发表回复

登录后才能评论
关注微信