เพิ่ม Item ใน Array ตำแหน่งที่กำหนด ด้วย JavaScript

เรียนรู้เพิ่ม item ใน array ตำแหน่งเฉพาะ (index) ใน JavaScript

อยากเพิ่ม item ใน array แต่ไม่ใช่ append (ท้าย) หรือ prepend (หน้า) — อยากเพิ่มตำแหน่งเฉพาะ

Note: ตำแหน่ง/ที่ เรียกว่า index นับจาก 0 คือ:

• 0 คือ 1
• 1 คือ 2
• ต่อไป...

Array 5 items ต้องการ item ที่ 3 → address เป็น 2

Splice() Method

ใช้ array.splice() เพิ่ม/ลบ items ใน array

array.splice(startIndex)
array.splice(startIndex, deleteCount)
array.splice(startIndex, deleteCount, value1)

splice() รับ 3+ arguments:

• Arg 1: startIndex ตำแหน่งที่จะเพิ่ม
• Arg 2: deleteCount (optional) จำนวนลบจาก startIndex
• Arg 3: ค่า item ใหม่ที่จะเพิ่ม

ตัวอย่าง splice() จริง

Cast list ภาพยนตร์ "Ask Questions Later" เรียงตามขนาดบทบาท:

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman",
  "The Rock",
  "Wesley Snipes"
];

Steven Seagal (!!) โกรธชื่อไม่อยู่ main cast (เขาออกมา 7 วิ กด 10敵) คิดว่าพอจะอยู่ main cast

ใครกล้าโต้ Steven Seagal?

เพิ่มเขาเป็น actor ลำดับที่ 2 (หลัง Michael Jai White):

mainCastList.splice(1, 0, "Steven Seagal");
console.log(mainCastList);
// ["Michael Jai White", "Steven Seagal", "Jean-Claude Van Damme", ...]

อธิบาย: splice(1, 0, "Steven Seagal") → startIndex=1, deleteCount=0 (ไม่ลบ), เพิ่ม "Steven Seagal" ที่ index 1

ทำไมไม่เพิ่มเป็น #1? เพราะ Michael Jai White จะเตะเขาตาย จะเห็นได้ชัด

Good to Know about splice()

เพิ่มหลาย items พร้อมกัน

mainCastList.splice(1, 0, "Steven Seagal", "Sylvester Stallone");

ลบทั้งหมดจาก startIndex

ถ้าไม่ส่ง arg ที่ 2 (คือ 0) → ลบทั้งหมด จาก startIndex โดย default ระวังตอนใช้ splice() ในโปรเจกต์จริง

เริ่มจากท้าย array

ใช้ค่าติดลบ arg แรก:

mainCastList.splice(-1, 0, "Steven Seagal");
console.log(mainCastList);
// Steven Seagal กลายเป็นลำดับสองท้าย — สิทธิ์คุณ ตัดสินใจเอง!