我的 React 之旅：第 16 天

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《我的 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 天》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！