私の React の旅: 16 日目

関数型プログラミング
関数型プログラミングは、共有状態、可変データ、および副作用を回避する関数の使用に焦点を当てています。クリーンで簡潔、予測可能なコードを実現するために、マップ、フィルター、リデュースなどの純粋な関数と操作を強調します。

関数型プログラミングのコア関数
1.map()

• コールバック関数を使用して配列内の各要素を変換し、新しい配列を返します。
• 構文: array.map(callback) 例:

正方形と立方体

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]

日付の書式設定

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()

• 指定された条件 (コールバック) を満たさない要素を除外して、新しい配列を作成します。
• 構文: array.filter(callback) 例:

偶数と奇数

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]

成人 (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()

• コールバック関数を繰り返し適用することで、配列を単一の値に削減します。
• 構文: array.reduce(callback,InitialValue) 例:

価格の合計

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

最大グレードを見つける

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

リフレクション
学んだこと:

• マップを使用して配列を変換する方法。
• フィルターを使用して条件に基づいて配列をフィルター処理します。
• reduce を使用して配列を単一の値 (合計、最大値) に削減します。

この成長がとても気に入っています。

以上が私の React の旅: 16 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。