เมธอด Array.splice() ใน JavaScript: เพิ่ม/ลบ/แทนที่องค์ประกอบในอาร์เรย์

เมธอด splice() เป็นเมธอดที่ทรงพลังที่สุดสำหรับ แก้ไขอาร์เรย์โดยตรง (Mutate) สามารถ เพิ่ม, ลบ, หรือแทนที่ องค์ประกอบได้ในครั้งเดียว

ไวยากรณ์ (Syntax)

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• start - ดัชนีเริ่มต้น (ค่าลบ = นับจากท้าย)
• deleteCount (ตัวเลือก) - จำนวนองค์ประกอบที่จะลบ (ค่าเริ่มต้น: จนถึงสุดอาร์เรย์)
• item1, item2, ... (ตัวเลือก) - องค์ประกอบที่จะแทรกเพิ่ม

คืนค่า

อาร์เรย์ขององค์ประกอบที่ถูกลบออก (อาจเป็นอาร์เรย์ว่าง)

ตัวอย่างการใช้งาน

ตัวอย่างที่ 1: แทนที่องค์ประกอบ (Remove + Add)

<!DOCTYPE html>
<html>
<body>
  <h2>สินค้า - splice()</h2>
  <p>คลิกเพื่ออัปเดตรายการสินค้า...</p>
  <button onclick="display()">อัปเดต</button>
  <p id="demo"></p>
  <script>
    let products = ["Electronics", "Books", "Accessories"];
    document.getElementById("demo").innerHTML = "เริ่มต้น: " + products;
    
    function display() {
      // ลบ 2 ตัว ตั้งแต่ดัชนี 1 (Books, Accessories) แล้วเพิ่ม 2 ตัวใหม่
      const removed = products.splice(1, 2, "Pet Supplies", "Footwear");
      document.getElementById("demo").innerHTML = 
        "เริ่มต้น: Electronics,Books,Accessories<br>" +
        "ถูกลบ: " + removed + "<br>" +
        "ตอนนี้: " + products;
      // ผลลัพธ์: Electronics,Pet Supplies,Footwear
    }
  </script>
</body>
</html>

ตัวอย่างที่ 2: แทรกเพิ่มโดยไม่ลบ (deleteCount = 0)

<!DOCTYPE html>
<html>
<body>
  <h2>สินค้า - splice() แทรกเพิ่ม</h2>
  <p>คลิกเพื่อเพิ่มสินค้าที่ดัชนี 3...</p>
  <button onclick="display()">เพิ่มสินค้า</button>
  <p id="demo"></p>
  <script>
    let products = ["Electronics", "Books", "Accessories"];
    document.getElementById("demo").innerHTML = "เริ่มต้น: " + products;
    
    function display() {
      // ลบ 0 ตัวที่ดัชนี 3 แล้วเพิ่ม 3 ตัว
      products.splice(3, 0, "Pet Supplies", "Footwear", "Home Appliances");
      document.getElementById("demo").innerHTML = "ตอนนี้: " + products;
      // ผลลัพธ์: Electronics,Books,Accessories,Pet Supplies,Footwear,Home Appliances
    }
  </script>
</body>
</html>

ตัวอย่างที่ 3: ลบอย่างเดียว (ไม่เพิ่ม)

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 2); // ลบ 2 ตัว ตั้งแต่ดัชนี 2
console.log(arr);     // [1, 2, 5]
console.log(removed); // [3, 4]

ตัวอย่างที่ 4: ใช้ Negative Index

const arr = ['a', 'b', 'c', 'd', 'e'];

arr.splice(-2, 1);    // ลบ 1 ตัว จากตัวสุดท้าย - 1 (คือ 'd')
console.log(arr);     // ['a', 'b', 'c', 'e']

arr.splice(-3, 0, 'X', 'Y'); // แทรก X,Y ก่อน 3 ตัวสุดท้าย
console.log(arr);     // ['a', 'b', 'X', 'Y', 'c', 'e']

รูปแบบทั่วไป (Common Patterns)

⚠️ ข้อควรระวัง

• Mutates 原อาร์เรย์ - ตัวแปรอ้างอิงเดิมจะเห็นการเปลี่ยนแปลง
• ประสิทธิภาพ O(n) - ต้องเลื่อน index องค์ประกอบหลังจุดที่แก้ไข
• คืนค่าอาร์เรย์ที่ถูกลบ (ไม่ใช่อาร์เรย์ที่เหลือ)

ทางเลือก Immutable (ไม่เปลี่ยนต้นฉบับ)

// แทนที่
const replaced = [...arr.slice(0, i), newItem, ...arr.slice(i + 1)];

// แทรก
const inserted = [...arr.slice(0, i), newItem, ...arr.slice(i)];

// ลบ
const removed = [...arr.slice(0, i), ...arr.slice(i + 1)];

// หรือใช้ toSpliced() (ES2023 / Stage 3)
const replaced = arr.toSpliced(i, 1, newItem); // คืนอาร์เรย์ใหม่ ต้นฉบับไม่เปลี่ยน