Mon parcours React : jour 16-js tutoriel-php.cn

Mon parcours React : jour 16

Susan Sarandon

Libérer： 2024-12-14 11:48:13

original

251 Les gens l'ont consulté

My React Journey: Day 16

Programmation Fonctionnelle
La programmation fonctionnelle se concentre sur l'utilisation de fonctions qui évitent les états partagés, les données mutables et les effets secondaires. Il met l'accent sur les fonctions et opérations pures telles que mapper, filtrer et réduire pour un code propre, concis et prévisible.

Fonctions essentielles de la programmation fonctionnelle
1.map()

Transforme chaque élément d'un tableau à l'aide d'une fonction de rappel et renvoie un nouveau tableau.
Syntaxe : array.map(callback) Exemples :

Carrés et Cubes

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]

Copier après la connexion

Formatage des dates

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']

Copier après la connexion

2.filter()

Crée un nouveau tableau en filtrant les éléments qui ne satisfont pas à une condition donnée (rappel).
Syntaxe : array.filter(callback) Exemples :

Nombres pairs et impairs

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]

Copier après la connexion

Filtrer les adultes (âge> = 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]

Copier après la connexion

3.reduce()

Réduit le tableau à une valeur unique en appliquant une fonction de rappel de manière itérative.
Syntaxe : array.reduce(callback, initialValue) Exemples :

Somme des prix

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)}`); // 5.00

Copier après la connexion

Trouver la note maximale

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

Copier après la connexion

Réflexion
Ce que j'ai appris :