Các Phương Thức Array Javascript(Phần 3)

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

Tóm Tắt

Phương thức map() Array Javascript

Trước khi đi vào chi tiết phương thức thì bạn nên hiểu cơ bản về arrow function đã nha. Nếu bạn muốn tham khảo hay xem lại về định nghĩa hoặc cách sử dụng thì có thể tham khảo ở đây nhé: Arrow Function.

Phương thức map() sẽ gọi một hàm và thực thi hàm đó đối với tất cả phần tử trong mảng và kết quả trả về là một mảng mới chứa các phần tử đã được xử lý.
Mình có lưu ý là kết quả mảng mới trả về sẽ không ảnh hưởng đến mảng chính khi nó thay đổi và phương thức này sẽ không thực hiện hàm đối với các phần tử không có giá trị(undefined).

Bạn đang đọc: Các Phương Thức Array Javascript(Phần 3)

Cú Pháp Của Phương Thức map()

Bây giờ chúng ta đi vào tìm hiểu cú pháp của phương thức map() ở phía dưới đây nhé:

 let ketQua = (Mảng).map(function (Phần Tử, Vị Trí Chỉ Mục, Mảng){
   /*Mã Thực Thi*/
 }) => Biểu thức

Phần tử: là giá trị phần tử hiện tại của mảng được xử lý.
Vị trí chỉ mục: Vị trí chỉ mục của phần tử đó.
Mảng: Là mảng chứa các phần tử mà chúng ta cần xử lý.

Khi sử dụng phương thức map() thì tham số phần tử là yêu cầu bắt buộc phải có nha. Còn hai tham số vị trí chỉ mục và mảng thì bạn có thể gọi hay không đều được tùy vào dữ liệu mà bạn cần đưa vào trong hàm để xử lý.

Ví Dụ Phương Thức map()

Để bạn thấy được tiện ích của phương thứ map() thì mình sẽ đi vào ví dụ là nhân tất cả các phần tử với 2.
Với cách thông thường thì chúng ta sẽ sử dụng vòng lặp for để lấy các phần tử trong mảng rồi sau đó nhân với hai. Bây giờ để bạn dễ hình dùng thì chúng ta thử viết đoạn code trên xem sao nhé:

Đoạn Code:

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

 let ketQua = [];
 for(let i=0; i   ketQua.push(mang[i] * 2);
 }
 console.log(ketQua);

Kết Quả:

Chúng ta tạo một biến ketQua với kiểu dữ liệu mảng để thêm các phần tử trong biến mang sau khi đã được xử lý bằng phương thức push(). Bạn có thể tham khảo thêm phương thức này ở đây nhé: push().
Bây giờ chúng ta sử dụng phương thức map() để xử lý ví dụ trên nhé:

Đoạn Code:

 let mang = [1, 2, 3, 4, 5];
 let ketQua = mang.map(phanTu => phanTu * 2);

 console.log(ketQua);

Kết Quả:

Phương thức filter() Array Javascript

Phương thức filter() sẽ trả về một mảng mới với các phần tử trong mảng chính thỏa mãn điều kiện nào đó mà chúng ta đưa vào.

Mình có lưu ý là kết quả mảng mới trả về sẽ không ảnh hưởng đến mảng chính khi nó thay đổi và phương thức này sẽ không thực hiện hàm đối với các phần tử không có giá trị(undefined).

Do cú pháp của nó giống với phương thức map nên mình sẽ không nói lại mà sẽ đi vào các ví dụ thực tế để giúp bạn nắm rõ hơn về phương thức này.

Ví Dụ Phương Thức filter():

Cũng như ví dụ trên thì mình sẽ đi vào hai cách để bạn hiểu và nắm rõ hơn về phương thức filter. Bây giờ vấn đề chúng ta cần xử lý là lọc ra những phần tử nhỏ hơn hoặc bằng 50 ở trong mảng.

Cách Thông Thường :

Đoạn Code:

 let mang = [10, 60, 40, 80, 90, 30, 50, 100, 200];
 let ketQua = [];

 for(let i=0; i   if(mang[i]<= 50){
     ketQua.push(mang[i]);
   }
 }
 console.log(ketQua);

Kết Quả:

Sử dụng phương thức filter():

Đoạn Code:

 let mang = [10, 60, 40, 80, 90, 30, 50, 100, 200];
 let ketQua = mang.filter(phanTu => phanTu <= 50);

 console.log(ketQua);

Kết Quả:

Tiếp theo mình sẽ làm thêm ví dụ với phương thức filter để lọc danh sách các bạn có tuổi nhỏ hơn 18. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let mang = [
 {ten: "An", tuoi: 23},
 {ten: "Lan", tuoi: 14},
 {ten: "Hưng", tuoi: 16},
 {ten: "Hoa", tuoi: 25}
];
 let ketQua = mang.filter(phanTu=> phanTu.tuoi <= 18);

 console.log(ketQua);

