Xóa phần tử mảng bằng splice() trong JavaScript

Phương thức Array.prototype.splice() là cách mạnh mẽ và phổ biến nhất để xóa, thay thế, hoặc chèn phần tử trong mảng — và nó thay đổi mảng gốc (mutating).

Cú pháp

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

• start: Chỉ số bắt đầu xóa/chèn (âm = đếm từ cuối).
• deleteCount: Số phần tử cần xóa. 0 = chỉ chèn, không xóa.
• itemN (tùy chọn): Các phần tử chèn vào vị trí start.

Trả về: Mảng chứa các phần tử đã bị xóa (rỗng nếu không xóa gì).

Ví dụ: Xóa phần tử từ chỉ số 1 đến 4 (4 phần tử)

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Xóa phần tử với splice()</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
    .sample, .result { font-size: 18px; font-weight: 500; margin: 10px 0; }
    .result { color: green; }
    button { padding: 8px 16px; font-size: 16px; cursor: pointer; }
  </style>
</head>
<body>
  <h1>Xóa phần tử mảng bằng splice()</h1>
  <div class="sample"></div>
  <div class="result"></div>
  <button class="btn">XÓA PHẦN TỬ (index 1-4)</button>
  <p>Click nút để xóa 4 phần tử bắt đầu từ chỉ số 1</p>

  <script>
    const fillEl = document.querySelector(".sample");
    const resultEl = document.querySelector(".result");
    const btn = document.querySelector(".btn");

    let arr = [1, 3, 5, 7, 9, 11];
    fillEl.textContent = "Mảng gốc: [" + arr.join(", ") + "]";

    btn.addEventListener("click", () => {
      // Xóa 4 phần tử từ chỉ số 1 (phần tử 3, 5, 7, 9)
      const removed = arr.splice(1, 4);
      resultEl.textContent = "Mảng sau splice: [" + arr.join(", ") + "]";
      console.log("Đã xóa:", removed); // [3, 5, 7, 9]
    });
  </script>
</body>
</html>

Kết quả

• Trước: [1, 3, 5, 7, 9, 11]
• splice(1, 4) xóa 4 phần tử từ index 1
• Sau: [1, 11]
• Trả về: [3, 5, 7, 9] (mảng phần tử bị xóa)

Các trường hợp thường gặp

Lưu ý quan trọng

• Mutating: splice thay đổi mảng gốc. Nếu cần immutable, hãy copy trước: [...arr].splice(...) hoặc dùng filter/slice.
• Trả về mảng xóa: Luôn trả về mảng (có thể rỗng), không phải phần tử đơn lẻ.
• Chỉ số âm: splice(-2, 1) xóa phần tử倒数 thứ 2.
• Hiệu năng: O(n) do phải dịch chuyển các phần tử sau vị trí xóa. Với mảng lớn và xóa nhiều lần, cân nhắc filter hoặc cấu trúc dữ liệu khác.

So sánh với các phương pháp khác

const arr = [1, 2, 3, 4, 5];

// splice - MUTATING
arr.splice(1, 2);        // arr = [1, 4, 5], trả về [2, 3]

// filter - IMMUTABLE (tạo mảng mới)
const filtered = arr.filter((_, i) => i !== 1); // [1, 3, 4, 5]

// slice - IMMUTABLE (lấy mảng con)
const sliced = arr.slice(0, 1).concat(arr.slice(3)); // [1, 4, 5]

// delete - TẠO HOLE (KHÔNG KHUYẾN NGHỊ)
delete arr[1]; // [1, empty, 3, 4, 5] - length không đổi!

Khi nào dùng splice?

• Cần xóa/chèn tại vị trí cụ thể và chấp nhận thay đổi mảng gốc.
• Cần lấy danh sách phần tử bị xóa để xử lý thêm.
• Xử lý mảng nhỏ/vừa, thao tác không quá nhiều lần.

Mẹo: Để xóa tất cả phần tử thỏa mãn điều kiện mà không lo index bị lệch, hãy lặp ngược hoặc dùng filter:

// Cách 1: Lặp ngược (mutating)
for (let i = arr.length - 1; i >= 0; i--) {
  if (arr[i] % 2 === 0) arr.splice(i, 1);
}

// Cách 2: filter (immutable, khuyên dùng)
const oddOnly = arr.filter(x => x % 2 !== 0);