Đổi cho 2 giá trị trong mảng theo vị trị javascript

Question

Hôm nay bạn hãy cùng mình đi vào tìm hiểu cách sử dụng các phương thức với kiểu dữ liệu array (mảng) trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Nội dung chính Show

Phương Thức splice() Array Javascript
Xóa Phần Tử Trong Array Bằng splice()
Thêm Phần Tử Trong Array Bằng splice()
Thay Thế Phần Tử Trong Array Bằng splice()
Phương Thức slice() Array Javascript
Phương Thức concat() Array Javascript
Phương Thức indexOf() Array Javascript
Phương Thức lastIndexOf() Array Javascript

Phương Thức splice() Array Javascript

Ở bài trước thì chúng ta chỉ học được cách thêm hay xóa các phần tử ở vị trí đầu hoặc cuối mảng. Phần này chúng ta sẽ đi tìm hiểu phương thức

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

9 cho phép thêm một phần tử mới vào vị trí mà bạn mong muốn hay xóa, thay thế các phần tử hiện có ở trong mảng. Phương thức này theo mình thấy rất hữu ích, giúp bạn linh hoạt trong việc xử lý với kiểu dữ liệu mảng hơn.

Xóa Phần Tử Trong Array Bằng splice()

Bạn còn nhớ là mảng trong javascript thì có kiểu dữ liệu là object.
Do đó ta có thể dùng lệnh

 let mang = [4, 5, 6 , 7, 8, 9];
 mang.splice(1, 3);

 console.log(mang);
 console.log(mang.length);

0 để xóa phần tử trong mảng. Bây giờ chúng ta thử sử dụng lệnh này và xem kết quả sao nhé:

Đoạn Code:

 let mang = [4, 5, 6];
 delete mang[1];

 console.log(mang);
 console.log(mang.length);

Kết Quả:

Như bạn thấy thì lệnh

 let mang = [4, 5, 6 , 7, 8, 9];
 mang.splice(1, 3);

 console.log(mang);
 console.log(mang.length);

0 giúp chúng ta xóa phần tử khỏi mảng nhưng độ dài của mảng thì không thay đổi. Việc trả về như vậy nhiều khi sẽ gây ra những lỗi không đáng có khi chúng ta sử dụng mảng đó trong lập trình.

Thì để xử lý vấn đề trên, bạn nên sử dụng phương thức

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

9. Bây giờ chúng ta sẽ đi vào tìm hiểu cú pháp của nó nhé:

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

Thì ở đây bạn lưu ý là:

Vị trí: Đây là vị trí chỉ mục phần tử đầu tiên ta muốn xóa.
Số phần tử muốn xóa: Là số lượng phần tử bạn muốn xóa. Nó sẽ xóa từ vị trí chỉ mục đầu tiên đến số phần tử chúng ta mong muốn theo hướng từ trái sang phải nha.

Ngoài ra chúng ta có thể lấy giá trị của các phần tử bị xóa khi gán giá trị đó vào biến hay gọi nó. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Đoạn Code:

 let mang = [4, 5, 6 , 7, 8, 9];
 mang.splice(1, 3);

 console.log(mang);
 console.log(mang.length);

Kết Quả:

Như bạn thấy khi chúng ta gọi

 let mang = [4, 5, 6 , 7, 8, 9];
 mang.splice(1, 3);

 console.log(mang);
 console.log(mang.length);

3 thì phương thức này sẽ:

Tìm đến vị trí chỉ mục 1 trong mảng với giá trị là số 5.
Từ vị trí chỉ mục 1 thì xóa đi ba phần tử (Bao gồm cả phần tử có vị trí chỉ mục 1) là số 5, 6, 7.

Kết quả cuối cùng như bạn thấy trong ảnh phía trên. Và mình cũng lưu ý là phương thức

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

9 khi xóa phần tử thì độ dài của mảng sẽ tự động giảm theo.

Thêm Phần Tử Trong Array Bằng splice()

Phương thức

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

9 cho phép chúng ta thêm một hay nhiều phần tử trong mảng và để hiểu về cách hoạt động của nó thì bạn hãy cùng mình xem cú pháp của nó nhé:

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

Ở đây mình xin giải thích về cú pháp trên một tý là :

