Sự khác nhau của bộ 3 Slice, Splice và Split trong Javascript

Người viết: Tran Minh Chien

Bên cạnh việc xử lý vòng lặp với mảng như bài viết đầu tiên trong series thì hôm nay mình cũng sẽ giới thiệu về một bộ ba cũng thường là những tác nhân gây đau đầu cho các lập trình viên khi thao tác với chúng : slice(), splice(), split(). Ngay từ việc đọc tên thôi cũng đã làm cho không ít người bối rối.

Đảo lại qua một chút về Array trong javascript, phần tử của nó có thể là nhiều kiểu dữ liệu chứ không chỉ là một loại như trong các ngôn ngữ C, Java, …

Một ví dụ về dạng array hợp lệ trong Js có thể kể đến như :

Slice

Dịch từ này sáng tiếng Việt thì se nôm na là xắt, thái và tác dụng của nó cũng khá giống như vậy, cắt bỏ một phần của array, tuy nhiên điểm cần lưu ý đó chính là hàm slice sẽ tạo ra một array mới chứ không hề chỉnh sửa trên đối tượng array gọi đến nó.

Syntax

Trong đó :

• from: Chí số của phần tử bắt đầu được chọn để cắt
• until: Chỉ số của phần tử được cắt đến .

Chúng ta hãy thử qua một ví dụ trức quan sau:

Và kết quả trả về là:

Như vậy có thể thấy hàm splice() không hề gây thay đổi với đối tượng ban đầu nó tạo ra một đối tượng mới là newArray, đối tượng này là một bản cắt của đối tượng array từ phần tử thứ 1 đến phần tử thứ 3 (trước 4)

Splice

Đây chính là hàm hay bị nhầm lẫn với slice nhẩt, tuy nhiên nó lại có rất nhiều khác biệt so với hàm slice. Splice thường được dùng để thêm hoặc xóa phần tử trong mảng, và điều ngược lại so với slice() là hàm splice() sẽ thay đổi trực tiếp trên đối tượng gọi đến nó.

Xóa bỏ phần tử

Syntax:

Để xóa bỏ phần tử trong mảng, đối số truyền vào hàm số sẽ là :

• index: chỉ số của phần tử đầu tiên được cắt
• number of elements: số lượng phần tử sẽ bị cắt đi.

Trong trường hợp đối số number of elements không được truyền vào hàm, nó sẽ tự động loại bỏ tất cả phần tử từ phần tử thứ index trong mảng

Với ví dụ bên trên các bạn có thể thấy tất cả các phần tử từ index 3 trở lên sẽ bị remove và tạo ra một mảng mới. Mảng array cũ sẽ là mảng sau khi bị cắt các phần tử từ index 3

Thêm phần tử

Phần này cũng là một phần khá rối của splice(), khác với việc loại bỏ phần tử, thêm phần tử sẽ truyền vào 3 đối số trở lên

Syntax:

Trong đó :

• index: Vị trí bắt đầu được thêm vào
• howmany: Số lượng phần tử bị xóa
• item1, …, itemX: Các phần tử có thể được thêm vào

Thử qua ví dụ này các bạn sẽ thấy dễ hiểu hơn

Đoạn code trên có thể tạm dịch là xóa bỏ 1 phần tử từ vị trí index 0 ghi thêm phần tử january vào vị trí đó. Kết quả nhận về sẽ là

Split()

Đây là một hàm rất hữu ích đối với mình khi thao tác với String, nó có nhiệm vụ chia một chuỗi string thành các substrings và trả về nó dưới dạng một mảng.

Cú pháp:

Trong đó:

• separator: Định nghĩa ra kí tự để chia chuỗi
• limit: Giới hạn số lượng phần tử được tách trả về trong mảng

Thực nghiệm qua ví dụ dưới đây nhé:

Đoạn code trên với mục đích tách string “How are you doing today?”, đối số đầu tiên là ” ” , ta có thể hiểu là kí tự phân chia chuỗi, đối số tiếp theo là 3 sẽ chỉ ra số lượng kết quả trả về trong mảng. Như vậy kết quả của đoạn code trên sẽ là