เมธอดของอาร์เรย์: map, filter, reduce, find

เรียนรู้การแปลง กรอง และรวมข้อมูลด้วยเมธอดอาร์เรย์สี่ตัวที่ใช้มากที่สุดในโปรเจกต์จริง

10 นาที · 3 คำถาม

ในโปรเจกต์จริง คุณจะใช้เวลาไปกับการแปลงข้อมูล เช่น รายการสินค้าที่ต้องแสดง ผลลัพธ์จาก API ที่ต้องเรียงลำดับ หรือตะกร้าสินค้าที่ต้องรวมยอด เมธอด map, filter, reduce และ find ช่วยแทนที่ลูป for ส่วนใหญ่ของคุณด้วยโค้ดที่สั้นลงและสื่อความหมายได้ดีขึ้น เมธอดเหล่านี้ไม่เคยแก้ไขอาร์เรย์ต้นฉบับ แต่จะคืนผลลัพธ์ใหม่ออกมา ซึ่งช่วยป้องกันบั๊กทั้งกลุ่มได้

const products = [
  { name: "keyboard", price: 49, inStock: true },
  { name: "mouse", price: 25, inStock: false },
  { name: "screen", price: 199, inStock: true }
];

const names = products.map((product) => product.name);
console.log(names); // ["keyboard", "mouse", "screen"]

filter เก็บเฉพาะสมาชิกที่ผ่านการทดสอบและคืนอาร์เรย์ใหม่ ซึ่งอาจว่างเปล่าก็ได้ find จะหยุดที่สมาชิกตัวแรกที่ตรงเงื่อนไขและคืนตัวสมาชิกเองออกมา หรือคืน undefined ถ้าไม่มีตัวใดตรงเลย แบบฝึกหัดทางความคิด: หากต้องการสินค้าทั้งหมดที่มีในสต็อก คุณจะเลือกเมธอดใด แล้วถ้าต้องการสินค้าที่ชื่อ "mouse" ตัวเดียว ล่ะ?

const available = products.filter((p) => p.inStock);
console.log(available.length); // 2

const mouse = products.find((p) => p.name === "mouse");
console.log(mouse.price); // 25

reduce เป็นเมธอดที่ทรงพลังที่สุด: มันย่ออาร์เรย์ให้เหลือค่าเดียว (ตัวเลข ออบเจกต์ หรือสตริง) มันรับฟังก์ชันที่มีตัวสะสม (accumulator) และสมาชิกปัจจุบัน พร้อมกับค่าเริ่มต้น กรณีใช้งานคลาสสิก: การคำนวณยอดรวมของตะกร้าสินค้า

const cart = [
  { label: "T-shirt", quantity: 2, unitPrice: 15 },
  { label: "Cap", quantity: 1, unitPrice: 12 }
];

const total = cart.reduce(
  (sum, item) => sum + item.quantity * item.unitPrice,
  0
);
console.log(total); // 42

การเลือกเมธอดที่ถูกต้อง ให้ถามตัวเองด้วยคำถามเดียว: ผลลัพธ์ควรมีรูปร่างแบบใด? มีจำนวนสมาชิกเท่าต้นฉบับแต่ถูกแปลง: ใช้ map ต้องการเซตย่อย: ใช้ filter ต้องการสมาชิกตัวเดียว: ใช้ find ต้องการค่าที่คำนวณได้ค่าเดียว: ใช้ reduce สัญชาตญาณนี้จะช่วยประหยัดเวลาอันมีค่าของคุณทั้งในการสัมภาษณ์และในโปรเจกต์

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. เมธอดใดที่คืนอาร์เรย์ที่มีความยาวเท่ากับอาร์เรย์ต้นฉบับเสมอ?
   • filter
   • map
   • reduce
   • find
2. find คืนค่าอะไรหากไม่มีสมาชิกใดตรงตามเงื่อนไข?
   • null
   • undefined
   • อาร์เรย์ว่าง
   • เกิดข้อผิดพลาดขึ้น
3. ใน cart.reduce((sum, item) => sum + item.unitPrice, 0) ตัวเลข 0 ท้ายสุดมีไว้เพื่ออะไร?
   • เป็นค่าเริ่มต้นของตัวสะสม sum
   • เป็นดัชนีเริ่มต้นของการวนซ้ำ
   • เป็นค่าที่คืนออกมาหากอาร์เรย์ไม่ถูกต้อง