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

ในตอนที่ผ่านมา เราพูดถึงเรื่อง splice() นะคะ แต่ในหัวข้อนี้ เราพูดถึงเรื่อง เมธอด slice()  ตัดตัว p ออกไป ความหมายและการใช้งาน แตกต่างกันเล็กน้อยค่ะ

 

คือ เมธอด slice() จะดึงข้อมูลจาก array เก่ามาสร้าง array ใหม่ แต่ข้อมูลใน array เก่า จะยังคงเดิม

 

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

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

 

ผลลัพธ์

javascript-array-slice-1

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

 

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

 

 

ผลลัพธ์

javascript-array-slice-2

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

 

หากดูข้อมูลชุดเก่า ใน array ชื่อ fruits จะพบว่า ข้อมูลยังคงอยู่ครบเหมือนเดิม

 

ผลลัพธ์

javascript-array-slice-3

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

 

 

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

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

 

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

 

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

3  หมายถึง จุดสิ้นสุดที่จะดึงข้อมูลมา (ไม่รวมตัวเอง)

 

 

ผลลัพธ์

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

javascript-array-slice-4

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

 

หากเปิดข้อมูลใน array ชื่อ fruits ออกมาดู ก็จะพบว่า ข้อมูลใน array ยังคงอยู่ครบเหมือนเดิม 🙂

 

ผลลัพธ์

javascript-array-slice-5

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

 

 

สรุป

การใช้งาน เมธอด slice() เป็นการดึงข้อมูลจาก array เก่า ออกมาสร้างเป็น array ใหม่ โดยยังคงข้อมูลใน array เก่าเอาไว้เช่นเดิม

 

Comments

comments

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

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