Skip to main content
0
JavaScriptProgramming Language

Map Reduce 101 – มันคืออิหยังวะ ?

เชื่อว่าใครก็ตามที่เขียนโปรแกรมมาซักระยะหนึ่งแล้วก็คงจะเคยปวดหัวกับการจัดการข้อมูลที่อยู่ใน array หรือ json ที่มีจำนวนมากๆมาแล้วอย่างแน่นอน ซึ่งถ้าเราจัดการกับมันด้วยท่าปกติแล้ว เราก็อาจจะใช้ for loop วนเข้าไปจัดการกับข้อมูลทีละตัวแล้วทำให้มันออกมาเป็นรูปแบบที่เราต้องการ วันนี้เราจะมารู้จักกับสิ่งที่จะทำให้การจัดการข้อมูลนั้นง่ายขึ้นในบางกรณี นั่นก็คือ Map และ Reduce นั่นเอง แต่ละตัวในภาษา JavaScript ทำงานยังไงและต่างกันยังไงมาดูกันเลย!

เราจะสมมุติข้อมูลขึ้นมา 1 ชุด ซึ่งเป็นข้อมูลสรุปรายรับรายจ่าย แต่เพื่อไม่ให้มันยืดยาวเกินไปเลยจะให้มีข้อมูลแค่ 3 ตัวพอซึ่งมีข้อมูลดังนี้

let receipt = [
   { name:"sausage", price:42 }, 
   { name:"coffee", price: 32 }, 
   { name:"orange", price: 20 }
]

ถ้าเราอยากรู้ว่าใบเสร็จนี้เราซื้ออะไรไปบ้างด้วยท่า foreach เราอาจจะสร้าง list เปล่าขึ้นมา 1 ตัว แล้วค่อยๆ push เพิ่มชื่อสินค้าเข้าไปแบบนี้

items = []

receipt.forEach(function (receipt) {
   items.push(receipt.name)
})

console.log(items) // [sausage, coffee, orange]

เราก็จะได้ list ของชื่อสินค้าออกมาตามที่เราต้องการ

แต่เราสามารถใช้ Map เพื่อทำสิ่งนี้ได้

items = receipt.map(function (receipt) {
   return receipt.name
});

console.log(items) // [sausage, coffee, orange]

จะเห็นว่าผลลัพธ์ที่ออกมานั้นเหมือนกัน แต่สำหรับ .map() เราไม่จำเป็นต้องสร้าง list ขึ้นมาเพื่อค่อยๆ push ข้อมูลเข้าไปทีละตัวๆ แต่เราสามารถนำตัวแปรมารับค่าที่ return ได้เลย โดยที่ map นั้นจะ return ออกมาเป็น list ได้ทันที

แล้ว Reduce ล่ะ?

Reduce เองก็เป็นทางเลือกในการจัดการข้องมูลเช่นเดียวกับ map แต่ reduce จะเหมาะกับการใช้หาผลลัพธ์ของการดำเนินการที่เหมือนกันกับข้อมูลไปเรื่อยๆ และจะ return ค่าๆนั้นออกมาในตอนสุดท้าย

เช่น ถ้าเราอยากได้ผลรวมของราคาสินค้าที่ในใบเสร็จนั้นๆก็สามารถทำได้แบบนี้

let total = receipt.reduce(function (sum, receipt) {
   return sum + receipt.price
}, 0)

console.log(total) //94

โดยรวมแล้วจะบอกว่า map และ reduce จะสามารถใช้แทน for loop ในด้านการจัดการข้อมูลใน array ได้เลยก็คงจะไม่ใช่ขนาดนั้น เพราะ for loop นั้นเรียกได้ว่าเป็นพื้นฐานที่แทบจะจัดการได้ในทุกกรณี แต่การใช้ map และ reduce ในบางกรณีนั้นสามารถทำได้ดีกว่า for loop แบบธรรมดา เช่นที่อธิบายในตัวอย่างของ .map() และในด้านการเขียนโค้ดที่ดูอ่านง่าย ถ้าใครยังไม่เคยใช้ map หรือ reduce ในโค้ดล่ะก็ อยากให้ลองเอาไปใช้ซักรอบอาจจะติดใจก็ได้นะ

ขอบคุณข้อมูลดีๆจาก

https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d

Developer

Author Developer

More posts by Developer

Leave a Reply

Close Menu

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า