Kết Quả:

Phương thức reduce() Array Javascript

Phuong thức reduce() sẽ trả về một giá trị duy nhất khi hàm xử lý với các phần tử ở trong mảng.:

Cú pháp phương thức reduce():

Để hiểu rõ hơn tất cả chúng ta cùng xem cú pháp của nó nhé :

 let ketQua = (Mảng).reduce(function(Giá Trị Tích Lũy, Phần Tử, Chỉ mục, Mảng){
   /*Mã thực thi*/
 }, Giá Trị Thiết Lập)

Giá Trị Tích Lũy: Là kết quả của hàm phía trước sau khi đã xử lý xong mỗi phần tử trong mảng và sẽ bằng với giá trị thiết lập lần đầu tiên khi chạy hàm.(Nếu như giá trị thiết lập được cung cấp trong phương thức)
Phần tử: là giá trị phần tử hiện tại của mảng được xử lý.
Vị trí chỉ mục: Vị trí chỉ mục của phần tử đó.
Mảng: Là mảng chứa các phần tử mà chúng ta cần xử lý.

Nghe hơi phức tạp nhỉ, để hình dùng và nắm rõ hơn tất cả chúng ta cùng nhau đi vào ví dụ tế nhé .

Ví dụ với phương thức reduce():

Bây giờ chúng ta sẽ đi vào ví dụ là tính tổng tất cả các giá trị phần tử có trong một mảng. Mình cũng sẽ thực hiện theo hai cách, với cách thứ 1 là dùng lặp for:

Đoạn Code:

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

 for(let i=0; i   ketQua += mang[i];
 }
 console.log(ketQua);

Kết Quả:

Như bạn thấy chúng ta sẽ dùng biến ketQua() để lưu trữ giá trị tổng. Cứ qua mỗi vòng lặp thì giá trị của biến sẽ cộng với phần tử hiện tại trong mảng bằng toán tử +=. Nó có nghĩa là ketQua = ketQua + mang[i];. Và cưới cùng chúng ta có kết quả như trên. Bây giờ bạn và mình hãy thử dùng phương thức reduce() để giải quyết vấn đề trên xem sao nhé:

Đoạn Code:

 let mang = [1, 2, 3, 4, 5, 6];
 let ketQua = mang.reduce((tong, phanTu) => tong + phanTu, 0);

 console.log(ketQua);

Kết Quả:

Xem thêm: Cách xóa phần mềm trên máy tính đơn giản để tăng tốc cho laptop

Ở đây mình xin giải thích cách hoạt động của phương thức reduce() này nhé:

Với vòng chạy đầu tiên thì ta có giá trị của tong = giá trị thiết lập = 0. Còn phanTu sẽ là phần tử thứ nhất ở trong mảng với giá trị là 1. Sau khi thực hiện hàm tong + phanTu thì giá trị của hàm là 1.
Với vòng chạy thì hai, phương thức sẽ gán kết quả của hàm lần chạy thứ 1 vào trong biến tong và thực hiện hàm với phần tử thứ hai trong mảng với giá trị là 2. Kết quả hàm chạy lần thứ hai sẽ bằng tong + phanTu = 1 + 2 = 3;
Cứ như vậy nó sẽ chạy đến khi hết phần tử trong mảng thì trả về kết quả.

Dưới đây là bảng hiển thị quy trình chạy của phương thức reduce với ví dụ trên mong nó sẽ giúp bạn nắm rõ và hiểu hơn về phương thức này:

Lần chạy	`tong`	`giá trị của phanTu`	Kết quả hàm
Thứ 1	0	1	1
Thứ 2	1	2	3
Thứ 3	3	3	6
Thứ 4	6	4	10
Thứ 5	10	5	15
Thứ 6	15	6	21

Chúng ta cũng có thể không cần giá trị thiết lập khi sử dụng phương thức reduce() vì nó sẽ tự động thiết lập giá trị đầu tiên trong mảng vào giá trị của biến tong để thực hiện cho các vòng chạy tiếp theo. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Đoạn Code:

 let mang = [1, 2, 3, 4, 5, 6];
 let ketQua = mang.reduce((tong, phanTu) => tong + phanTu);

 console.log(ketQua);

Kết Quả:

Sử dụng phương thức reduce() với object trong mảng

Chúng ta có thể sử dụng phương thức reduce() để xử lý các giá trị thuộc tính của object ở trong mảng. Bây giờ chúng ta cùng nhau đi vào ví dụ để hiểu rõ hơn nhé:

