คุณสามารถใช้มันเพื่อแก้ไขปัญหาที่เกี่ยวข้องกับข้อมูลได้
ด้วย ES6 Javascript และที่อื่นๆ ตอนนี้คุณสามารถ แมป, กรอง, ลด, เรียงลำดับ, แบนราบ และอีกมากมายบนอาร์เรย์ มันค่อนข้างตรงไปตรงมาในการคิด กระชับ และสง่างาม
แต่บางครั้ง สิ่งที่ไม่ทราบแน่ชัดในรายการนี้ก็คือ ลด
คุณอาจยังไม่ทราบถึงประสิทธิภาพของวิธีนี้ มาดูกันดีกว่า
บางทีคุณอาจจินตนาการว่าวิธีเดียวที่จะ "ลด" อาร์เรย์ได้คือการทำให้มันเป็นสิ่งที่ "เล็กลง" เช่น ตัวเลข หรือสตริง ตัวอย่างเช่น:
- ถ้าฉันมีอาร์เรย์ [ 1, 2, 3 ] ฉันสามารถลดมันได้โดยการรวมพจน์ของอาร์เรย์ ดังนั้น 1 + 2 + 3 = 6 หรือโดยการคูณพวกมัน ดังนั้น 1 * 2 * 3 = 6 หรือเพียงเชื่อมตัวเลขเป็นอักขระ ดังนั้นสตริง “123”
แต่ในความเป็นจริงแล้ว การลดมีประสิทธิภาพมากและสามารถบรรลุการเปลี่ยนแปลงข้อมูลใดๆ ได้สำเร็จ คุณสามารถเปลี่ยนจาก Array เป็น Array, Array เป็น Number, Array เป็น Object, Object ถึง Array หรืออะไรก็ได้ที่คุณจินตนาการได้
ดังนั้น ฉันจะโต้แย้งว่าชื่อ “ลด” ไม่ได้ทำให้ยุติธรรม ชื่อควรเป็น “transform” และในใจของคุณ คุณแน่ใจเสมอว่าฟังก์ชันนี้สามารถใช้งานได้ในบริบทต่างๆ มากมาย
ตอนนี้เราจะมาดูตัวอย่างโค้ดกัน มาดูตัวอย่างกันดีกว่า!
ชุดตัวอย่างที่ 1: ผลรวม ผลรวมและผลรวมสูงสุด
ตัวอย่างนี้แสดง “วิธีคิดดั้งเดิม” เกี่ยวกับการลด คุณกำลังลดอาร์เรย์ให้เป็นตัวเลขในแต่ละตัวอย่างนี้:
และคอนโซลบอกว่า:
ดังนั้น เป็นเพียงคำอธิบายสั้น ๆ ของแต่ละตัวอย่าง:
- ผลรวม: เริ่มต้นด้วย 0 นำแต่ละองค์ประกอบมารวมกันเป็นค่าสะสม
- SumProduct: เริ่มต้นด้วย 0 นำแต่ละคู่ (ตัวเลขและตัวประกอบ) และตัวประกอบจำนวน * เป็นค่าสะสม
- MaxNumber: เริ่มต้นโดยไม่มีสิ่งใดเลยและส่งกลับองค์ประกอบแรก หากไม่มีสิ่งใดสะสมอยู่ มิฉะนั้น ให้ส่งคืนตัวเลขหากมากกว่านั้นมากกว่าค่าสะสม หรือมูลค่าสะสม หากไม่สะสม
ตัวอย่างชุดที่ 2: แผนที่ ตัวกรอง ตัวกรองและแผนที่ และ FlatMap
ตอนนี้ เรากำลังก้าวไปอีกขั้นหนึ่งและใช้งานแผนที่แบบคลาสสิก ตัวกรอง ตัวกรอง จากนั้นแมป (ลำดับอื่นก็เป็นไปได้เช่นกัน) และฟังก์ชัน flatMap ทั้งหมดนี้เป็นสับเซตของการลด (“การแปลงรูป”)
และคอนโซลบอกว่า:
คำอธิบายสั้น ๆ ของแต่ละตัวอย่าง:
- แผนที่: เริ่มต้นด้วยอาร์เรย์ว่าง นำอาร์เรย์และฟังก์ชันแล้วส่งคืนค่าที่สะสมบวกกับองค์ประกอบปัจจุบันที่มีฟังก์ชันที่ใช้อยู่
- ตัวกรอง: เริ่มต้นด้วยอาร์เรย์ว่าง ประเมินฟังก์ชันในองค์ประกอบปัจจุบัน และหาก เป็นเท็จ ให้ส่งคืนค่าที่สะสม (ดังนั้น ให้ข้ามองค์ประกอบนี้) แล้วส่งกลับค่า สะสมบวกกับธาตุปัจจุบัน
- FilterMap: นำอาร์เรย์ ซึ่งเป็นฟังก์ชันที่ใช้เป็นตัวกรองและฟังก์ชันในการแมป และรวมกระบวนการทั้งสองแบบในอดีตเข้าด้วยกัน
- FlatMap: เริ่มต้นด้วยอาร์เรย์ว่าง รับอาร์เรย์และฟังก์ชัน และหากองค์ประกอบนั้นเป็นอาร์เรย์ ให้กระจายผลลัพธ์ไปเหนือค่าที่สะสม ไม่เช่นนั้น ให้คืนค่าที่สะสมบวกกับองค์ประกอบปัจจุบันด้วย ฟังก์ชั่นที่ใช้กับมัน
ชุดตัวอย่างที่ 3: ไม่ซ้ำกัน เรียงลำดับและย้อนกลับ
นี่เป็นฟังก์ชันที่มีประโยชน์มากซึ่งสามารถนำไปใช้ได้ด้วยการย่อ ข้อได้เปรียบที่สำคัญเหนือฟังก์ชันดั้งเดิมที่ Array.Prototype มอบให้ก็คือ คุณสามารถรวมการแปลงมากกว่าหนึ่งรายการในขั้นตอนเดียวได้หากต้องการ... แต่จริงๆ แล้ว จุดประสงค์ของตัวอย่างนี้เป็นเพียงการแสดงให้คุณเห็น พลังที่มากขึ้นของฟังก์ชันลด:
และคอนโซลบอกว่า:
คำอธิบายสั้น ๆ ของแต่ละตัวอย่าง:
- ไม่ซ้ำกัน: เริ่มต้นด้วยอาร์เรย์ว่าง นำองค์ประกอบและตรวจสอบว่ามีค่าสะสมอยู่แล้วหรือไม่ ถ้ามี ให้ส่งคืนมูลค่าสะสม (ดังนั้นให้ข้ามไป) หรือส่งคืนมูลค่าสะสมบวกองค์ประกอบ
- จัดเรียง: เริ่มต้นด้วยอาร์เรย์ว่างและแยกค่าสะสมออกเป็น 2 ชุด ได้แก่ ชุดขององค์ประกอบ “น้อยกว่าหรือเท่ากับค่าปัจจุบัน” และชุดขององค์ประกอบ “มากกว่าค่าปัจจุบัน” หลังจากนั้น ให้คืนค่าทั้งสองชุดโดยมีองค์ประกอบปัจจุบันเป็น "ตรงกลาง"
- ย้อนกลับ: ด้วย ES6 มันค่อนข้างตรงไปตรงมา เพียงส่งคืนค่าและบวกค่าสะสมต่อท้าย ดังนั้นองค์ประกอบสุดท้ายของการวนซ้ำแต่ละครั้งจะอยู่ในตำแหน่งแรกของอาร์เรย์เสมอ
ตัวอย่างชุดที่ 4: Object เข้าสู่ Array และ Array เข้าไปใน Object
หากคำพ้องความหมายของการลด "การเปลี่ยนแปลง" ไม่ชัดเจนจากจุดนี้ก็จะชัดเจนจริงๆ บางครั้งคุณจำเป็นต้องแปลง Array ให้เป็น Object หรือในทางกลับกัน คุณสามารถใช้ฟังก์ชันอะไรได้บ้าง? ใช่! ลด!
และคอนโซลบอกว่า:
คำอธิบายสั้น ๆ ของแต่ละตัวอย่าง:
- Object To Array: เริ่มต้นด้วยอาร์เรย์ว่างและวนซ้ำบนคีย์ Object (ซึ่งเป็นอาร์เรย์ด้วย) สำหรับแต่ละคีย์ ให้ใช้ค่า (object[key]) ด้วย และส่งกลับค่าสะสมบวกกับ object { key: value } ตัวอย่างอาจดูไม่มีประโยชน์มากนัก แต่จะมีประโยชน์หากคุณจินตนาการว่าคุณกำลังเรนเดอร์รายการด้วย React และสะดวกที่จะมีข้อมูลอ็อบเจ็กต์เป็นอาร์เรย์
- อาร์เรย์ไปยังวัตถุ: เริ่มต้นด้วยวัตถุว่างและวนซ้ำในอาร์เรย์เพื่อส่งคืนวัตถุที่มีฟิลด์ id เป็นฟิลด์ระดับแรกของวัตถุ และส่วนที่เหลือของฟิลด์เป็น เนื้อหา. บางครั้งสิ่งนี้มีประโยชน์เมื่อคุณต้องการจัดกลุ่มอาร์เรย์หนึ่งที่มีข้อมูลเกี่ยวกับเอนทิตี (แสดงโดย id) ให้มากขึ้น และส่งคืนทุกสิ่งในออบเจ็กต์เดียวเพื่อการประมวลผลต่อไป
ดังนั้น ฟังก์ชันลดสามารถดูได้เหมือนกระบวนการมากกว่า ในวิธีดั้งเดิม: INPUT =› PROCESS =› OUTPUT
โบนัส 1: ลดจริงเมื่อเพิ่ม!
เนื่องจากคุณไม่จำเป็นต้องมีตัวเลขเพียงตัวเดียวในผลลัพธ์ หรือเป็นค่าพื้นฐานเดียวกัน หรือแม้แต่องค์ประกอบอินพุตจำนวนเท่ากัน คุณสามารถใช้ reduce เพื่อ เพิ่มองค์ประกอบใหม่ให้กับข้อมูลอินพุตของคุณจริง ๆ
นี่เป็นตัวอย่างในโลกแห่งความเป็นจริง (แบบง่าย) ซึ่งคุณมีรายการองค์ประกอบที่จัดหมวดหมู่ในลักษณะใดลักษณะหนึ่ง และคุณต้องการนำเสนอองค์ประกอบเหล่านั้น แต่ใส่ชื่อบางส่วนที่ระบุหมวดหมู่
ตัวอย่างเช่น:
และคอนโซลพูดว่า:
ดังนั้น คุณกำลัง "สร้าง" รายการใหม่โดยการรวมเข้ากับข้อมูลพื้นฐานที่แตกต่างกัน และแน่นอนว่าไม่มีขีดจำกัด อาจเป็นเอนทิตีจำนวนเท่าใดก็ได้ที่สามารถรวมเป็นรายการเดียวที่พร้อมจะส่งผ่านไปยัง DOM เพื่อแสดงผล
โบนัส 2: การใช้การลดเพื่อประมวลผลห่วงโซ่สัญญา (ตามลำดับ)
การใช้การลดอีกอย่างหนึ่งที่ฉันพบว่ามีประโยชน์มากคือเพื่อให้แน่ใจว่ามีลำดับ เมื่อคุณประมวลผล Promise Chain โดยปกติแล้วคุณจะต้องการผลลัพธ์ของสัญญาก่อนหน้าเพื่อใช้เป็นข้อมูลสำหรับสัญญาถัดไป และอื่นๆ
ลดเหลือกู้ภัย!
และคอนโซลพูดว่า:
และเราสามารถหยุดที่นี่ได้
ตัวอย่างทั้งหมดอยู่ใน "JS Fiddle" นี้
ฉันหวังว่าตอนนี้คุณจะมีแนวคิดเพิ่มเติมในการใช้ reduce เพื่อสร้างโค้ดที่อ่านง่ายและสวยงามในโปรเจ็กต์ของคุณ!
ไชโยจากชิลี 🇮🇱!!
