JavaScript พื้นฐาน EP. 4: Array และ Loop

JavaScript

เรียนรู้การจัดเก็บข้อมูลหลายรายการด้วย Array และการใช้ for, while, for...of รวมถึงเมธอด map, filter และ reduce เพื่อประมวลผลข้อมูลอย่างเป็นระบบ

1. ทำไมเราต้องมี Array

const fruits = ['มะม่วง', 'ส้ม', 'กล้วย'];

console.log(fruits);
console.log(fruits.length);

2. การเข้าถึงสมาชิกด้วย index

const fruits = ['มะม่วง', 'ส้ม', 'กล้วย'];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);

แก้ไขและเพิ่มข้อมูล

const fruits = ['มะม่วง', 'ส้ม'];

fruits[1] = 'แตงโม';
fruits.push('กล้วย');

console.log(fruits);
console.log(fruits.length);

3. เมธอด Array ที่ใช้บ่อย

const colors = ['แดง', 'เขียว', 'น้ำเงิน'];

console.log(colors.includes('เขียว'));
console.log(colors.indexOf('น้ำเงิน'));
console.log(colors.slice(0, 2));
console.log(colors.join(' - '));

4. Loop คืออะไร

ใช้ for เมื่อรู้จำนวนรอบหรือมี index

const fruits = ['มะม่วง', 'ส้ม', 'กล้วย'];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

ใช้ for...of เมื่อไม่ต้องการ index

const fruits = ['มะม่วง', 'ส้ม', 'กล้วย'];

for (const fruit of fruits) {
    console.log(fruit);
}

ใช้ while เมื่อวนตามเงื่อนไข

let count = 1;

while (count <= 5) {
    console.log(`รอบที่ ${count}`);
    count++;
}

5. ใช้ map เพื่อแปลงข้อมูล

const prices = [100, 250, 400];

const pricesWithTax = prices.map(price => price * 1.07);

console.log(pricesWithTax);
console.log(prices);

6. ใช้ filter เพื่อคัดเลือกข้อมูล

const scores = [35, 82, 49, 90, 67];

const passingScores = scores.filter(score => score >= 50);

console.log(passingScores);
console.log(scores);

7. ใช้ reduce เพื่อรวมข้อมูล

const prices = [120, 80, 150, 50];

const total = prices.reduce((sum, price) => {
    return sum + price;
}, 0);

console.log(`ยอดรวม ${total} บาท`);

8. เปรียบเทียบ for, map, filter และ reduce

9. ตัวอย่างจริง: สรุปยอดขายสินค้า

const products = [
    { name: 'สมุด', price: 25, quantity: 20 },
    { name: 'ปากกา', price: 12, quantity: 50 },
    { name: 'กระเป๋า', price: 350, quantity: 4 },
    { name: 'ดินสอ', price: 8, quantity: 100 }
];

const sales = products.map(product => ({
    name: product.name,
    total: product.price * product.quantity
}));

const highSales = sales.filter(item => item.total >= 300);

const grandTotal = sales.reduce((sum, item) => {
    return sum + item.total;
}, 0);

console.log('ยอดขายแต่ละรายการ:', sales);
console.log('รายการยอดขายตั้งแต่ 300 บาท:', highSales);
console.log('ยอดขายรวม:', grandTotal);

10. ข้อผิดพลาดที่พบบ่อย

11. แบบฝึกหัดท้ายบท

const scores = [45, 78, 92, 33, 67, 88];

for (const score of scores) {
    console.log(score);
}

const passed = scores.filter(score => score >= 60);
const bonusScores = scores.map(score => score + 5);
const total = scores.reduce((sum, score) => sum + score, 0);

console.log('คะแนนตั้งแต่ 60 ขึ้นไป:', passed);
console.log('คะแนนหลังเพิ่ม 5:', bonusScores);
console.log('ผลรวมคะแนน:', total);

12. สรุปและเตรียมพร้อมสำหรับ EP ถัดไป