Heim > Web-Frontend > js-Tutorial > Meine Reaktionsreise: Tag 16

Meine Reaktionsreise: Tag 16

Susan Sarandon
Freigeben: 2024-12-14 11:48:13
Original
251 Leute haben es durchsucht

My React Journey: Day 16

Funktionale Programmierung
Die funktionale Programmierung konzentriert sich auf die Verwendung von Funktionen, die gemeinsame Zustände, veränderliche Daten und Nebeneffekte vermeiden. Der Schwerpunkt liegt auf reinen Funktionen und Operationen wie Zuordnen, Filtern und Reduzieren für sauberen, prägnanten und vorhersehbaren Code.

Kernfunktionen der funktionalen Programmierung
1.map()

  • Transformiert jedes Element in einem Array mithilfe einer Rückruffunktion und gibt ein neues Array zurück.
  • Syntax: array.map(callback) Beispiele:

Quadrate und Würfel

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]
Nach dem Login kopieren

Datumsangaben formatieren

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']
Nach dem Login kopieren

2.filter()

  • Erstellt ein neues Array, indem Elemente herausgefiltert werden, die eine bestimmte Bedingung nicht erfüllen (Rückruf).
  • Syntax: array.filter(callback) Beispiele:

Gerade und ungerade Zahlen

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]
Nach dem Login kopieren

Erwachsene filtern (Alter >= 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]
Nach dem Login kopieren

3.reduce()

  • Reduziert das Array auf einen einzelnen Wert, indem eine Rückruffunktion iterativ angewendet wird.
  • Syntax: array.reduce(callback, initialValue) Beispiele:

Summe der Preise

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
Nach dem Login kopieren

Höchstnote finden

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
Nach dem Login kopieren

Reflexion
Was ich gelernt habe:

  • So transformieren Sie Arrays mithilfe von Map.
  • Arrays basierend auf Bedingungen mithilfe von Filtern filtern.
  • Arrays mit Reduzieren auf einen einzelnen Wert (Summe, Maximum) reduzieren.

Ich liebe dieses Wachstum.

Das obige ist der detaillierte Inhalt vonMeine Reaktionsreise: Tag 16. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage