Các Phương Thức Array Javascript

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

Trong bài này chúng ta sẽ đi vào tìm hiểu cách sử dụng các phương thức đối với kiểu dữ liệu mảng ở phía bên dưới nhé!

Phương thức push() cho phép chúng ta thêm một hay nhiều phần tử con vào vị trí cuối cùng của mảng. Khi bạn sử dụng phương thức này thì độ dài của mảng cũng thay đổi nha. Bây giờ để hiểu rõ hơn chúng ta đi vào cú pháp của nó ở bên dưới nhé:

Cú Pháp:

 (Tên Mảng).push(Phần tử 1, Phần tử 2... Phần tử n);

Để hiểu rõ hơn chúng ta sẽ đi vào ví dụ thêm các phần tử cho mảng bằng phương thức push() ở dưới đây nhé:

Đoạn Code:

 let mang = [];
 mang.push(4);
 mang.push(5);
 mang.push(6);

 console.log(mang);

Kết Quả:

Nếu thêm từng phần tử cho mảng như vậy sẽ mất nhiều thời gian và công sức nên bây giờ chúng ta sẽ đi vào tìm hiểu cách thêm nhiều phần tử trong mảng bằng phương thức push() ở dưới đây nhé:

Đoạn Code:

 let mang = [];
 mang.push(4,5,6);

 console.log(mang);

Kết Quả:

Phương thức pop giúp chúng ta xóa phần tử ở vị trí cuối mảng và sẽ trả về kết quả phần tử bị xóa nếu nó được gọi. Để hiểu rõ hơn bạn xem cú pháp nó nhé:

Cú Pháp:

 (Tên Mảng).pop();

Để hiểu rõ hơn chúng ta sẽ đi vào ví dụ xóa các phần tử trong mảng bằng phương thức pop() ở dưới đây nhé:

Đoạn Code:

 let mang = [4, 5, 6];
 mang.pop();
 console.log("Mảng còn lại là: " + mang);

 mang.pop();
 console.log("Mảng còn lại là: " + mang);

Kết Quả:

Nếu chúng ta sử dụng phương thức pop() với mảng rỗng thì bạn nghĩ sẽ trả về kết quả thế nào nhỉ?

Để trả lời câu hỏi trên chúng ta thử đi vào viết đoạn code để thử xem kết quả sao nhé:

Đoạn Code:

 let mang = [];
 console.log(mang.pop());

Kết Quả:

Kết quả trả về sẽ là undefined khi chúng ta sử dụng phương thức pop() với mảng rỗng.

Bây giờ ta sẽ đi vào tìm hiểu cách lấy giá trị của một phần tử xóa bằng phương thức pop() thông qua ví dụ dưới đây nhé:

Đoạn Code:

 let mang = [4, 5, 6];
 let phanTuBiXoa = mang.pop();

 console.log(mang);
 console.log(mang.length);
 console.log("Giá trị phần tử bị xóa: " + phanTuBiXoa)

Kết Quả:

Phương thức unshift giúp chúng ta thêm một hay nhiều hay phần tử vào vị trí đầu của mảng. Để hiểu rõ hơn bạn xem cú pháp sau nhé:

Cú Pháp:

 (Tên Mảng).unshift(Phần tử 1, Phần tử 2... Phần tử n)

Bây giờ để nắm rõ hơn chúng ta sẽ đi vào cách thêm một hay nhiều phần tử trong mảng bằng phương thức unshift() ở ví dụ dưới đây nhé:

Đoạn Code:

 let mang = [];
 /*Thêm 1 Phần tử*/
 mang.unshift(4);
 console.log(mang)

 /*Thêm nhiều phần tử cho mảng*/
 mang.unshift(5,6);
 console.log(mang);

Kết Quả:

Chúng ta cũng có thể kết hợp hai phương thức unshift() và push() để thêm các phần tử trong mảng. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Đoạn Code:

 let mang = [8];
 mang.unshift(6, 7);
 mang.push(9, 10);

 console.log(mang);

Kết Quả:

