6 อาร์เรย์ฟังก์ชัน JavaScript ที่ใช้กันอยู่บ่อยๆ

สวัสดีครับนี้เป็นบล๊อกแรกของผมที่จะเขียนอธิบายเกี่ยวกับ Array functions ของ JavaScript ให้ทุกคนดู และจะพยายามให้คนที่เข้ามาอ่านเข้าใจให้ได้ง่ายมากที่สุดโอเคทีนี้เรามาเริ่มกันเลยดีกว่า

จากข้างต้นในวันนี้เราจะมาศึกษาเกี่ยวกับ Array functions กันซึ่งทุกวันนี้ผมเชื่อว่าทุกคนมีการนำมาใช้ในชีวิตประจำวันไม่ว่าจะเป็น การทำงาน การเรียน และอื่นๆอีกมากมาย ทีนี้อาร์เรย์ฟังก์ชันที่เราจะนี้มาบอกทุกคนในวันนี้จะมี 10 ตัวดังนี้

นี้จะเป็นตัวอย่าง Array ที่เราจะใช้กันในวันนี้ ปล.เป็น Extenstions ใน VSCode หากใครที่สนใจตามไปโหลดเลย

.Map()

มาที่ functions แรกกันเลย map เป็น functions ที่ไม่ได้เข้าใจยากอะไร โดนหน้าที่ของมันจะเป็นการนำค่าทั้งหมดใน Array ที่ได้รับมาเข้าเงื่อนไขการทำงานแล้วส่งออกไปเป็นค่าใหม่

จากรูปจะเห็นได้ว่าเรามีการสร้างตัวแปร map ขึ้นมารับค่า Array ก้อนใหม่ที่ได้จากการเข้า Functions map โดนที่เงื่อนไขคือการนำ MyArray ไปคูณด้วย 2

.Filter()

มาที่ functions ถัดมาคือ filter โดนหน้าที่ของ filter นี้เปรียบเทียบง่ายๆ เหมือนการที่เราตั้งเงื่อนไขที่จะให้โปรแกรมนั้นทำงานยังไง ไม่ว่าจะเป็นเรื่องของการกรองข้อมูล หรือเป็นการที่เราจะเลือกข้อมูลใดข้อมูลนึงที่จะเอามาค้นหาข้อมูลที่เราต้องการ

จากรูปจะเห็นได้ว่าเรามีการเขียนเงื่อนไขในการ filter เอาไว้ 2 อย่างคือ filter ว่าข้อมูลที่เราหามันมีให้ก้อนข้อมูลนั่นๆไหม และอีกเงื่อนไขนึงคือการ filter ว่ามีข้อมูลในกลุ่มที่เราต้องการไหม

.Find()

functions ถัดมาคือ find โดย find นั้นจะทำงานเหมือนกับ filter เลยแต่จะต่างกันตรงที่ fine นั้น return แสดงค่าแรกที่เจอเท่านั้นซึ่งจะแตกต่างจาก filter เพราะ filter นั้นจะส่งค่าที่เจอทั้งหมดออกมาแทน

จากรูปจะเป็นได้ว่า find จะมาเงื่อนไขการทำงานคล้ายๆกับ filter เลยแต่จะต่างกันตรงที่ค่าที่ส่งออกมา find จะส่งแค่ค่าแรกที่เจอเท่านั้น แต่ filter จะส่งค่าออกมาทั้งหมด

.Reduce()

functions ถัดมาคือ reduce เป็นตัวที่เรียกใช้ functions reducer ที่จะส่ง Callback เข้าไปยัง method และส่งค่ากลับเป็นผมจากการทำงานของ functions reducer กับค่าทั้งหมดใน Array แบบต่อเนื่องกันและได้ผมลัพธ์เป็นค่าสุดท้าย มาถึงจุดนี้ผมมั่นใจว่าหลายๆคนที่อ่านเกี่ยวกับ reduce นี้จะงงกันเป็นแถวๆ ซึ่งผมก็เป็นหนึ่งในนั้น เรามาดูโค้ดตัวอย่างกันเลยดีกว่า

จากรูปจะสรุปได้ว่าการทำงานของ reduce เป็นการรวมค่าทั้งหมดใน Array แล้วก็ส่งค่ากลับออกมา

.Includes()

functions ถัดมาคือ includes จะใช้ในการค้นหาค่าใน array โดยจะเช็คว่าใน array นั้นมีค่าที่เราต้องการอยู่หรือไม่ และค่าที่ return ออกมาจะเป็น true หรือ false เท่านั้น

จากรูปจะเห็นได้ว่าใน Array เก็บค่า 1–5 โดย const ตัวแรกเราจะเช็คว่าใน Array นั้นมี 1 อยู่ก็ return true ออกมา const ตัวที่ 2 เราเช็คไม่มี 6 อยู่ก็ return false ออกมา

.slice()

ตัวสุดท้ายสำหรับบทความนี้คือ slice ถ้าแปลตรงๆเลยก็คือการหั่นโดยที่การทำงานของมันคือหั่นส่วนที่ไม่ต้องการออกจาก Array ซึ่งวิธีใช้คือเราจะต้องใส่ parameters 2 ตัว เข้าไปรับโดยที่ index แรกจะเป็นตัวเริ่ม และ index อีกตัวจะเป็นตัวสุดท้ายที่เราต้องการเอาออก หรือหรือเราไม่ได้ใส่ index สุดท้าย slice ก็จะทำการหั่นตั้งแต่เริ่มจนถึงข้อมูลตัวสุดท้ายให้เอง

นี้จะเป็นตัวอย่างการทำงานของ slice จะเห็นได้ว่าเรามีการใส่ index เข้าไป 2 ตัวโดยที่ตัวอย่างแรกจะมี slice ตั้งแต่ 1,4 ซึ่งผลลัพธ์ก็จะได้ 2,3,4 ต่อมาในตัวอย่างที่ 2 จะใส่ index ไปแค่ 1 ตัวคือ 2 ผลลัพธ์ก็จะได้ออกมาเป็น 3,4,5

จริงๆแล้ว functions ที่ใช้ในการทำงานนั้นมีมากมายหลายสถานะการณ์ที่เราจะเอามาใช้ ซึ่งที่ผมยกมาเขียนอธิบายให้นี้ก็แค่เป็นส่วนหนึ่งในอีกหลายๆ functions

ทั้งนี้ทั้งนั้นหากผมเขียนอธิบายผิดพลาดยังไงก็ขออภัย ณ ที่นี้ด้วย หรือหากมีใครสงสัยก็สามารถสอบถามหรือหาข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลทั่วๆไป

สุดท้ายนี้ก็ขอบคุณที่เข้ามาอ่านบทความที่ผมเขียนขึ้นมา และสัญญาว่าจะนำความรู้มาแชร์กันเลื่อยๆ ขอบคุณครับ