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

Meine Reaktionsreise: Tag 16

Susan Sarandon
Susan SarandonOriginal
2024-12-14 11:48:13253Durchsuche

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]

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

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]

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]

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

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

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!

Stellungnahme:
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