JavaScript: Array และการจัดการข้อมูล

JavaScript

EP7 ของชุด JavaScript คืออะไร? เริ่มต้นเขียนโปรแกรม เรียนรู้ Array การเข้าถึงสมาชิก การเพิ่มและลบข้อมูล การวนซ้ำ และเมธอด map, filter, find, reduce สำหรับการพัฒนาโปรแกรมจริง

EP7: จัดเก็บข้อมูลหลายรายการด้วย Array

1. Array คืออะไร

const fruits = ['แอปเปิล', 'กล้วย', 'ส้ม'];

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

// ผลลัพธ์:
// แอปเปิล
// กล้วย
// ส้ม
// 3

2. สร้าง Array และจัดเก็บข้อมูลหลายชนิด

const scores = [85, 92, 78, 96];
const users = ['Anan', 'Mali', 'Niran'];
const mixed = ['สินค้า', 150, true];
const emptyList = [];

console.log(scores.length);
console.log(users[0]);
console.log(mixed[2]);
console.log(emptyList.length);

// ผลลัพธ์:
// 4
// Anan
// true
// 0

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

colors[1] = 'เหลือง';
colors.push('ม่วง');

console.log(colors);

// ผลลัพธ์:
// ['แดง', 'เหลือง', 'น้ำเงิน', 'ม่วง']

3. เพิ่มข้อมูลด้วย push และ unshift

const tasks = ['อ่านหนังสือ', 'ทำการบ้าน'];

const totalAfterPush = tasks.push('ออกกำลังกาย');
const totalAfterUnshift = tasks.unshift('จัดโต๊ะ');

console.log(tasks);
console.log(totalAfterPush);
console.log(totalAfterUnshift);

// ผลลัพธ์:
// ['จัดโต๊ะ', 'อ่านหนังสือ', 'ทำการบ้าน', 'ออกกำลังกาย']
// 3
// 4

4. ลบข้อมูลด้วย pop และ shift

const queue = ['ลูกค้า A', 'ลูกค้า B', 'ลูกค้า C'];

const lastCustomer = queue.pop();
const firstCustomer = queue.shift();

console.log(lastCustomer);
console.log(firstCustomer);
console.log(queue);

// ผลลัพธ์:
// ลูกค้า C
// ลูกค้า A
// ['ลูกค้า B']

5. ใช้ splice และ slice ให้ถูกต้อง

const original = ['A', 'B', 'C', 'D'];

const removed = original.splice(1, 2, 'X');
console.log(removed);
console.log(original);

const selected = original.slice(0, 2);
console.log(selected);
console.log(original);

// ผลลัพธ์:
// ['B', 'C']
// ['A', 'X', 'D']
// ['A', 'X']
// ['A', 'X', 'D']

6. ค้นหาข้อมูลด้วย includes และ indexOf

const permissions = ['read', 'write', 'delete'];

console.log(permissions.includes('write'));
console.log(permissions.includes('admin'));
console.log(permissions.indexOf('delete'));
console.log(permissions.indexOf('admin'));

// ผลลัพธ์:
// true
// false
// 2
// -1

7. ใช้ forEach เพื่อประมวลผลสมาชิกทุกตัว

const students = ['มิน', 'ฟ้า', 'ต้น'];

students.forEach((student, index) => {
    console.log(`${index + 1}. ${student}`);
});

// ผลลัพธ์:
// 1. มิน
// 2. ฟ้า
// 3. ต้น

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

const prices = [100, 250, 400];
const pricesWithTax = prices.map(price => price * 1.07);

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

const products = [
    { id: 1, name: 'Keyboard', price: 1200 },
    { id: 2, name: 'Mouse', price: 450 }
];

const productNames = products.map(product => product.name);
console.log(productNames);

// ผลลัพธ์:
// [100, 250, 400]
// [107, 267.5, 428]
// ['Keyboard', 'Mouse']

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

const products = [
    { name: 'Keyboard', stock: 8, price: 1200 },
    { name: 'Mouse', stock: 0, price: 450 },
    { name: 'Monitor', stock: 5, price: 5200 },
    { name: 'Webcam', stock: 0, price: 890 }
];