Đoạn Code:

 let mang = [{
 sanpham: "Sản Phẩm 1",
 soLuong: 2,
 giaThanh: 50
 },
 {
 sanpham: "Sản Phẩm 2",
 soLuong: 3,
 giaThanh: 20
 }];
 let ketQua = mang.reduce(function(tong, phanTu) {
   return tong + phanTu.giaThanh * phanTu.soLuong;
 }, 0);
 console.log(ketQua);

Kết Quả:

Ví dụ trên chúng ta tính tổng giá của các sản phẩm ở trong mảng. Qua ví dụ này mình mong bạn có thể hiểu hơn khi kết hợp với phương thức reduce() và object ở trong mảng.

Phương thức sort() Array Javascript

Phương thức sort() giúp chúng ta sắp xếp các phần tử trong mảng theo thứ tự tăng dần hoặc giảm dần. Phương thức này sẽ chuyển đổi các phần tử trong mảng sang kiểu dữ liệu chuỗi rồi mới thực hiện so sánh. Do đó nó sẽ làm việc tốt hơn khi so sánh các phần tử là dạng chuỗi, còn với phần tử số sẽ không được kết quả như ta mong muốn.

Bây giờ để bạn dễ hình dung thì mình thử sử dụng phương thức sort() để sắp xếp phần tử dạng số trong mảng để xem sao nhé:

Đoạn Code:

 let mang = [1, 2, 3, 4, 20, 25, 15];
 mang.sort();
 console.log(mang);

Kết Quả:

Như bạn thấy thì tác dụng của nó không như ta mong ước vì chuỗi ” 15 ” sẽ có thứ tự nhỏ hơn so với chuỗi ” 2 ” nên nó sẽ được xếp trước. Và các so sánh còn lại ở ví dụ trên cũng y hệt như vậy .

Để giải quyết vấn đề trên thì chúng ta cần kết hợp một hàm so sánh với phương thức sort().

Cú pháp phương thức sort() với hàm so sánh:

Sau đây chúng ta sẽ đi vào cú pháp kết hợp phương thức sort() với hàm so sánh:

 (Mảng).sort(Hàm So Sánh);

Với hàm so sánh thì nó sẽ chấp nhận hai tham số và trả về giá trị xác định thứ tự săp xếp với cú pháp như sau:

 function soSanh(a, b){ 
   /**/
 }

Mình có chú ý quan tâm là :

Nếu kết quả trả về của hàm bằng 1 thì phương thức sort sẽ sắp xếp a đứng sau b.
Nếu kết quả trả về của hàm bằng -1 thì phương thức sort sẽ sắp xếp a đứng trước b.
Nếu kết quả trả về của hàm bằng 0 thì phương thức sort vị trí sắp xếp không thay đổi.

Nghe hơi phức tạp nhỉ, Bây giờ chúng ta sẽ đi vào ví dụ cụ thể để sắp xếp các phần tử có kiểu dữ liệu số thông qua ví dụ dưới đây:

Đoạn Code:

 function soSanh(a, b) {
    if (a > b) return 1;
    if (a == b) return 0;
    if (a   }
 
  let mang = [1, 2, 3, 4, 20, 25, 15];
  mang.sort(soSanh);
  console.log(mang);

Kết Quả:

Sử dụng arrow function với phương thức sort()

Cũng như so sánh kiểu dữ liệu số ở ví dụ trên thì ta có thể sử dụng kết hợp giữa arrow function với phương thức sort() để giải quyết vấn đề trên bằng đoạn code dưới đây:

Đoạn Code:

 let mang = [1, 2, 3, 4, 20, 25, 15];
 mang.sort((a, b) => a - b); 
 console.log(mang);

Kết Quả:

Nếu như bạn muốn sắp xếp theo hướng giảm dần thì trong arrow function ta sẽ đối thành b - a. Để dễ hình dung hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let mang = [1, 2, 3, 4, 20, 25, 15];
 mang.sort((a, b) => b - a); 
 console.log(mang);

Kết Quả:

Sử dụng phương thức sort() với chuỗi

Mặc định phương thức sort() giúp chúng ta sắp xếp các phần tử chuỗi trong mảng theo thứ abc. Để dễ hình dung bạn xem đoạn code sau nhé:

Đoạn Code:

 let mang = ["mèo", "chó", "khỉ", "kiến", "ong", "hổ"];
 mang.sort();

 console.log(mang);

Kết Quả:

Chúng ta cũng có thể sắp xếp các phần tử với kiểu dữ liệu chuỗi theo hướng giảm dần bằng cách kết hợp với hàm so sánh. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

Xem thêm: Cách đổi pass modem Wifi trên máy tính, laptop dễ dàng, nhanh chóng

 function soSanh(a, b) {
    if (a > b) return -1;
    if (a == b) return 0;
    if (a   }
 
  let mang = ["mèo", "chó", "khỉ", "kiến", "ong", "hổ"];
  mang.sort(soSanh);
  console.log(mang);

Kết Quả:

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

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com