JavaScript Array Methods ขั้นสูง

JavaScript

เรียนรู้ Array Methods ที่ใช้บ่อยใน JavaScript ได้แก่ map, filter, reduce, find, some และ every พร้อมตัวอย่างโค้ด การเปรียบเทียบ และแบบฝึกหัดประยุกต์ใช้กับข้อมูลจริง

EP11: จัดการ Array อย่างมืออาชีพด้วย Array Methods

1. เตรียมข้อมูลสำหรับทดลอง

const products = [
  { id: 1, name: 'สมุด', price: 35, stock: 20 },
  { id: 2, name: 'ปากกา', price: 12, stock: 0 },
  { id: 3, name: 'กระเป๋า', price: 450, stock: 8 },
  { id: 4, name: 'ดินสอ', price: 8, stock: 50 },
  { id: 5, name: 'ขวดน้ำ', price: 120, stock: 5 }
];

console.log('จำนวนสินค้า:', products.length);
console.log('สินค้าแรก:', products[0].name);

2. map() แปลงข้อมูลทุกสมาชิก

const names = products.map(product => product.name);

const discountedProducts = products.map(product => ({
  name: product.name,
  originalPrice: product.price,
  discountedPrice: product.price * 0.9
}));

console.log(names);
console.log(discountedProducts);

3. filter() คัดกรองสมาชิกที่ผ่านเงื่อนไข

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

const affordableProducts = products.filter(product => product.price < 100);

const expensiveProducts = products.filter(product => product.price >= 100);

console.log('สินค้าที่มีในสต็อก:', availableProducts);
console.log('สินค้าราคาต่ำกว่า 100:', affordableProducts);
console.log('สินค้าราคา 100 ขึ้นไป:', expensiveProducts);

4. reduce() รวมข้อมูลให้เหลือผลลัพธ์เดียว

const totalStock = products.reduce((total, product) => {
  return total + product.stock;
}, 0);

const totalValue = products.reduce((total, product) => {
  return total + product.price * product.stock;
}, 0);

console.log('จำนวนสินค้ารวม:', totalStock);
console.log('มูลค่าสินค้าคงคลัง:', totalValue);

5. find() ค้นหาสมาชิกตัวแรกที่ตรงเงื่อนไข

const product = products.find(item => item.id === 3);
const missingProduct = products.find(item => item.id === 99);

console.log(product);
console.log(missingProduct);

if (product) {
  console.log('สินค้าที่ค้นพบ:', product.name);
} else {
  console.log('ไม่พบสินค้า');
}

6. some() และ every() ตรวจสอบเงื่อนไข

const hasOutOfStock = products.some(product => product.stock === 0);
const allHavePositivePrice = products.every(product => product.price > 0);
const allInStock = products.every(product => product.stock > 0);

console.log('มีสินค้าหมดสต็อกหรือไม่:', hasOutOfStock);
console.log('สินค้าทุกชิ้นมีราคามากกว่าศูนย์หรือไม่:', allHavePositivePrice);
console.log('สินค้าทุกชิ้นมีสต็อกหรือไม่:', allInStock);

7. เปรียบเทียบ Array Methods ที่ใช้บ่อย

8. เชื่อม Methods เพื่อทำงานหลายขั้นตอน

const saleList = products
  .filter(product => product.stock > 0)
  .map(product => ({
    name: product.name,
    salePrice: Number((product.price * 0.9).toFixed(2))
  }))
  .filter(product => product.salePrice >= 10);

console.log('รายการสินค้าลดราคา:', saleList);

9. Array Methods แก้ไข Array ต้นฉบับหรือไม่

const originalNumbers = [1, 2, 3];
const doubledNumbers = originalNumbers.map(number => number * 2);

console.log(originalNumbers);
console.log(doubledNumbers);

const originalProduct = products[0];
const changedProducts = products.map(product =>
  product.id === 1
    ? { ...product, price: 99 }
    : product
);

console.log('ราคาเดิม:', originalProduct.price);
console.log('ราคาใหม่:', changedProducts.find(product => product.id === 1).price);

10. ฝึกคิดจากสถานการณ์จริง

const lowCostInStock = products.filter(product =>
  product.price <= 100 && product.stock > 0
);

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

const hasPremiumProduct = products.some(product => product.price > 400);

console.log('สินค้าราคาไม่เกิน 100 ที่มีสต็อก:', lowCostInStock);
console.log('มูลค่าสินค้าคงคลังรวม:', inventoryValue);
console.log('มีสินค้าราคาเกิน 400 หรือไม่:', hasPremiumProduct);

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

const scores = [58, 82, 45, 96, 71, 60];

// 1. สร้าง Array ใหม่ที่เพิ่มคะแนนทุกคนอีก 5 คะแนน

// 2. เลือกคะแนนที่ตั้งแต่ 60 คะแนนขึ้นไป

// 3. หาผลรวมคะแนนทั้งหมด

// 4. ค้นหาคะแนนตัวแรกที่มากกว่า 90

// 5. ตรวจว่ามีคะแนนต่ำกว่า 50 อย่างน้อยหนึ่งรายการหรือไม่

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