Hàm splice() trong JavaScript

• Trần Thị Vân
• 1007
• 22/08/2025

Chức năng của Hàm splice() trong JavaScript

Hàm splice() trong JavaScript dùng để thêm, xóa, thay thế các phần tử trong một mảng, đồng thời cập nhật lại khóa (key) của các phần tử, vị trí bắt đầu tính từ vị trí 0.

Cú pháp của Hàm splice() trong JavaScript

mang.splice(vitribatdau, soluongxoa, 'phantu1', 'phantu2', 'phantu3',.....);

mang: Mảng

vitribatdau:Vị trí bắt đầu để xóa và cũng là vị trí bắt đầu để thêm các phần tử.

soluongxoa: Số lượng phần tử cần xóa tính từ vị trí bắt đầu.

'phantu1', 'phantu2', 'phantu3',.....: Các phần tử cần thêm vào từ vị trí bắt đầu.

Code Hàm splice() trong JavaScript

Thêm 2 phần tử Dung, Hạ vào vị trí thứ 1

<script>
// Thêm 2 phần tử Dung, Hạ vào vị trí thứ 1
document.write("<b>Thêm 2 phần tử Dung, Hạ vào vị trí thứ 1</b><br>"); 

var mang  = new Array("Vân","Lực","Quỳnh");

mang.splice(1, 0, 'Dung', 'Hạ');

// Vòng lặp xem các phần tử còn lại trong mảng
mang.forEach((value, key) => {
document.write("Vị trí "+key+": "+value+"<br>"); 
});
</script>

Kết quả:

Thêm 2 phần tử Dung, Hạ vào vị trí thứ 1
Vị trí 0: Vân
Vị trí 1: Dung
Vị trí 2: Hạ
Vị trí 3: Lực
Vị trí 4: Quỳnh

Xóa 2 phần tử bắt đầu từ vị trí số 1

<script>
// Xóa 2 phần tử bắt đầu từ vị trí số 1
document.write("<b>Xóa 2 phần tử bắt đầu từ vị trí số 1</b><br>"); 

var manghai  = new Array("Vân","Dung","Hạ","Lực","Quỳnh");

manghai.splice(1, 2);

// Vòng lặp xem các phần tử còn lại trong mảng
manghai.forEach((value, key) => {
document.write("Vị trí "+key+": "+value+"<br>"); 
});
</script>

Kết quả:

Xóa 2 phần tử bắt đầu từ vị trí số 1
Vị trí 0: Vân
Vị trí 1: Lực
Vị trí 2: Quỳnh

Xóa 2 phần tử bắt đầu vị trí 1, đồng thời thêm các phần tử khác bắt đầu vị trí 1

<script>
// Xóa 2 phần tử bắt đầu vị trí 1, đồng thời thêm các phần tử khác bắt đầu vị trí 1
document.write("<b>Xóa 2 phần tử bắt đầu vị trí 1, đồng thời thêm các phần tử khác bắt đầu vị trí 1</b><br>"); 

var mangba  = new Array("Vân","Hạ","Quỳnh","Lực","Dung");

mangba.splice(1, 2, 'Cherry', 'Nhím');

// Vòng lặp xem các phần tử còn lại trong mảng
mangba.forEach((value, key) => {
document.write("Vị trí "+key+": "+value+"<br>"); 
});
</script>

Kết quả:

Xóa 2 phần tử bắt đầu vị trí 1, đồng thời thêm các phần tử khác bắt đầu vị trí 1
Vị trí 0: Vân
Vị trí 1: Cherry
Vị trí 2: Nhím
Vị trí 3: Lực
Vị trí 4: Dung

Chạy Thử

Những lưu ý khi sử dụng hàm splice() trong JavaScript

Khi sử dụng splice(), điều quan trọng nhất cần nhớ là phương thức này tác động trực tiếp lên mảng ban đầu. Vì vậy, nếu không muốn dữ liệu gốc bị thay đổi ngoài dự kiến, cần cân nhắc cách sử dụng trước khi thực hiện thao tác thêm, xóa hoặc thay thế phần tử.

splice() làm thay đổi trực tiếp mảng ban đầu

Khác với một số phương thức chỉ tạo ra kết quả mới, splice() sẽ cập nhật ngay mảng được gọi phương thức. Các phần tử bị xóa sẽ được trả về dưới dạng một mảng riêng, trong khi mảng ban đầu vẫn giữ lại các phần tử sau khi đã thay đổi.

Đặc điểm này rất hữu ích khi cần chỉnh sửa trực tiếp một danh sách. Tuy nhiên, nó có thể gây ra lỗi khó nhận biết nếu mảng đó đang được sử dụng ở nhiều vị trí trong chương trình.

Ví dụ, sau khi xóa phần tử bằng splice(), biến numbers không còn chứa dữ liệu như trước:

const numbers = [10, 20, 30, 40];

numbers.splice(1, 1);

console.log(numbers);
// [10, 30, 40]

Nếu cần giữ nguyên mảng gốc, có thể tạo một bản sao trước khi thao tác:

const numbers = [10, 20, 30, 40];
const newNumbers = [...numbers];

newNumbers.splice(1, 1);

console.log(numbers);
// [10, 20, 30, 40]

console.log(newNumbers);
// [10, 30, 40]

Cách này đặc biệt hữu ích khi dữ liệu ban đầu còn được sử dụng cho những mục đích khác. Việc chủ động kiểm soát mảng nào được phép thay đổi giúp chương trình dễ dự đoán và hạn chế lỗi phát sinh khi xử lý dữ liệu.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Hàm splice() trong JavaScript.