การใช้งาน Array Methods: map, filter, reduce

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ Object Literals Enhancement ซึ่งช่วยให้การสร้าง Object ใน JavaScript ง่ายขึ้น ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับ Array Methods ที่สำคัญ ได้แก่ map, filter, และ reduce ซึ่งเป็นเครื่องมือที่มีประสิทธิภาพในการจัดการและแปลงข้อมูลใน Array

Array Methods คืออะไร?

Array Methods คือฟังก์ชันที่ JavaScript เตรียมไว้ให้เราใช้งานกับ Array โดยเฉพาะ ฟังก์ชันเหล่านี้ช่วยให้เราสามารถดำเนินการต่างๆ กับข้อมูลใน Array ได้อย่างง่ายดายและมีประสิทธิภาพ แทนที่จะต้องเขียน loop เองทั้งหมด

1. การใช้งาน `map`

map เป็น Array Method ที่ใช้ในการแปลงข้อมูลใน Array แต่ละตัว ไปเป็นข้อมูลรูปแบบใหม่ โดยจะสร้าง Array ใหม่ที่มีจำนวนสมาชิกเท่าเดิม แต่มีข้อมูลที่ถูกแปลงแล้ว

Syntax:

array.map(function(currentValue, index, arr), thisArg)

currentValue: ค่าของสมาชิกปัจจุบันที่กำลังถูกประมวลผล
index (optional): index ของสมาชิกปัจจุบัน
arr (optional): Array ที่ถูกเรียกใช้ map
thisArg (optional): ค่าที่จะใช้เป็น this เมื่อเรียกใช้ callback

ตัวอย่าง:

สมมติว่าเรามี Array ของตัวเลข และต้องการสร้าง Array ใหม่ที่แต่ละตัวเลขถูกยกกำลังสอง

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

เราสามารถใช้ Arrow Function เพื่อให้โค้ดสั้นลงได้:

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(number => number * number);

console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

ตัวอย่างการใช้งานกับ Array ของ Objects:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const userNames = users.map(user => user.name);

console.log(userNames); // Output: ["Alice", "Bob", "Charlie"]

2. การใช้งาน `filter`

filter เป็น Array Method ที่ใช้ในการเลือกสมาชิกบางตัวจาก Array โดยอิงตามเงื่อนไขที่กำหนด จะสร้าง Array ใหม่ที่มีเฉพาะสมาชิกที่ตรงตามเงื่อนไข

Syntax:

array.filter(function(currentValue, index, arr), thisArg)

currentValue: ค่าของสมาชิกปัจจุบันที่กำลังถูกประมวลผล
index (optional): index ของสมาชิกปัจจุบัน
arr (optional): Array ที่ถูกเรียกใช้ filter
thisArg (optional): ค่าที่จะใช้เป็น this เมื่อเรียกใช้ callback

ตัวอย่าง:

สมมติว่าเรามี Array ของตัวเลข และต้องการเลือกเฉพาะตัวเลขที่มากกว่า 2

const numbers = [1, 2, 3, 4, 5];

const filteredNumbers = numbers.filter(function(number) {
  return number > 2;
});

console.log(filteredNumbers); // Output: [3, 4, 5]

ใช้ Arrow Function:

const numbers = [1, 2, 3, 4, 5];

const filteredNumbers = numbers.filter(number => number > 2);

console.log(filteredNumbers); // Output: [3, 4, 5]

ตัวอย่างการใช้งานกับ Array ของ Objects:

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 20 }
];

const adults = users.filter(user => user.age >= 21);

console.log(adults);
// Output:
// [
//   { id: 1, name: 'Alice', age: 25 },
//   { id: 2, name: 'Bob', age: 30 }
// ]

3. การใช้งาน `reduce`

reduce เป็น Array Method ที่ใช้ในการลดทอน Array ให้เหลือค่าเดียว โดยทำการประมวลผลสมาชิกแต่ละตัวใน Array สะสมผลลัพธ์ไปเรื่อยๆ

Syntax:

array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue)

accumulator: ค่าสะสมที่ได้จากการประมวลผลก่อนหน้า หรือ initialValue ถ้าเป็นรอบแรก
currentValue: ค่าของสมาชิกปัจจุบันที่กำลังถูกประมวลผล
currentIndex (optional): index ของสมาชิกปัจจุบัน
arr (optional): Array ที่ถูกเรียกใช้ reduce
initialValue (optional): ค่าเริ่มต้นของ accumulator

ตัวอย่าง:

สมมติว่าเรามี Array ของตัวเลข และต้องการหาผลรวมของตัวเลขทั้งหมด

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0); // 0 คือ initialValue

console.log(sum); // Output: 15

ใช้ Arrow Function:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

ตัวอย่างการใช้งานกับ Array ของ Objects:

const orders = [
  { id: 1, amount: 100 },
  { id: 2, amount: 200 },
  { id: 3, amount: 50 }
];

const totalAmount = orders.reduce((accumulator, order) => accumulator + order.amount, 0);

console.log(totalAmount); // Output: 350

การใช้งาน reduce เพื่อแปลง Array เป็น Object:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const usersById = users.reduce((accumulator, user) => {
  accumulator[user.id] = user.name;
  return accumulator;
}, {});

console.log(usersById);
// Output:
// {
//   1: "Alice",
//   2: "Bob",
//   3: "Charlie"
// }

สรุป

map, filter, และ reduce เป็น Array Methods ที่มีประโยชน์อย่างมากในการจัดการและแปลงข้อมูลใน Array การเข้าใจและใช้งาน Method เหล่านี้จะช่วยให้เราเขียนโค้ดที่กระชับ อ่านง่าย และมีประสิทธิภาพมากขึ้น

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการทำงานกับ Promises ซึ่งเป็นเครื่องมือที่ใช้ในการจัดการ Asynchronous Operations ใน JavaScript

การใช้งาน Array Methods: map, filter, reduce