Phương thức shift() sẽ giúp chúng ta xóa phần tử ở vị trí đầu tiên trong mảng. Để hiểu rõ hơn bạn xem cú pháp sau nhé:

Cú Pháp:

 (Tên Mảng).shift();

Bây giờ chúng ta sẽ cùng nhau đi vào ví dụ thực tế để hiểu rõ hơn về nó nhé:

Đoạn Code:

 let mang = [4, 5];
 mang.shift();
 console.log(mang)

 mang.shift();
 console.log(mang)

Kết Quả:

Bây giờ chúng ta thử xóa phần tử với mảng rỗng bằng phương thức shift() xem nó có trả về giá trị undefined như phương thức pop() không nhé:

Đoạn Code:

 let mang = [];
 mang.shift();
 console.log(mang);

Kết Quả:

Như bạn thấy thì kết quả trả về vẫn là mảng rỗng khi ta sử dụng xóa phần tử với phương thức shift().

Thông thường chúng ta thường cần lấy hay lọc dữ liệu trong mảng thì việc sử dụng vòng lặp là cách tối ưu giúp chúng ta giải quyết vấn đề trên. Sau đây mình sẽ giới thiệu đến các bạn vòng lặp thông dụng hay được sử dụng đối với mảng ở dưới đây nhé.

Để dễ hình dung chúng ta cùng nhau đi vào ví dụ thực tế để lấy giá trị các phần tử trong mảng thông qua vòng lặp for ở dưới đây nhé:

Đoạn Code:

 let mang = [4, 5, 6];
 for(let i=0; i < mang.length; i++){ 
   console.log("Giá trị là " + mang[i]);
 }

Kết Quả:

Bây giờ chúng ta sẽ đi vào ví dụ lấy dữ liệu trong mảng thông qua vòng lặp for-of ở dưới dây nhé:

Đoạn Code:

 let mang = [4, 5, 6];
 for(let phanTu of mang){ 
   console.log("Giá trị là " + phanTu);
 }

Kết Quả:

Ở bài trước chúng ta có thử dùng typeof với mảng thì được kết quả mảng là một object. Do đó bạn có thể sử dụng vong lặp for-in để lấy dữ liệu trong mảng thông qua ví dụ dưới đây nhé:

Đoạn Code:

 let mang = [4, 5, 6];
 for(let phanTu in mang){ 
   console.log("Giá trị là " + mang[phanTu]);
 }

Kết Quả:

Cách gọi mang[phanTu] giúp chúng ta lấy giá trị thuộc tính trong kiểu dữ liệu object. Bạn có thể tham khảo thêm ở đây nhé: Object trong Javascript.

Như bạn đã biết thì kiểu dữ liệu của mảng là object do đó về cơ bản mảng được xem là một dạng đặc biệt của object.

Ví dụ khi bạn dùng mang[0] thì đó là cách gọi lấy giá trị của object với:

• mang là một object.
• 0 là thuộc tính trong object.

Bạn có thể sử dụng các tính chất của object để áp dụng với mảng. Để dễ hình dung chúng ta hãy cùng nhau đi vào tìm hiểu ví dụ ở dưới đây nhé:

Đoạn Code:

 let mang = [];
 mang[0] = "Màu Xanh";
 mang.mausac = "Màu Đỏ";

 console.log(mang);
 console.log(mang["mausac"]);

Kết Quả:

Mình có thêm một lưu ý khác là khi gán hai biến mảng bằng nhau thì nó sẽ cùng tham chiếu đến một địa chỉ lưu giá trị của biến như tính chất của object. Nếu bạn muốn tham khảo lại phần object thì xem ở đây nhé: Object trong javascript.
Bây giờ để hiểu rõ hơn chúng ta đi vào ví dụ sau đây nhé:

Đoạn Code:

 let mang = [4, 5, 6];
 let mangCopy = mang;/*Gán hai biến mảng bằng nhau*/
 console.log(mangCopy);

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

Kết Quả:

Như bạn thấy thì khi chúng ta thay đổi số lượng phần tử trong biến mang thì biến mangCopy cũng sẽ thay đổi theo.

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