Array Methods คืออะไร ? | พื้นฐาน JavaScript EP.6-7

ใน JavaScript มี built in array methods ที่มีประโยชน์หลายตัวเลยครับ

ตัวอย่างข้อมูล

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

Array.map

map เข้าถึงข้อมูลทุกตัว เพื่อสร้าง array ใหม่ โดยที่เราสามารถกำหนดข้อมูลได้ มักใช้เพื่อแปลงข้อมูลให้เป็นแบบที่เราต้องการ

// [1, 2, 3, 4, 5, 6]
numbers.map((num) => num);

// [2, 4, 6, 8, 10, 12]
numbers.map((num) => num * 2);

Array.filter

filter เข้าถึงข้อมูลทุกตัว เพื่อสร้าง array ใหม่ แต่จะมีเฉพาะข้อมูลที่มีเงื่อนไขเป็นจริงเท่านั้น

// [1, 2, 3]
numbers.filter((num) => num < 4);

// []
numbers.filter((num) => num > 6);

Array.reduce

reduce เข้าถึงข้อมูลทุกตัว และส่งค่าใหม่ออกมาเป็นอะไรก็ได้ ขึ้นอยู่กับวัตถุประสงค์ในการใช้งานของเรา เช่น การใช้ reduce เพื่อบวกเลขทั้งหมดใน array จะส่งค่าออกมาเป็นตัวเลข เป็นต้น

// 0 + 1 + 2 + 3 + 4 + 5 + 6 = 21
numbers.reduce((sum, num) => sum + num, 0);

// 20 - 1 - 2 - 3 - 4 - 5 - 6 = -1
numbers.reduce((sum, num) => sum - num, 20);

Array.every

every เข้าถึงข้อมูลทุกตัวเพื่อตรวจสอบว่าเงื่อนไขถูกต้องทั้งหมดใช่หรือไม่ ถ้ามีบางตัวเงื่อนไขผิด จะหยุดการทำงานทันทีและส่งค่า false กลับมา

// false
numbers.every((num) => num < 3);

// true
numbers.every((num) => num < 10);

จากในตัวอย่างที่ 1 จะเห็นว่าส่งค่า false กลับมา เนื่องจากข้อมูลใน array ไม่ได้น้อยกว่า 3 ทุกตัว แต่ในตัวอย่างที่ 2 ส่งค่า true กลับมา เนื่องจากข้อมูลใน array น้อยกว่า 10 ทุกตัว

Array.some

some เข้าถึงข้อมูลทุกตัวเพื่อตรวจสอบว่ามีบางเงื่อนไขถูกต้องใช่หรือไม่ ถ้ามีบางตัวเงื่อนไขถูก จะหยุดการทำงานทันทีและส่งค่า true กลับมา

// true
numbers.some((num) => num < 3);

// true
numbers.some((num) => num < 10);

จากในตัวอย่างทั้ง 2 จะเห็นว่าส่งค่า true กลับมาทั้งคู่ เนื่องจากมีข้อมูลบางตัวใน array น้อยกว่าทั้ง 3 และ 10

Array.includes

includes เช็คว่าใน array ของเรามีข้อมูลที่ต้องการหาหรือไม่ ถ้ามีจะส่งค่า true กลับมา

// true
numbers.includes(3);

// false
numbers.includes(10);

จากตัวอย่างที่ 2 จะเห็นว่าส่งค่า false กลับมา เนื่องจากใน array ของเราไม่มี 10 นั่นเองครับ

---

สามารถรับชมแบบวิดีโอได้ที่นี่ครับ