Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Các Phương Thức Array (Mảng) Phần 2 Trong Javascript

Các Phương Thức Array (Mảng) Phần 2 Trong Javascript


Ngày 14 Tháng 5 Năm 2020

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é.

Phương Thức splice() Trong Array (Mảng)

Ở 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 splice() 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 delete để 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ả:

Sử dụng delete trong array(mảng) javascript

Như bạn thấy thì lệnh delete 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 splice(). 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ả:

Xóa phần tử bằng splice() trong array(mảng) javascript

Như bạn thấy khi chúng ta gọi mang.splice(1, 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 splice() 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 splice() 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 splice() 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 phần tử bằng splice() trong array(mảng) javascript

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ả:

Thêm phần tử bằng số âm trong splice() trong array(mảng) javascript

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

Để thay thế phần tử trong splice() 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ả:

Thay thế phần tử bằng splice() trong array(mảng) javascript

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() Trong Array (Mảng)

Phương thức slice() 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ả:

Phuong thức slice() trong array(mảng) javascript

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ả:

Phuong thức slice() với số âm trong array(mảng) javascript

Nếu chúng ta không sử dụng tham số trong phương thức slice() 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:

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

console.log(mang);
console.log(mangCopy);
/*Kiểm tra hai mảng có cùng tham chiếu đến cùng địa chỉ lưu trữ không*/
console.log(mangCopy == mang);

Kết Quả:

Phuong thức slice() sao chép toàn bộ array(mảng) javascript

Phương Thức concat() Trong Array (Mảng)

Phương thức concat() 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).concat(Tham số 1, Tham số 2... Tham số n);

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:

 let mang1 = [1, 2];
let mang2 = [3, 4];

let mang = mang1.concat(mang2);
console.log(mang);

Kết Quả:

Phuong thức concat() trong array(mảng) javascript

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:

 let mang1 = [1, 2];

let mang = mang1.concat(5,"Xin Chào", false);
console.log(mang);

Kết Quả:

Phuong thức concat() với các kiểu dữ liệu khác trong array(mảng) javascript

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 concat().

Phương Thức indexOf() Trong Array (Mảng)

Phương thức indexOf() 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).indexOf(Phần tử cần tìm, Vị trí chỉ mục bắt đầu tìm kiếm);
  • 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:

 let mang = [1, 2, false, "Xin Chào"];

console.log("Vị trí chỉ mục của false: " + mang.indexOf(false));
console.log("Vị trí chỉ mục của số 2: " + mang.indexOf(2));
console.log("Vị trí chỉ mục của chuỗi Xin Chào: " + mang.indexOf("Xin Chào"));
console.log("Vị trí chỉ mục của phần tử không tồn tại: " + mang.indexOf(1000));

Kết Quả:

Phuong thức indexOf() trong array(mảng) javascript

Phương Thức lastIndexOf() Trong Array (Mảng)

Phương thức lastIndexOf() hoạt động cũng giống như phương thức indexOf() 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:

 let mang = [1, 2, 3, 4, 2 ,1, 5, 6];

console.log("Vị trí chỉ mục số 2 gần cuối mảng: " + mang.lastIndexOf(2));
console.log("Vị trí chỉ mục của số 1 gần cuối mảng: " + mang.lastIndexOf(1));

Kết Quả:

Phuong thức lastIndexOf() trong array(mảng) javascript

Mình có lưu ý là hai phương thức indexOF()lastIndexOf() 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:

 let mang = [{ten: 'An'}, {ten: 'Lan'}];

console.log(mang.indexOf({ten: 'An'}));
console.log(mang.indexOf({ten: 'Lan'}));

Kết Quả:

Phuong thức lastIndexOf() và indexOf() với object trong array(mảng) javascript

Vậy để có thể tìm kiếm được object trong mảng thì ta có thể sử dụng phương thức findIndex() để 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 Arrow Function. 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 findIndex() nhé:

Đoạn Code:

 let mang = [{ten: 'An'}, {ten: 'Lan'}];

console.log(mang.findIndex(doiTuong => doiTuong.ten == 'Lan'));

Kết Quả:

Phuong thức findIndex() trong array(mảng) javascript

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 arrow function 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ẻ!