Frontend Academy · บทเรียน

เมธอด Array: map, filter, reduce และ find

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

บทเรียน 1 จาก 413 ขั้นตอน

เมธอด Array: map, filter, reduce และ find เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงใช้เมธอดของ Array

ลูป for แบบระบุขั้นตอนใช้งานได้ แต่ซ่อนเจตนาของโค้ดไว้ เมธอดระดับสูงของ Array ระบุว่า ต้องการอะไร แทนที่จะระบุว่า จะวนซ้ำอย่างไร ทำให้ได้โค้ดที่อ่านง่าย ทดสอบได้ และนำมาประกอบกันได้ ซึ่งอ่านคล้ายร้อยแก้ว

Array.map() — แปลงสมาชิกทุกตัว

map() ส่งคืนอาร์เรย์ใหม่ที่สมาชิกทุกตัวถูกแปลงด้วยฟังก์ชันเรียกกลับ อาร์เรย์เดิมจะไม่ถูกแก้ไข ใช้เมธอดนี้เมื่อต้องการแปลงอาร์เรย์หนึ่งเป็นอีกอาร์เรย์หนึ่ง

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — เลือกสมาชิกที่ตรงเงื่อนไข

filter() ส่งคืนอาร์เรย์ใหม่ที่มีเฉพาะสมาชิกซึ่งฟังก์ชันเรียกกลับส่งคืนค่าที่ถือว่าเป็นจริง ฟังก์ชันเรียกกลับนี้คือฟังก์ชันเงื่อนไข

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — สะสมค่า

reduce(callback, initialValue) สะสมสมาชิกทั้งหมดให้เป็นค่าเดียว ฟังก์ชันเรียกกลับจะได้รับตัวสะสมและสมาชิกปัจจุบัน ค่าเริ่มต้นคือตัวสะสมในจุดเริ่มต้น

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — ค่าที่ตรงกันตัวแรก

find() ส่งคืนสมาชิกตัวแรกที่ตรงกับเงื่อนไข หรือส่งคืน undefined หากไม่พบ ใช้เมธอดนี้เพื่อค้นหารายการตาม ID หรือค่าของพร็อพเพอร์ตี

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() คล้ายกับ find() แต่ส่งคืนดัชนีของสมาชิกที่ตรงกัน หรือ -1 หากไม่พบ มีประโยชน์เมื่อต้องการค้นหาตำแหน่งที่จะอัปเดตสมาชิกในอาร์เรย์

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() และ Array.every()

some() ส่งคืน true หากมีสมาชิกอย่างน้อยหนึ่งตัวผ่านการทดสอบ every() ส่งคืน true ก็ต่อเมื่อสมาชิกทุกตัวผ่านการทดสอบ ทั้งสองเมธอดจะหยุดทันทีเมื่อได้ผลลัพธ์ที่ชี้ขาด

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — แปลงแล้วทำให้แบน

flatMap() แปลงสมาชิกแต่ละตัวแล้วทำให้ผลลัพธ์แบนลงหนึ่งระดับ เทียบเท่ากับ .map(...).flat() แต่มีประสิทธิภาพกว่า

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

การเชื่อมเมธอดของ Array

เมธอดจะส่งคืนอาร์เรย์ใหม่ คุณจึงเชื่อมเมธอดเข้าด้วยกันได้ ให้อ่านสายโซ่จากซ้ายไปขวา: กรองก่อน จากนั้นแปลง แล้วจึงรวมผล

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() และ Array.includes()

at(-1) ใช้เข้าถึงสมาชิกตัวสุดท้าย includes(value) ตรวจสอบว่ามีค่าอยู่หรือไม่ สะอาดกว่าการใช้ arr[arr.length - 1] และ arr.indexOf(v) !== -1 อย่างมาก

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

ความไม่เปลี่ยนแปลง: อย่าแก้ไขข้อมูลเดิม

map, filter และ reduce ส่งคืนอาร์เรย์ใหม่ ส่วน push, pop และ splice จะเปลี่ยนอาร์เรย์เดิม ในสถานะของ React ให้สร้างอาร์เรย์ใหม่เสมอ (ด้วย spread หรือ map) แทนการแก้ไขสถานะโดยตรง

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

ตรวจสอบความเข้าใจ

เมธอดของอาร์เรย์ใดส่งคืน อาร์เรย์ใหม่ ที่มีสมาชิกซึ่งฟังก์ชันเรียกกลับส่งคืนค่า true

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: เมธอดของ Array

map() แปลงสมาชิกทุกตัว filter() เลือกสมาชิกที่ตรงเงื่อนไข reduce() สะสมให้เป็นค่าเดียว find() ส่งคืนค่าที่ตรงกันตัวแรก some()/every() ตรวจสอบการมีอยู่ การเชื่อมเมธอดเหล่านี้เข้าด้วยกันช่วยแทนที่ลูปซ้อนด้วยกระบวนการประมวลผลข้อมูลที่อ่านง่ายและประกาศเจตนาอย่างชัดเจน

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “เมธอด Array: map, filter, reduce และ find” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เมธอด Array: map, filter, reduce และ find” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เมธอด Array: map, filter, reduce และ find”

แปลง กรอง และรวมข้อมูลในอาร์เรย์ด้วยเมธอดลำดับสูง แทนการเขียนลูปเอง แล้วเชื่อมเมธอดเหล่านี้เพื่อสร้างสายงานประมวลผลข้อมูลที่สื่อความหมายได้ชัดเจน คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “เมธอด Array: map, filter, reduce และ find” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

เมธอด Array: map, filter, reduce และ find
การแยกโครงสร้างออบเจ็กต์และ Spread
Template Literals และ Optional Chaining
โมดูล: import และ export

← กลับไปที่ Frontend Academy