Trong javascript, hàm splice là một hàm của mảng (Array) dùng để thêm hoặc xóa các phần tử trong mảng. Hàm này sẽ thay đổi mảng gốc trong chính nó và trả về một mảng chứa các phần tử đã xóa (nếu có).
Các bài viết liên quan:
Tại sao nên sử dụng Splice ?
Sử dụng hàm splice trong javascript là một cách rất tiện lợi để thêm hoặc xóa các phần tử trong mảng mà không cần tạo mới một mảng mới.
- Tiện lợi: Hàm splice cho phép bạn thêm hoặc xóa các phần tử trong mảng mà không cần tạo mới một mảng mới.
- Dễ dàng quản lý: Hàm splice cho phép bạn dễ dàng thêm hoặc xóa các phần tử trong mảng mà không cần phải quản lý các mảng khác.
- Thay đổi và tùy biến mảng: Hàm splice cho phép bạn thêm hoặc xóa phần tử từ một mảng, giúp bạn tùy biến mảng theo nhu cầu cụ thể.
- Tiết kiệm thời gian: Sử dụng splice để thêm hoặc xóa phần tử trong mảng sẽ giúp bạn tiết kiệm thời gian so với việc duyệt qua mảng và thực hiện thay đổi từng phần tử bằng tay.
- Mã ngắn gọn: Sử dụng splice giúp việc thêm hoặc xóa phần tử trong mảng trở nên ngắn gọn hơn, giúp tăng tốc độ viết và đọc mã.
- Dễ dàng theo dõi thay đổi: Vì thay đổi được thực hiện trực tiếp trên mảng gốc, nên việc theo dõi và kiểm tra thay đổi sẽ trở nên dễ dàng hơn.
- Hàm splice là một hàm rất tiện lợi và cơ bản của javascript, nó giúp ta dễ dàng thay đổi và quản lý dữ liệu trong mảng.
Sử dụng Splice trong javascript như thế nào ?
Cú pháp cơ bản của hàm splice trong javascript là:
array.splice(startIndex, deleteCount, itemsToInsert)
- startIndex là vị trí mà bạn muốn bắt đầu thêm hoặc xóa phần tử.
- deleteCount là số lượng phần tử bạn muốn xóa từ vị trí startIndex.
- itemsToInsert là các phần tử bạn muốn thêm vào mảng từ vị trí startIndex.
Ví dụ:
let numbers = [1,2,3,4,5]; numbers.splice(2, 1, 6); console.log(numbers); // Output: [1, 2, 6, 4, 5]
Trong ví dụ trên, chúng ta sử dụng hàm splice để xóa 1 phần tử tại vị trí 2 (phần tử thứ 3) và thêm phần tử 6 vào vị trí 2. Kết quả cuối cùng là mảng [1,2,6,4,5].
Khi nào nên sử dụng Splice trong javascript ?
Sử dụng hàm splice có rất nhiều cách và thích hợp cho các tình huống khác nhau, ví dụ như:
- Thêm một phần tử vào mảng: Bạn có thể sử dụng hàm splice để thêm một phần tử vào mảng bằng cách chỉ định vị trí cần thêm và không cần chỉ định số lượng phần tử cần xóa.
- Xóa một phần tử trong mảng: Bạn có thể sử dụng hàm splice để xóa một phần tử trong mảng bằng cách chỉ định vị trí cần xóa và chỉ định số lượng phần tử cần xóa bằng 1.
- Xóa nhiều phần tử trong mảng: Bạn có thể sử dụng hàm splice để xóa nhiều phần tử trong mảng bằng cách chỉ định vị trí cần xóa và chỉ định số lượng phần tử cần xóa.
Tuy nhiên, để sử dụng hàm splice hiệu quả, cần lưu ý rằng mảng gốc sẽ bị thay đổi sau khi sử dụng hàm và khi sử dụng hàm thì nên kiểm tra đảm bảo vị trí và số lượng phần tử trước khi thay đổi.
Một số ví dụ về Splice trong javascript.
Dưới đây là một số ví dụ cách sử dụng Splice:
- Thêm một phần tử vào mảng đầu tiên
let fruits = ['Apple', 'Banana', 'Cherry']; fruits.splice(0, 0, 'Mango'); console.log(fruits); // Output: ['Mango', 'Apple', 'Banana', 'Cherry']
Trong ví dụ này, chúng ta thêm phần tử ‘Mango’ vào vị trí 0 và không xóa bất kỳ phần tử nào.
- Xóa một phần tử tại vị trí 2
let fruits = ['Apple', 'Banana', 'Cherry', 'Dragonfruit']; fruits.splice(2, 1); console.log(fruits); // Output: ['Apple', 'Banana', 'Dragonfruit']
Trong ví dụ này, chúng ta xóa phần tử tại vị trí 2 và chỉ xóa 1 phần tử.
- Xóa nhiều phần tử từ vị trí 1
let fruits = ['Apple', 'Banana', 'Cherry', 'Dragonfruit','Grape','Mango']; fruits.splice(1, 3); console.log(fruits); // Output: ['Apple','Grape','Mango']
Trong ví dụ này, chúng ta xóa 3 phần tử từ vị trí 1.
- Thêm nhiều phần tử vào mảng từ vị trí 2
let fruits = ['Apple', 'Banana', 'Cherry']; fruits.splice(2, 0, 'Dragonfruit', 'Grape', 'Mango'); console.log(fruits); // Output: ['Apple', 'Banana', 'Dragonfruit', 'Grape', 'Mango', 'Cherry']
Trong ví dụ này, chúng ta thêm 3 phần
- Thay đổi nhiều phần tử từ vị trí 2
let fruits = ['Apple', 'Banana', 'Cherry', 'Dragonfruit']; fruits.splice(2, 2, 'Grape', 'Mango'); console.log(fruits); // Output: ['Apple', 'Banana', 'Grape', 'Mango']
Trong ví dụ này, chúng ta thay đổi 2 phần tử từ vị trí 2 bằng 2 phần tử ‘Grape’ và ‘Mango’.
- Thêm và xóa phần tử với vòng lặp:
let numbers = [1, 2, 3, 4, 5];
for(let i = 0; i < numbers.length; i++) {
if(numbers[i] % 2 === 0) {
numbers.splice(i, 1, numbers[i] * 2);
}
}
console.log(numbers); // Output: [1, 4, 3, 8, 5]Trong ví dụ này, chúng ta dùng vòng lặp để duyệt qua các phần tử của mảng và sử dụng hàm splice để xóa phần tử chẵn và thêm phần tử mới vào mảng.
- Thêm và xóa nhiều phần tử với spread operator
let numbers = [1, 2, 3, 4, 5]; let newNumbers = [...numbers.slice(0, 2), 10, 20, ...numbers.slice(3)]; console.log(newNumbers); // Output: [1, 2, 10, 20, 4, 5]
Trong ví dụ này, chúng ta sử dụng spread operator để tạo ra một mảng mới bằng cách xóa và thêm phần tử vào mảng gốc.
- Xóa và thay thế nhiều phần tử với filter
let numbers = [1, 2, 3, 4, 5]; numbers = numbers.filter((num) => num !== 3); console.log(numbers); // Output: [1, 2, 4, 5]
Trong ví dụ này, chúng ta dùng hàm filter để xóa phần tử 3 ra khỏi mảng.
Các ví dụ trên chỉ là một số ví dụ cơ bản và nâng cao về cách sử dụng hàm splice trong javascript, còn rất nhiều cách khác để sử dụng hàm này tùy thuộc vào nhu cầu và mục đích sử dụng.
Tôi mong rằng, bài viết này sẽ giúp ích được nhiều cho bạn trong quá trình tìm hiểu và sử dụng hàm splice trong javascript.
