JavaScript: array ตอนที่ 9 การดึงข้อมูลจาก array เพื่อสร้าง array ใหม่ ด้วย splice()

splice() เป็นเมธอด (method) ที่ใช้งานร่วมกับ array เพื่อดึงข้อมูลจาก array หนึ่ง ออกมาสร้างเป็น array ใหม่ เรามาดูรายละเอียดกันค่ะ 🙂

 

การใช้งาน เมธอด splice()

ในเบื้องต้น เรามีข้อมูลใน array ดังต่อไปนี้

 

ผลลัพธ์

javascript-array-splice-1

ภาพที่ 1 ผลลัพธ์

 

เราสามารถ ดึงข้อมูล 2 รายการสุดท้าย หรือ “มะยม” กับ “กระท้อน” ออกมาได้ โดยการใช้ spilce() ดังนี้ fruits.splice(2);  โดยเลข 2 ที่ส่งไปในวงเล็บ คือ ตำแหน่ง index ที่เราเริ่มต้นตัดข้อมูลออกมา

 

ผลลัพธ์

javascript-array-splice-2

ภาพที่ 2 ผลลัพธ์

 

หากดูข้อมูลชุดเก่า ใน array ชื่อ fruits จะพบว่า ข้อมูลถูกตัดออกไปแล้ว

 

ผลลัพธ์

Array ชื่อ fruits เหลือข้อมูลแค่ 2 ตัวคือ “มะพร้าว” และ “มะม่วง”

javascript-array-splice-3

ภาพที่ 3 ผลลัพธ์

 

 

การใช้งาน เมธอด splice() แบบระบุตำแหน่งเริ่มต้น และสิ้นสุด

หากเราต้องการดึงข้อมูลตรงกลาง ของ array ชื่อ fruits ออกมา คือ “มะม่วง” และ “มะยม”  เราจะต้องส่ง ค่าไปให้เมธอดทำงาน 2 ค่า

 

คือ ตำแหน่งจุดเริ่มต้น และจำนวน element ที่ต้องการ โดยนับรวมกับจุดเริ่มต้นด้วย เช่น fruits.splice(1, 2);  

 

1  หมายถึง การตัดข้อมูลที่ต่ำแหน่งที่ 1 ของ index ใน array และ

2  หมายถึง ดึงข้อมูลออกมา 2 elements

 

ผลลัพธ์

เราจะได้ข้อมูล  “มะม่วง” และ “มะยม” ออกมา

javascript-array-splice-4

ภาพที่ 4 ผลลัพธ์

 

หากเปิดข้อมูลใน array ชื่อ fruits ออกมาดู ก็จะเหลือ ข้อมูลแค่ 2 รายการ คือ “มะพร้าว” และ “กระท้อน”

 

ผลลัพธ์

javascript-array-splice-5

ภาพที่ 5 ผลลัพธ์

 

 

สรุป

การใช้งาน เมธอด splice() เป็นการตัดข้อมูลจาก array เก่า ออกมาสร้างเป็น array ใหม่

 

 

Comments

comments

ธมนวรรณ มณีจันทร์

เป้าหมาย : "พัฒนาคุณภาพชีวิตผู้คน ผ่านการส่งมอบความรู้ ด้วยเทคโนโลยีที่ดีที่สุด" ... ประวัติ