const availableProducts = products.filter(product => product.stock > 0);
const expensiveProducts = products.filter(product => product.price >= 1000);

console.log(availableProducts.map(product => product.name));
console.log(expensiveProducts.map(product => product.name));

// ผลลัพธ์:
// ['Keyboard', 'Monitor']
// ['Keyboard', 'Monitor']

10. ใช้ find และ findIndex เพื่อค้นหา

const users = [
    { id: 101, name: 'Anan', active: true },
    { id: 102, name: 'Mali', active: false },
    { id: 103, name: 'Niran', active: true }
];

const user = users.find(item => item.id === 102);
const activeUserIndex = users.findIndex(item => item.active);
const missingUser = users.find(item => item.id === 999);

console.log(user);
console.log(activeUserIndex);
console.log(missingUser);

// ผลลัพธ์:
// { id: 102, name: 'Mali', active: false }
// 0
// undefined

11. ใช้ reduce เพื่อสรุปข้อมูล

const scores = [80, 75, 90, 85];

const total = scores.reduce((sum, score) => sum + score, 0);
const average = total / scores.length;

const sales = [
    { product: 'Keyboard', amount: 2400 },
    { product: 'Mouse', amount: 1350 },
    { product: 'Monitor', amount: 5200 }
];

const revenue = sales.reduce((sum, item) => sum + item.amount, 0);

console.log(total);
console.log(average);
console.log(revenue);

// ผลลัพธ์:
// 330
// 82.5
// 8950

สูตรคำนวณค่าเฉลี่ย

12. เรียงลำดับข้อมูลด้วย sort

const numbers = [40, 5, 100, 25, 9];

const ascending = [...numbers].sort((a, b) => a - b);
const descending = [...numbers].sort((a, b) => b - a);

console.log(numbers);
console.log(ascending);
console.log(descending);

// ผลลัพธ์:
// [40, 5, 100, 25, 9]
// [5, 9, 25, 40, 100]
// [100, 40, 25, 9, 5]

13. เชื่อม Array ด้วยการทำงานแบบต่อเนื่อง

const products = [
    { name: 'Keyboard', stock: 8, price: 1200 },
    { name: 'Mouse', stock: 0, price: 450 },
    { name: 'Monitor', stock: 5, price: 5200 },
    { name: 'Webcam', stock: 3, price: 890 }
];

const availableNames = products
    .filter(product => product.stock > 0)
    .map(product => product.name)
    .sort();

console.log(availableNames);

// ผลลัพธ์:
// ['Keyboard', 'Monitor', 'Webcam']

14. เปรียบเทียบเมธอด Array ที่ใช้บ่อย

15. ตัวอย่างประยุกต์: สรุปสินค้าคงคลัง

const inventory = [
    { id: 1, name: 'Keyboard', price: 1200, stock: 8 },
    { id: 2, name: 'Mouse', price: 450, stock: 0 },
    { id: 3, name: 'Monitor', price: 5200, stock: 5 },
    { id: 4, name: 'Webcam', price: 890, stock: 3 }
];

const availableItems = inventory.filter(item => item.stock > 0);

const inventoryValue = availableItems.reduce(
    (total, item) => total + item.price * item.stock,
    0
);

const report = availableItems.map(item => ({
    name: item.name,
    stock: item.stock,
    value: item.price * item.stock
}));

const mostExpensive = inventory.reduce((highest, item) => {
    return item.price > highest.price ? item : highest;
});

console.log('จำนวนสินค้าที่มีสต็อก:', availableItems.length);
console.log('มูลค่าสต็อกรวม:', inventoryValue);
console.log('รายงานสินค้า:', report);
console.log('สินค้าที่ราคาสูงที่สุด:', mostExpensive.name);

// ผลลัพธ์:
// จำนวนสินค้าที่มีสต็อก: 3
// มูลค่าสต็อกรวม: 18670
// รายงานสินค้า: รายการสินค้า 3 รายการพร้อมจำนวนและมูลค่า
// สินค้าที่ราคาสูงที่สุด: Monitor

16. วิเคราะห์ข้อมูลด้วยกราฟ

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

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

19. สรุปและเตรียมพร้อมสำหรับ EP8