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

Các phương thức JavaScript tích hợp sẵn giúp chúng ta rất nhiều trong khi lập trình, một khi chúng ta hiểu đúng về chúng. Tôi muốn giải thích ba trong số chúng trong bài viết này: các slice(), splice()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 sinh viên và các nhà phát triển cơ sở 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

Trước tiên, bạn cần hiểu cách hoạt động của các mảng JavaScript . Giống như 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à các mảng JS có thể chứa nhiều 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ư slice () & splice () . 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];

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

Slice ()

Các lát () phương pháp bản sao một phần nhất định của một mảng và trả về mà sao chép một phần như là 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ỉ mục phần tử
  • Cho đến: Cắt mảng cho đến khi chỉ mục 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ột mảng luôn được lập chỉ mục ở 0, 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 cung cấp cho đến khi thông số như 3. Các phương pháp lát () không bao gồm các yếu tố cho trước.

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 là “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ắt cho biến newArray . Bây giờ chúng ta hãy xem kết quả:

Lưu ý quan trọng: phương thức Slice () cũng có thể được sử dụng cho chuỗi.

Mối nối ()

Tên của hàm này rất giống với slice () . 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 loại bỏ các yếu tố từ nó. Hãy xem cách thêm và xóa các phần tử bằng splice ( ) :

Loại bỏ các phần tử

Để xóa các phần tử, chúng ta cần cung cấp tham số chỉ mụcsố lượng phần tử sẽ được xóa:

array.splice(index, number of elements);

Chỉ mục điểm bắt đầu để loại bỏ các phần tử. Các phần tử cósố chỉ mục nhỏ hơn từ chỉ mục đã cho sẽ không bị xóa:

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:

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

array.splice(2, 1);

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

Sau cuộc gọi thứ hai:

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

Thêm phần tử

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

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

Ví dụ, tôi thêm ab vào đầu mảng và tôi không xóa gì:

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

Tách ()

Phương thức Slice () splice () dành cho mảng. Phương thức split () được sử dụng cho các chuỗi . 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. Nó có 2 tham số và cả hai đều là tùy chọn.

string.split(separator, limit);

  • Dấu phân tá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 tách với một số nhất định

Phương thức split () không hoạt động trực tiếp cho các 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 phương thức split () .

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 chúng tôi thành một chuỗi với phương thức toString () :

let myString = array.toString();

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

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

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, chỉ 3 phần tử đầu tiên được trả về.

LƯU Ý: Nếu chúng ta có 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:

Tóm lược:

Slice ()

  • Sao chép các phần tử từ một mảng
  • Trả về chúng dưới dạng một mảng mới
  • Không thay đổi mảng ban đầu
  • Bắt đầu cắt từ… cho đến khi chỉ mục nhất định: array.slice (từ, cho đến khi)
  • Slice không bao gồm thông số chỉ mục "cho đến khi"
  • Có thể được sử dụng cho cả mảng và chuỗi

Mối nối ()

  • Được sử dụng để thêm / xóa các phần tử khỏi mảng
  • Trả về một mảng các phần tử đã bị loại bỏ
  • Thay đổi mảng
  • Để thêm phần tử: array.splice (chỉ số, số phần tử, phần tử)
  • Để xóa các phần tử: array.splice (chỉ số, số phần tử)
  • Chỉ có thể được sử dụng cho các mảng

Tách ()

  • Chia một chuỗi thành các chuỗi con
  • Trả về chúng trong một mảng
  • Lấy 2 tham số, cả hai đều là tùy chọn: string.split (dấu phân cách, giới hạn)
  • Không thay đổi chuỗi ban đầu
  • Chỉ có thể được sử dụng cho chuỗi

Có nhiều phương thức tích hợp khác dành cho mảng và chuỗi JavaScript, giúp làm việc với lập trình JavaScript dễ dàng hơn. Tiếp theo, bạn có thể xem bài viết mới của tôi về Phương thức chuỗi con JavaScript.

Nếu bạn muốn tìm hiểu thêm về phát triển web, hãy theo dõi tôi trên Youtube !

Cảm ơn bạn đã đọc!