Hãy làm sáng tỏ sự nhầm lẫn xung quanh các phương thức slice(), splice(), & split() trong JavaScript

Các phương thức tích hợp sẵn của JavaScript giúp chúng ta rất nhiều trong khi lập trình, một khi chúng ta hiểu chúng một cách chính xác. Tôi muốn giải thích ba trong số chúng trong bài viết này: slice(), splice() và split() các phương pháp. Có lẽ vì cách đặt tên của chúng quá giống nhau nên chúng thường bị nhầm lẫn, ngay cả với những nhà phát triển có kinh nghiệm.

Tôi khuyên các sinh viên và lập trình viên mới vào nghề nên đọc kỹ bài viết này vì ba phương pháp này cũng có thể được hỏi trong PHỎNG VẤN VIỆC LÀM.

Cuối cùng, bạn có thể tìm thấy bản tóm tắt của từng phương pháp. Nếu thích, bạn cũng có thể xem phiên bản video bên dưới:

Vì vậy, hãy bắt đầu…

Mảng JavaScript

Đầu tiên, bạn cần phải hiểu làm thế nào mảng JavaScript công việc. Giống như trong các ngôn ngữ lập trình khác, chúng tôi sử dụng mảng để lưu trữ nhiều dữ liệu trong JS. Nhưng sự khác biệt là JS mảng có thể chứa các loại dữ liệu khác nhau cùng một lúc.

Đôi khi chúng ta cần thực hiện các thao tác trên các mảng đó. Sau đó, chúng tôi sử dụng một số phương thức JS như lát () & ghép (). Bạn có thể xem bên dưới cách khai báo một mảng trong JavaScript:

let arrayDefinition = []; // Array declaration in JS

Bây giờ hãy khai báo một mảng khác với các kiểu dữ liệu khác nhau. Tôi sẽ sử dụng nó dưới đây trong các ví dụ:

let array = [1, 2, 3, "hello world", 4.12, true];

Cách sử dụng này là có hiệu lực trong JavaScript. Một mảng với các kiểu dữ liệu khác nhau: chuỗi, số và boolean.

Đọc thêm Hướng dẫn về mảng đối tượng JavaScript – Cách tạo, cập nhật và lặp qua các đối tượng bằng các phương thức mảng JS

Lát cắt ( )

Các lát cắt( ) phương pháp bản sao một phần đã cho của một mảng và trả về phần đã sao chép đó dưới dạng một mảng mới. Nó không thay đổi mảng ban đầu.

array.slice(from, until);

Từ: Cắt mảng bắt đầu từ một chỉ số phần tử
Cho đến khi: Cắt mảng cho đến khi chỉ số phần tử khác

Ví dụ, tôi muốn cắt ba phần tử đầu tiên từ mảng trên. Vì phần tử đầu tiên của mảng luôn có chỉ số là 0 nên tôi bắt đầu cắt “từ”0.

array.slice(0, until);

Bây giờ đây là phần khó khăn. Khi tôi muốn cắt ba yếu tố đầu tiên, tôi phải đưa ra cho đến khi tham số là 3. Các slice() không bao gồm phần tử đã cho cuối cùng.

array[0] --> 1              // included
array[1] --> 2              // included
array[2] --> 3              // included
array[3] --> "hello world"  // not included

Điều này có thể tạo ra một số nhầm lẫn. Đó là lý do tại sao tôi gọi tham số thứ hai “cho đến khi”.

let newArray = array.slice(0, 3); // Return value is also an array

Cuối cùng, tôi gán Mảng được cắt lát cho Mảng mới Biến đổi. Bây giờ hãy xem kết quả:

1*UECVH_JWknae04kVqTr1gg — Lát cắt **mảng** và phân công các thành viên **Mảng mới**

1*YImz2x-CAY-8wqoyT8c6eA — **Mảng mới** biến bây giờ là một mảng và biến ban đầu vẫn giữ nguyên

Lưu ý quan trọng: các Lát cắt( ) phương pháp cũng có thể được sử dụng cho dây.

mối nối ( )

Tên của chức năng này rất giống với lát cắt( ). Sự giống nhau về cách đặt tên này thường gây nhầm lẫn cho các nhà phát triển. Các mối nối ( ) phương pháp thay đổi một mảng, bằng cách thêm hoặc bớt các phần tử khỏi nó. Hãy xem cách thêm và xóa các phần tử với mối nối ( ):

