ทำความเข้าใจกับเมธอด `reduce` ใน JavaScript

Mar 27 2023

คำว่า "ลด" หมายถึง "การทำให้บางสิ่งเล็กลง" เป็นแนวคิดการเขียนโปรแกรมเชิงฟังก์ชันซึ่งใช้ฟังก์ชันกับตัวสะสมและแต่ละองค์ประกอบในอาร์เรย์เพื่อลดให้เป็นค่าเดียว

คำว่า"ลด"หมายถึง "การทำให้บางสิ่งเล็กลง" เป็นแนวคิดการเขียนโปรแกรมเชิงฟังก์ชันซึ่งใช้ฟังก์ชันกับตัวสะสมและแต่ละองค์ประกอบในอาร์เรย์เพื่อลดให้เป็นค่าเดียว เป็นแนวคิดที่ทรงพลังมากและใช้ในการพัฒนาไลบรารี่และเฟรมเวิร์กที่ซับซ้อนเช่นReduxหรือRamda

ในการลด JavaScript สามารถใช้ได้เป็นวิธีการอาร์เรย์ ฉันใช้ วิธี ลดขนาดในการทำงานมานานแล้ว อย่างไรก็ตาม ฉันสังเกตเห็นว่าเพื่อนและเพื่อนร่วมงานหลายคนพยายามทำความเข้าใจและใช้วิธีนี้อย่างได้ผล ดังนั้นฉันจึงตัดสินใจเขียนบทความนี้เพื่ออธิบายวิธีการลดขนาดด้วยคำที่ง่ายขึ้น แนวคิดอันทรงพลังนี้สามารถช่วยปรับโค้ดให้เหมาะสมและนำระบบและตรรกะที่ซับซ้อนไปใช้ได้ หวังว่านี่จะช่วยให้ผู้คนจำนวนมากเข้าใจได้อย่างถูกต้อง

ตอนนี้ ลืมเกี่ยวกับreduceวิธี Array ไปก่อน เราจะสร้างฟังก์ชั่นของเราเองreduceตั้งแต่เริ่มต้นเพื่อให้เข้าใจถึงสิ่งที่มันทำได้ดีขึ้น

ทำลายสิ่งต่าง ๆ ลง

ในการเริ่มต้น เรามาแยกส่วนประกอบต่างๆ ในฟังก์ชันลดขนาด กันก่อน

ตัวสะสม — เป็นตัวแปรที่เก็บผลลัพธ์หลังจากการลดแต่ละขั้นตอน มันจะกลายเป็นข้อมูลเข้าสู่ขั้นตอนต่อไป
ตัวลด — เป็นฟังก์ชันที่ใช้ตัวสะสมและแต่ละองค์ประกอบของอาร์เรย์ ควรส่งคืนค่าตัวสะสมสำหรับขั้นตอนถัดไป กำหนดแต่ละขั้นตอนในการลดลง
ค่าเริ่มต้น — เป็นมูลค่าของAccumulatorสำหรับขั้นตอนการลดขั้นแรก คุณสามารถพิจารณาสิ่งนี้ว่าเป็นค่าเมล็ดพันธุ์ชนิดหนึ่ง ผลลัพธ์สุดท้ายของการลดจะขึ้นอยู่กับค่าเริ่มต้นและตัวลด เท่านั้น
Input Array - ไม่ต้องการคำอธิบายเพิ่มเติมกับสิ่งนี้

ฉันจะใช้TypeScriptเพื่อสร้างฟังก์ชันในบทความนี้ สิ่งนี้จะช่วยให้ฉันใช้ประเภทสแตติกเพื่อกำหนดฟังก์ชันได้ดีขึ้นและช่วยให้ผู้อ่านเข้าใจได้ดีขึ้น

type Reducer<TEle, TAcc> = (acc: TAcc, ele: TEle) => TAcc;

function reduce<TEle, TAcc>(
 arr: TEle[],
 reducer: Reducer<TEle, TAcc>,
 initialValue: TAcc
) {
// TODO: Implement
}

พิจารณาตัวอย่างง่ายๆ ของการลดลง — “ ผลรวมขององค์ประกอบในอาร์เรย์” ควรใช้ตรรกะสำหรับสิ่งนี้ค่อนข้างง่าย มาทำกันเถอะ:

const arr = [1,2,3,4,5,6,7,8,9,10];

let sum = 0;

for (let num of arr) {
    sum = sum + num;
}

console.log(sum);

ผลรวมขององค์ประกอบที่เป็นส่วนประกอบของการลดลง

ตอนนี้เราสามารถเขียนโค้ดเดียวกันใหม่ได้โดยง่ายโดยการรวมส่วนประกอบต่างๆ ของการลด

const arr = [1,2,3,4,5,6,7,8,9,10];
const initialValue = 0;
const reducer = (acc: number, ele: number) => acc + ele;

let acc = 0;

for (let ele of arr) {
    acc = reducer(acc, ele);
}

ตอนนี้เราสามารถใช้ข้อมูลข้างต้นเพื่อทำreduceหน้าที่ ของเราให้สมบูรณ์

type Reducer<TEle, TAcc> = (acc: TAcc, ele: TEle) => TAcc;

function reduce<TEle, TAcc>(
 arr: TEle[],
 reducer: Reducer<TEle, TAcc>,
 initialValue: TAcc
) {
    let acc = initialValue;
    for (let ele of arr) {
        acc = reducer(acc, ele);
    }
    return acc;
}

พารามิเตอร์ตัวลดใน วิธี การลดยังใช้ดัชนีและอาร์เรย์อินพุตเป็นอาร์กิวเมนต์ แต่โดยพื้นฐานแล้วจะใช้ในลักษณะเดียวกับ ฟังก์ชัน ลดที่เราเพิ่งสร้างขึ้น

อะไรต่อไป?

ตอนนี้ มีบางสิ่งที่คุณสามารถทำได้มากขึ้นเพื่อให้เก่งในการใช้การลดคือการฝึกฝนและลองใช้ตรรกะการลดความซับซ้อน บางรายการที่คุณสามารถลองได้คือ: