13: Array Mastery

1. Array คืออะไร

Array คือ รูปแบบของตัวแปรที่สามารถเก็บค่าหลาย ๆ ค่าไว้ในตัวแปรเดียวได้ อาจมองภาพเป็น "ขบวนรถไฟ" ที่เก็บข้อมูลหลาย ๆ ชิ้นไว้ในรถไฟขบวนเดียว โดยแต่ละตู้จะมีเลขที่นั่ง (Index) กำกับเสมอ

คำสั่งพื้นฐาน

Create let arr = []
Add .push(data) เพิ่มต่อท้าย
Remove .pop() ลบตัวท้ายสุด
Count .length นับจำนวน

จำไว้เสมอ: Index เริ่มนับที่ 0 (ตัวแรกคือช่อง 0)

JS

let todoList = ["นอน", "กินข้าว", "อ่านหนังสือ", "ซื้อของใช้"];

// 1. เข้าถึงข้อมูล (Access)
console.log(todoList[0]); // "นอน"

// 2. เพิ่มงาน (Push) -> ต่อท้ายแถว
todoList.push("เขียนโค้ด"); 
// ผล: ["นอน", "กินข้าว", "อ่านหนังสือ", "ซื้อของใช้", "เขียนโค้ด"]

// 3. ลบงานล่าสุด (Pop) -> เอาตัวท้ายออก
let doneJob = todoList.pop(); 
console.log(doneJob); // "เขียนโค้ด" (ตัวที่ถูกลบ)

// 4. เช็คจำนวน
console.log(todoList.length); // 4

2. High Order Functions

ต้องรู้!

ในยุค Node.js และ React มักจะไม่ค่อยใช้ for loop แบบเดิมแล้ว แต่จะใช้ "ฟังก์ชันสั่งงาน Array" แทน เพราะเขียนสั้นกว่าและอ่านง่ายกว่ามาก

2.1 .forEach() (วนลูปทำอะไรสักอย่าง)

ใช้แทน for loop ปกติ เพื่อสั่งงานทีละตัว

JS

let prices = [100, 200, 300];

// วนลูปแสดงราคา
prices.forEach((p) => {
    console.log(`ราคา: ${p} บาท`);
});

2.2 .map() (แปลงร่างข้อมูล)

สร้าง Array ใหม่ ที่สมาชิกถูก "เปลี่ยนแปลง" ค่าแล้ว (ใช้บ่อย)

JS

let prices = [100, 200, 300];

// สร้าง Array ใหม่ ที่ลดราคา 50%
let salePrices = prices.map(p => p * 0.5);

console.log(salePrices); // [50, 100, 150]

2.3 .filter() (คัดกรอง)

สร้าง Array ใหม่ ที่เลือกเก็บค่า "เฉพาะตัวที่ผ่านเงื่อนไข"

JS

let scores = [45, 80, 60, 30, 90];

// เอาเฉพาะคนที่สอบผ่าน (>= 50)
let passed = scores.filter(s => s >= 50);

console.log(passed); // [80, 60, 90]

2.4 .find() (ค้นหาเจอตัวแรก)

คืนค่าข้อมูล "ตัวแรก" ที่เจอตามเงื่อนไข (เจอแล้วหยุดเลย)

JS

let users = ["Ant", "Bird", "Cat"];

// หาชื่อที่ขึ้นต้นด้วย B
let result = users.find(u => u.startsWith("B"));

console.log(result); // "Bird"

Arrow Function Patterns (สูตรลัดที่เจอบ่อย)

เมื่อใช้กับ Array Methods นิยมเขียนแบบย่อ (Shorthand) เพื่อความกระชับ

รูปแบบ	ตัวอย่าง Code	ผลลัพธ์ (สมมติ)	คำอธิบาย
1. ย่อสุดๆ (One-liner) นิยมที่สุด	`[1, 2, 3].map(x => x * 2)` `[5, 12, 8].filter(x => x > 10)`	`[2, 4, 6]` `[12]`	ตัด `()`: ถ้า Parameter มีตัวเดียว ตัด `{}` และ `return`: ถ้าคำสั่งมีบรรทัดเดียว (Return อัตโนมัติ)
2. รับหลายค่า (Multiple Params)	`['a', 'b'].map((item, index) => item + index)`	`["a0", "b1"]`	ต้องใส่ `()` เสมอ ถ้ามี Parameter มากกว่า 1 ตัว (เช่น รับ index)
3. หลายบรรทัด (Block Body)	`[1, 2, 3].map(x => { let temp = x * 2; return temp; })`	`[2, 4, 6]`	ใช้เมื่อการคำนวณซับซ้อน ต้องใส่ `{}` และ ต้องเขียน `return` เอง เสมอ

Workshop: ระบบกรองสินค้า

จำลองการทำงานของ Database สินค้า แล้วเขียนโค้ดเพื่อค้นหาและกรองข้อมูล

โจทย์:

มีรายการราคาสินค้า: [1500, 500, 3000, 800, 200]

Filter: หาสินค้าที่ราคาถูกกว่า 1000 บาท
Map: แปลงราคาสินค้าเหล่านั้น ให้เป็นหน่วย "USD" (หาร 35)
ForEach: แสดงผลลัพธ์ออกมาดู

Practice Mission: ระบบวิเคราะห์คะแนนสอบ

สถานการณ์:

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

1. ข้อมูล

คะแนนดิบของนักเรียน 5 คน

JS

let scores = [45, 80, 92, 38, 65];

2. สิ่งที่ต้องทำ

ช่วยนักเรียน: ใช้ .map() เพื่อบวกคะแนนจิตพิสัยเพิ่มให้ทุกคน คนละ 5 คะแนน
หาคนตก: ใช้ .filter() เพื่อหาคะแนนที่ยังไม่ผ่านเกณฑ์ (น้อยกว่า 50) จากคะแนนใหม่
สรุปผล: สร้างฟังก์ชัน report(failedScores) เพื่อรับรายการคนตก แล้วแจ้งเตือนจำนวนคนตก