Loại bỏ các yếu tố

Để loại bỏ các phần tử, chúng ta cần cung cấp cho mục lục tham số và số phần tử bị gỡ bỏ:

array.splice(index, number of elements);

Mục lục là điểm khởi đầu để loại bỏ các yếu tố. Các yếu tố có một nhỏ hơn số chỉ mục từ chỉ mục đã cho sẽ không bị xóa:

Đọc thêm Cách sử dụng phá hủy trong JavaScript để viết mã sạch hơn, mạnh hơn

array.splice(2); // Every element starting from index 2, will be removed

Nếu chúng ta không xác định tham số thứ hai, mọi phần tử bắt đầu từ chỉ mục đã cho sẽ bị xóa khỏi mảng:

1*OGTbYRkU4C_5iMF5Sw9lBA — **chỉ có chỉ số 0 và 1 vẫn còn đó**

Ví dụ thứ hai, tôi đặt tham số thứ hai là 1, vì vậy các phần tử bắt đầu từ chỉ số 2 sẽ bị xóa lần lượt mỗi khi chúng ta gọi mối nối ( )phương pháp:

array.splice(2, 1);

Sau cuộc gọi đầu tiên:

1*gMh3g8RLvpAjMGxgfanB8w — 3 được loại bỏ như vậy **“Chào thế giới”** hiện đã có chỉ số 2

Sau cuộc gọi thứ 2:

1*6YWBPU0UsPeoJTcwn8-gWg — Thời gian này, **“Chào thế giới”** được loại bỏ như **chỉ số: 2**

Điều này có thể tiếp tục cho đến khi không còn chỉ số 2 nữa.

Thêm phần tử

Để thêm các phần tử, chúng ta cần cung cấp cho chúng dưới dạng tham số thứ 3, thứ 4, thứ 5 (tùy thuộc vào số lượng cần thêm) vào mối nối ( ) phương pháp:

array.splice(chỉ số, số phần tử, phần tử, phần tử);

Như một ví dụ, tôi đang thêm một và b ngay từ đầu của mảng và tôi không xóa gì:

array.splice(0, 0, 'a', 'b');

1*E7TMFWTYGJDkuhG3VrTCKw — **một** và b thêm vào đầu mảng, không bỏ phần tử nào

Tách ra ( )

Lát cắt( ) và mối nối ( ) phương pháp dành cho mảng. Các tách ra( ) phương pháp được sử dụng cho dây. Nó chia một chuỗi thành các chuỗi con và trả về chúng dưới dạng một mảng. Phải mất 2 tham số, và cả hai đều là không bắt buộc.

string.split(separator, limit);

Dấu phân cách: Xác định cách tách một chuỗi… bằng dấu phẩy, ký tự, v.v.
Giới hạn: Giới hạn số lần chia với một số nhất định

Các tách ra( ) phương pháp không hoạt động trực tiếp cho mảng. Tuy nhiên, trước tiên chúng ta có thể chuyển đổi các phần tử của mảng thành một chuỗi, sau đó chúng ta có thể sử dụng tách ra( ) phương pháp.

Hãy xem nó hoạt động như thế nào.

Đầu tiên, chúng tôi chuyển đổi mảng của mình thành một chuỗi với toString() phương pháp:

Đọc thêm Cách xây dựng trò chơi rắn trong JavaScript

let myString = array.toString();

Bây giờ hãy chia tay myString qua dấu phẩy, giới hạn chúng số ba chuỗi con và trả về chúng dưới dạng một mảng:

let newArray = myString.split(",", 3);

1*v53Ct4WVDXNsCjzDAtpc_g — **Chỉ 3 phần tử đầu tiên được trả về**

Như chúng ta có thể thấy, myString được chia bằng dấu phẩy. Vì chúng tôi giới hạn chia thành 3, nên chỉ có 3 phần tử đầu tiên được trả về.

GHI CHÚ: Nếu chúng ta có một cách sử dụng như thế này: array.split(""); thì mỗi ký tự của chuỗi sẽ được chia thành các chuỗi con:

1*s7RYTgCHVGzZKXDJZYyjaQ — **Từng nhân vật tách ra từng người một**