เมธอดของ Array ใน JavaScript - ตอนที่ 1
Array คือออบเจกต์ชนิดพิเศษใน JavaScript ซึ่งใช้สำหรับเก็บค่าหลายๆ ค่าไว้ในตัวแปรเดียว
แทนที่จะต้องสร้างตัวแปรแยกกันสำหรับนักเรียนแต่ละคน: let student1 = "John"; let student2 = "David";
ให้ใช้ Array แทน: let students = ["John", "David", "Alex"];
แต่ละค่าเรียกว่า element โดยที่ทุก element จะมี index เริ่มต้นจาก 0
• คุณสมบัติ length
คุณสมบัติ length จะบอกจำนวน element ทั้งหมดที่มี
มันคือ property ไม่ใช่ function ดังนั้นห้ามใช้เครื่องหมายวงเล็บ
Correct: arr.length
Wrong: arr.length()
คุณสามารถเปลี่ยนค่า length เพื่อปรับขนาดของ array ได้
- การลดค่า length จะเป็นการลบ element ออกจากส่วนท้าย
- การเพิ่มค่า length จะเป็นการสร้างช่องว่าง (empty slots) ขึ้นมา
• toString() และ join()
ใช้ toString() เพื่อเปลี่ยน array ให้เป็น string ที่คั่นด้วยเครื่องหมายจุลภาค (comma)
ใช้ join() เมื่อคุณต้องการตัวคั่นแบบกำหนดเอง เช่น เครื่องหมายยัติภังค์ (-) หรือ pipe (|)
• เมธอด at()
เมธอดนี้จะคืนค่า element ณ index ที่ระบุ
ต่างจากการใช้ bracket notation ตรงที่มันรองรับ index แบบติดลบด้วย
arr.at(-1) จะคืนค่า element ตัวสุดท้ายให้คุณ
• เมธอด pop() เมธอดนี้จะลบ element ตัวสุดท้ายออกจาก array มันจะแก้ไข array ต้นฉบับและคืนค่า item ที่ถูกลบออกไป
• Array.isArray()
ใช้เพื่อตรวจสอบว่าค่าที่ระบุเป็น array หรือไม่
ตัวดำเนินการ typeof จะคืนค่าเป็น "object" สำหรับ array ซึ่งไม่ค่อยมีประโยชน์นัก
ควรตรวจสอบความถูกต้องของข้อมูลด้วย Array.isArray() เสมอก่อนที่จะทำการ loop
• delete เทียบกับ concat()
ตัวดำเนินการ delete จะลบ element ออกไปแต่จะทิ้งช่องว่างไว้ และไม่ทำให้ค่า length เปลี่ยนแปลง
เมธอด concat() ใช้สำหรับรวม array เข้าด้วยกัน โดยจะไม่แก้ไข array ต้นฉบับ แต่จะคืนค่าเป็น array ใหม่แทน
• copyWithin() เมธอดนี้จะคัดลอกบางส่วนของ array ไปยังตำแหน่งใหม่ภายใน array เดิม และจะเขียนทับ element ที่มีอยู่เดิม
สรุปเมธอดต่างๆ:
- length: คืนค่าขนาดของ array
- toString(): แปลงเป็น string ที่คั่นด้วย comma
- join(separator): แปลงเป็น string ด้วยตัวคั่นที่กำหนดเอง
- at(index): ดึง element (รองรับ index ติดลบ)
- pop(): ลบ element ตัวสุดท้าย
- isArray(): ตรวจสอบว่าเป็น array หรือไม่
- concat(): รวม array เข้าด้วยกันเป็น array ใหม่
- copyWithin(): คัดลอก element ภายใน array เดิม
Source: https://www.w3schools.com/js/js_array_methods.asp Complete guide: https://dev.to/annapoo/javascript-arrays-methods-part-1-kb7