Maison > interface Web > js tutoriel > Mon parcours React : jour 16

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 :

  • Comment transformer des tableaux à l'aide de map.
  • Filtrage des tableaux en fonction des conditions à l'aide d'un filtre.
  • Réduire les tableaux à une valeur unique (somme, maximum) à l'aide de réduire.

J'adore cette croissance.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal