Cách sử dụng Splice trong JavaScript: Tìm hiểu phương thức mảng

Splice là một phương thức Mảng Javascript giúp thay đổi nội dung của một mảng bằng cách xóa hoặc thay thế một phần tử hiện có hoặc thêm một phần tử mới vào vị trí.

Trong hướng dẫn này, tôi sẽ giải thích cách sử dụng phương thức ghép mảng Javascript. Các nhà phát triển ở mọi cấp độ đều có thể đọc và hiểu bài viết này.

Hiểu Phương thức Mảng (mối nối)

Nếu chúng ta xem trang web MDN, chúng ta sẽ nhận ra rằng hàm tạo nguyên mẫu mảng Javascript, cho phép chúng ta thêm các phương thức và thuộc tính mới vào đối tượng Array() có rất nhiều phương thức và mối nối là một trong số đó.

Array.prototype.splice()

Tuy nhiên, nếu chúng tôi đã cố gắng sử dụng cùng một phương thức này trên nguyên mẫu chuỗi, như ví dụ bên dưới;

const strings = 'learn'

strings.splice()

Tuy nhiên, chúng tôi sẽ nhận được một loại lỗi cho biết:

Uncaught TypeError: strings.splice is not a function

Điều quan trọng cần biết là mối nối và lát cắt không giống nhau. Phương thức slice không thay đổi hoặc thay đổi dữ liệu của bạn nhưng phương thức mối nối thì có và đây là lý do tại sao phương thức mối nối không thể được sử dụng trên các chuỗi: các chuỗi là bất biến.

Cách sử dụng phương thức nối mảng Javascript

Sử dụng phương thức mảng Javascript nối rất dễ, nhưng cú pháp đôi khi bị lạm dụng.

Bạn có thể sử dụng phương pháp nối trong các bước này

arr.splice(start, deleteCount, item1, ..., itemN)

Thuộc tính mối nối () nhận một số tham số, các tham số này được sử dụng để xác định hành vi của bất kỳ mảng nào mà phương thức mối nối được gọi.

Chúng như sau:

• Bắt đầu
• xóaĐếm
• vật phẩm

Bắt đầu

Đây chỉ là chỉ mục mà chúng ta muốn mảng của mình bắt đầu thay đổi, không có phần tử nào bị xóa nếu chỉ mục của phần tử lớn hơn độ dài của mảng. Nhưng nó thêm một đối số vào cuối mảng nếu chỉ số nhỏ hơn độ dài của mảng.

xóaĐếm

Đây là tham số tùy chọn biểu thị số lượng phần tử cần xóa khỏi mảng, để xóa hoặc loại bỏ một phần tử thì phải có tham số bắt đầu.

Nếu bạn không bao gồm tham số này hoặc nếu nó có giá trị bằng với độ dài của mảng hoặc thậm chí lớn hơn độ dài của mảng, thì tất cả các phần tử từ tham số bắt đầu đến mục cuối cùng trong mảng sẽ bị xóa. Xin lưu ý rằng thông số này phải được đưa vào nếu có thông số mặt hàng.

vật phẩm

Đây cũng là một tham số tùy chọn cho bạn biết phần tử sẽ được thêm vào mảng

Nếu chúng ta không nêu rõ các phần tử, phương thức splice() của mảng Javascript sẽ xóa các phần tử khỏi mảng. Điều này sẽ trả về một mảng trống.

Trường hợp sử dụng

Bây giờ chúng ta đã hiểu tham số là gì, hãy thử xem các trường hợp sử dụng và ví dụ về cách thực hiện tham số này khi viết chương trình của chúng ta.

Xóa các phần tử 0 trước một chỉ mục được chỉ định

Nếu chúng ta muốn thêm một phần tử mà không xóa bất kỳ mục nào, chúng ta chỉ cần chỉ định chỉ mục và nó sẽ không xóa gì ngoài việc bắt đầu trước chỉ mục đã chỉ định.

Chúng ta hãy xem ví dụ dưới đây:

const myMusic = ['piano', 'guitar', 'violin', 'orchestra'];