Vị Trí: nơi chúng ta muốn thêm phần tử mới vào trong mảng.
0: bắt buộc khi chúng ta muốn thêm phần tử nhé. Vì trong cú pháp của phương thức
```
 (Mảng).splice(Vị trí, Số phần tử muốn xóa);
```
9 tham số 0 này sẽ báo là không xóa bất cứ phần tử nào trong mảng.
Phần tử 1, Phần tử 2..Phần tử n: Là các phần tử mà chúng ta muốn thêm vào mảng.

Để bạn dễ hình dung hơn chúng ta cùng đi vào ví dụ thực tế sau đây nhé:

Đoạn Code:

 let mang = ["Số 4", "Số 5", "Số 8", "Số 9"];
 mang.splice(2, 0, "Số 6", "Số 7");

 console.log(mang);
 console.log(mang.length);

Kết Quả:

Thì mình có một số lưu ý nhỏ như sau:

2 biểu thị là ở vị trí chỉ mục thứ 2 chúng ta sẽ thêm các phần tử mới.
0 mặc định khi thêm phần tử bằng phương thức splice().
"Số 6", "Số 7" là các phần tử mới được thêm vào mảng.

Chúng ta cũng có thể sử dụng số âm khi thêm các phần tử vào trong mảng với chiều sẽ đi từ phải sang trái (Xác định vị trí từ cuối mảng). Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let mang = ["Số 4", "Số 5", "Số 6", "Số 9"];
 mang.splice(-1, 0, "Số 7", "Số 8");

 console.log(mang);
 console.log(mang.length);

Kết Quả:

Thay Thế Phần Tử Trong Array Bằng splice()

Để thay thế phần tử trong

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

9 thì chúng ta cần kết hợp hai phương thức là thêm và xóa.
Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Đoạn Code:

 let mang = ["Màu Xanh", "Màu Đỏ", "Màu Cam"];
 mang.splice(1, 1, "Màu Vàng");

 console.log(mang);
 console.log(mang.length);

Kết Quả:

Thì ở đây mình có lưu ý là:

Đầu tiên ta xác định ví trỉ chỉ mục của phần tử cần thay thế là 1.
Tiếp theo là xóa 1 phần tử ở vị trí chỉ mục mà ta đã xác định ở trên.
Cuối cùng là chúng ta thêm phần tử mới vào ngay vị trí chỉ mục đó trong mảng.

Phương Thức slice() Array Javascript

Phương thức

 let mang = [4, 5, 6 , 7, 8, 9];
 mang.splice(1, 3);

 console.log(mang);
 console.log(mang.length);

8 giúp chúng ta trả về một mảng mới được sao chép từ mảng chính. Để hiểu rõ hơn chúng ta cùng nhau đi vào cú pháp của nó ở dưới đây nhé:

(Mảng).slice(Vị trí chỉ mục bắt đầu, Vị trí chỉ mục kết thúc);

Với vị trí chỉ mục bắt đầu: xác định vị trí bắt đầu của các phần tử mà chúng ta muốn lấy.
Với vị trí chỉ mục kết thúc: xác định vị trí kết thúc của mảng mà ta muốn lấy.
Mảng trả về sẽ không bao gồm phần tử ở vị trí chỉ mục kết thúc nha.

Để dễ hình dung hơn bạn cùng mình đi vào tỉm hiểu ví dụ sau đây nhé:

Đoạn Code:

 let mang = [4, 5, 6, 7, 8, 9];
 let mangCopy = mang.slice(1, 4);

 console.log(mang);
 console.log(mangCopy);

Kết Quả:

Chúng ta cũng có thể sử dụng số âm để lấy mảng sao chép từ vị trị cuối mảng thông qua ví dụ dưới đây nhé:

Đoạn Code:

 let mang = [4, 5, 6, 7, 8, 9];
 let mangCopy = mang.slice(-3);

 console.log(mang);
 console.log(mangCopy);

Kết Quả:

Nếu chúng ta không sử dụng tham số trong phương thức

 let mang = [4, 5, 6 , 7, 8, 9];
 mang.splice(1, 3);

 console.log(mang);
 console.log(mang.length);

8 thì kết quả trả về sẽ là mảng sao chép với tất các các phần tử từ mảng chính. Khi chúng ta thay đổi (thêm sửa xóa) mảng sao chép thì nó hoàn toàn không ảnh hưởng đến mảng chính. Để hiểu rõ hơn thì chúng ta tìm cùng nhau tìm hiểu ví dụ sau nhé:

