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

Mon parcours React : jour 16

Susan Sarandon
Susan Sarandonoriginal
2024-12-14 11:48:13253parcourir

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]

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

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]

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]

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

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

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!

Déclaration:
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