const removedElement = myMusic.splice(2, 0, 'drum');

// myMusic is [piano', 'guitar', 'drum', 'guitar', 'violin', 'orchestra']

// removedElement is empty [ ], no elements deleted

Trong đoạn mã trước, chúng tôi cố gắng xóa một phần tử trên chỉ mục 3(quan), nghĩa là ngay khi nó đến chỉ mục 3, bất kỳ mục nào nó tìm thấy sẽ bị xóa mà không thay thế nó bằng bất kỳ phần tử nào.

Chúng ta cũng có thể xóa một phần tử và thêm các phần tử khác.

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(3, 1, 'sax');

// myMusic is ['piano', 'guitar', 'drum', 'sax', 'orchestra']

// removedElement is ['violin']

Tương tự, ngay khi chúng tôi đến chỉ mục 3, bất cứ thứ gì nó tìm thấy, trong trường hợp này là 'dàn nhạc', sẽ bị xóa và thêm những cái mới hơn ('sax'), Đoạn mã trên cho biết cách 'trống' được thêm vào mảng . Bắt đầu từ chỉ mục 2, số 0 bảo nó không xóa gì, nếu chúng ta có 1 ở đó, nó sẽ xóa 1 phần tử và thêm mục chúng ta muốn, v.v.

Xóa một hoặc nhiều phần tử tại một chỉ mục đã chỉ định

Giả sử chúng ta muốn xóa một mục hoặc thành phần mà không cần thêm mục hoặc thành phần mới vào mảng, chúng ta chỉ cần viết nó giống như đoạn mã trước

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra'];

const removedElement = myMusic.splice(3, 1);

// myMusic is ['piano', 'guitar', 'drum', 'ochestra']

// removedElement is ['violin']

Chúng tôi có thể bắt đầu tại bất kỳ chỉ mục nào và xóa bao nhiêu mục tùy ý.

Xóa tất cả các phần tử bắt đầu từ một chỉ mục đã chỉ định

Chúng ta có thể xóa tất cả các phần tử trong mảng bắt đầu từ bất kỳ chỉ số nào chúng ta muốn. Ví dụ: giả sử chúng tôi muốn xóa tất cả bắt đầu từ chỉ mục 1. Khi đến chỉ mục 1, mọi phần tử bắt đầu từ chỉ mục 1 sẽ bị xóa.

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(1);

// myMusic is ['piano', 'guitar']

// removedElement is ['drum', 'sax', 'ochestra']

Đoạn mã này cố gắng xóa tất cả các phần tử bắt đầu từ chỉ mục 1. Trong đó chỉ mục 1 là 'chú hề' trong mảng. Vì quá trình đếm bắt đầu từ 0, nên điều này sẽ trả về một mảng mới. chỉ chứa một yếu tố là 'thiên thần'. Điều này là do trong quá trình đếm 'thiên thần' xuất hiện ở chỉ số 0. Và quá trình đếm bắt đầu ở chỉ số 1. Chỉ số 0 sẽ bị bỏ qua khiến nó trả về kết quả đó.

mang đi

Nếu bạn cần thực hiện một tác vụ trên một mảng và bạn không muốn mảng ban đầu bị thay đổi, thì nên tránh sử dụng phương thức splice() của mảng Javascript vì chúng làm thay đổi dữ liệu của bạn.

const beforeSplice = ['bread','fish','cook']

console.log(beforeSplice)

// ['bread', 'fish', 'cook']

const afterSpliceData = beforeSplice.splice(1)

console.log(afterSplice)

// ['fish', 'cook']

Trong ví dụ trên. Trước khi phương thức của mảng Javascript được gọi trên biến beforeSplice. Chúng ta có 3 phần tử, nhưng sau khi phương thức được áp dụng, nó trả về 2 phần tử. Phương pháp này đã thay đổi dữ liệu. Đôi khi đây không phải là những gì chúng ta muốn. Nhưng nếu tất cả những gì bạn chỉ muốn làm là loại bỏ các phần tử hoặc thêm một phần tử, thì điều đó thật hoàn hảo.

Hẹn gặp lại bạn ở lần tiếp theo.