Đoạn Code:

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

0

Kết Quả:

Phương Thức concat() Array Javascript

Phương thức

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

0 sẽ trả về một mảng mới bao gồm giá trị của các phần tử trong những mảng khác nhau hay các kiểu dữ liệu khác. Để hiểu rõ hơn bạn xem cú pháp nó sau đây nhé:

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

1

Với tham số ở đây có thể là các kiểu dữ liệu khác nhau như là mảng, chuỗi số... Bây giờ chúng ta sẽ đi vào ví dụ thực tế ở dưới đây nhé:

Đoạn Code:

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

2

Kết Quả:

Tiếp theo chúng ta sẽ đi vào cách sử dụng tham số với kiểu dữ liệu khác như là chuỗi, số, boolean... ở ví dụ dưới đây nhé:

Đoạn Code:

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

3

Kết Quả:

Như bạn thấy thì chúng ta có thể thêm thoải mái các phần tử cới các kiểu dữ liệu khác nhau vào trong mảng bằng phương thức

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

0.

Phương Thức indexOf() Array Javascript

Phương thức

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

2 sẽ trả về vị trí chỉ mục đầu tiên của phần tử mà chúng ta muốn tìm ở trong mảng. Cách hoạt động của phương thức này cũng khá giống với trong chuỗi nhưng thay vì tìm ký tự thì ở đây chúng ta sẽ tìm phần tử trong mảng. Bây giờ để nắm rõ hơn ta sẽ đi vào tìm hiểu cú pháp của nó nhé:

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

4

Phương thức indexOf() sẽ trả về giá trị -1 nếu như mảng không chứa phần tử.
Vị trí chỉ mục bắt đầu tìm kiếm có nghĩa là một tham số để bạn xác định phương thức indexOf() sẽ bắt đầu tìm kiếm từ vị trí chỉ mục nào trong mảng. Nếu bạn không sử dụng tham số này thì nó sẽ mặc định vị trí chỉ mục là 0, nghĩa là nó sẽ bắt đầu tìm kiếm từ phần tử đầu tiên trong mảng.

Bây giờ để hiểu rõ hơn chúng ta cùng nhau đi vào ví dụ sau đây nhé:

Đoạn Code:

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

5

Kết Quả:

Phương Thức lastIndexOf() Array Javascript

Phương thức

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

3 hoạt động cũng giống như phương thức

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

2 nhưng điểm khác biệt là nó sẽ tìm phần tử từ vị trí phải sang trái ở trong mảng. Cái này thường được sử dụng nếu trong mảng có nhiều phần tử giống nhau và cần tìm phần tử ở gần cuối mảng nhất. Để dễ hình dung chúng ta cùng nhau đi vào tìm hiểu ví dụ sau nhé:

Đoạn Code:

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

6

Kết Quả:

Mình có lưu ý là hai phương thức

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

5 và

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

3 sẽ không thể tìm kiếm vị trí chỉ mục của object ở trong mảng. Bây giờ bạn cùng mình theo dõi ví dụ sau đây để hiểu rõ hơn nhé:

Đoạn Code:

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

7

Kết Quả:

Vậy để có thể tìm kiếm được object trong mảng thì ta có thể sử dụng phương thức

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

7 để kiểm tra xem một object có tồn tại trong mảng hay không? và nó được viết dưới dạng

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

8. Mình sẽ có một bài chi tiết về hàm này sau nha. Bây giờ chúng ta thử giải quyết ví dụ trên bằng hàm

 (Mảng).splice(Vị trí, 0, Phần tử 1, Phần tử 2... Phần tử n);

7 nhé:

Đoạn Code:

 (Mảng).splice(Vị trí, Số phần tử muốn xóa);

8

Kết Quả:

Nếu bạn thấy khó hiểu cũng không sao nha, bài sau mình sẽ viết chi tiết về khái niệm cũng như cách sử dụng

 let mang = ["Số 4", "Số 5", "Số 8", "Số 9"];
 mang.splice(2, 0, "Số 6", "Số 7");

 console.log(mang);
 console.log(mang.length);

0 này để làm việc thêm với các phương thức khác của mảng.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được cách sử dụng các phương thức đối với mảng trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

programming javascript