Cách sử dụng map() trong JavaScript

Posted on Updated on by adminChuyên mục:Kiến thức Internet

Trong hướng dẫn này, bạn sẽ học cách sử dụng phương thức map() trong JavaScript để chuyển đổi các phần tử trong một mảng qua các ví dụ minh họa.

Phương thức map() trong JavaScript

Giới thiệu về phương thức map() trong JS

Đôi khi, bạn cần lấy một mảng, biến đổi các phần tử của nó và đưa các kết quả vào một mảng mới.

Thông thường, bạn sử dụng vòng lặp for để lặp qua các phần tử, chuyển đổi từng phần tử riêng lẻ và đẩy kết quả vào một mảng mới.

Hãy xem một ví dụ bên dưới.

Giả sử rằng bạn có một mảng số nguyên trong đó mỗi thành phần đại diện thay mặt cho nửa đường kính của một hình tròn trụ như sau :


let mangBanKinh = [10, 30, 50];
 

Phần sau minh họa cách tính diện tích quy hoạnh của mỗi hình tròn trụ và đẩy tác dụng vào một mảng mới .


let arrDienTich = []; / / Để chứa diện tích quy hoạnh

let dienTich = 0;

/ / Tính diện tích quy hoạnh của những hình tròn trụ

for (let i = 0; i < arrBanKinh.length; i++) {

    / / diện tích quy hoạnh = PI * R * R

    dienTich = Math.floor(Math.PI * arrBanKinh[i] * arrBanKinh[i]);

    / / Thêm diện tích quy hoạnh vào mảng mới ( cuối mảng )

    arrDienTich.push(dienTich);

}

/ / In ra mảng diện tích quy hoạnh

console.log(arrDienTich);
 

Kết quả :


[314, 2827, 7853]
 

Nói chung, chúng ta cần khá nhiều code để thực hiện tính diện tích các hình tròn ở trên.

Bắt đầu từ ES5, kiểu Array trong JavaScript cung cấp phương thức map() cho phép bạn chuyển đổi các phần tử của mảng theo cách rõ ràng hơn.


let arrBanKinh = [10, 30, 50];

/ / Tạo hàm tính diện tích quy hoạnh

function tinhDienTich(banKinh) {

    return Math.floor(Math.PI * banKinh * banKinh);

}

/ / Sử dụng map ( ) tạo một mảng mới, và vận dụng

/ / hàm tính diện tích quy hoạnh cho từng thành phần

/ / trong mảng arrBanKinh

let arrDienTich = arrBanKinh.map(tinhDienTich);

/ / In tác dụng

console.log(arrDienTich);
 

Chúng ta cũng có được tác dụng như trên .

Nó hoạt động giải trí như thế nào ?

  • Đầu tiên, tất cả chúng ta định nghĩa một hàm tính diện tích quy hoạnh của một hình tròn trụ .

  • Sau đó, truyền hàm tinhDienTich vào phương thức map(). Phương thức map() sẽ gọi hàm tinhDienTich trên mỗi phần tử của mảng arrBanKinh và trả về một mảng mới với các phần tử đã được biến đổi.

Để ngắn gọn hơn, bạn hoàn toàn có thể chuyển vào phương pháp map ( ) một hàm ẩn danh như sau .


let arrBanKinh = [10, 30, 50];

/ / Sử dụng hàm ẩn danh

let arrDienTich = arrBanKinh.map(function(banKinh) {

    return Math.floor(Math.PI * banKinh * banKinh);

} ) ;

console.log(arrDienTich);
 

arrow function trong ES6 để đạt được kết quả tương tự với code rõ ràng hơn:Ngoài ra, bạn hoàn toàn có thể sửtrongđể đạt được hiệu quả tương tự như với code rõ ràng hơn :


/ / Sử dụng arrow function

let arrDienTich = arrBanKinh.map(

    banKinh => Math.floor(Math.PI * banKinh * banKinh)

) ;

console.log(arrDienTich);
 

Ngoài ra, tất cả chúng ta hoàn toàn có thể viết chương trình trên một cách ” clean code ” như thế này :


/ / Tạo hàm tính diện tích quy hoạnh

let tinhDienTich = r => Math.floor(Math.PI * r * r);

/ / Mảng chứa những nửa đường kính

const banKinh = [10, 30, 50];

/ / Tính diện tích quy hoạnh theo từng bán kinh

const arrDienTich = banKinh.map(tinhDienTich);

/ / In ra hiệu quả

console.log(arrDienTich);
 

Chi tiết phương thức map() trong JavaScript

Cú pháp phương pháp map ( ) .


arrayObject.map(callback[, contextObject]);
 

  • Phương thức map ( ) gọi một hàm call back trên mọi thành phần của mảng và trả về một mảng mới chứa hiệu quả .
  • Phương thức map ( ) nhận hai đối số được đặt tên, đối số tiên phong là bắt buộc, trong khi đối số thứ hai là tùy chọn .

Tương tự như những phương pháp lặp khác như every ( ), some ( ), filter ( ), forEach ( ) và sort ( ), hàm callback ( ) có dạng sau :


function callback(currentElement, index, 

array

) {

    / / …

}
 

Hàm callback ( ) nhận ba đối số :

  • currentElement: (Bắt buộc) Là phần tử hiện tại của mảng đang được xử lý.

  • index: (Tùy chọn) Là chỉ mục của currentElement

  • array: (Tùy chọn) Là đối tượng mảng được duyệt qua.

Nếu bạn chuyển contextObject vào phương thức map (), bạn có thể tham chiếu contextObject bên trong hàm callback() bằng cách sử dụng từ khóa this.

Điều quan trọng cần lưu ý là phương thức map() không thay đổi mảng ban đầu, nó tạo ra một mảng mới gồm tất cả các phần tử đã được biến đổi bởi hàm callback().

Một số ví dụ về cách sử dụng map() trong JavaScript

Đây là một ví dụ tạo một mảng bình phương từ một mảng mới:


/ / Tạo một hàm lát nữa sử dụng

const binhPhuong = x => x * x;

/ / Chúng ta có 1 mảng

const mangBanDau = [2, 3, 4, 5, 6];

/ / Gọi hàm trên từng thành phần

const mangBinhPhuong = mangBanDau.map(binhPhuong);

/ / In ra hiệu quả

console.log(mangBinhPhuong);
 

Kết quả :


[4, 9, 16, 25, 36]
 

Ví dụ sau đây cho thấy cách biến hóa một mảng số bằng cách sử dụng một phương pháp có sẵn của Math để làm hàm callback ( ) .

let mangSo = [16, 25, 36];

/ / Tính căn bậc 2 của từng thành phần trong mảng

let ketQua = mangSo.map(Math.sqrt);

/ / In ra hiệu quả

console.log(ketQua);
 

Kết quả :


[4, 5, 6]
 

Ví dụ: Ghép họ và tên bằng cách sử dụng map()


const sinhVien = [

    { ho: ” Đặng “, ten: ” Ngọc Anh ” },

    { ho: ” Vi “, ten: ” Tiểu Bảo ” },

    { ho: ” Hàn “, ten: ” Lập ” }

] ;

function layTenDayDu(sv) {

    / / Ghép họ và tên bằng hàm join ( )

    let hoVaTen = [sv.ho, sv.ten].join(” “);

    return hoVaTen;

}

let tenDayDu = sinhVien.map(layTenDayDu);

console.log(tenDayDu);
 

Kết quả :


[“Đặng Ngọc Anh”, “Vi Tiểu Bảo”, “Hàn Lập”]
 

Ví dụ: Định dạng lại các Array Object

Chúng ta có một đối tượng sinhVien như thế này:


const SinhVien = [

    { msv: ” SV1 “, ten: ” Ngọc Anh ” },

    { msv: ” SV2 “, ten: ” Tiểu Bảo ” },

    { msv: ” SV3 “, ten: ” Hàn Lập ” }

];
 

Bây giờ tất cả chúng ta muốn tạo một đối tượng người tiêu dùng mới trong đó có tên sinh viên và độ dài tên của từng sinh viên, ta làm như sau :


const doDaiTenSinhVien = SinhVien.map(sv => {

    const obj = {};

    obj[sv.msv] = sv.ten;

    obj.doDaiTen = sv.ten.length;

    return obj; 

} ) ;

/ / In ra tác dụng

console.log(doDaiTenSinhVien);
 

Tổng kết về map() trong JS

map() trong JavaScript để biến đổi các phần tử của mảng theo một hàm tùy biến.

Bạn sẽ sử dụng nhiều đến map() khi đi làm thực tế hoặc sử dụng Front end Framework (như React.js). Vì thế, luyện tập thêm để hiểu hơn bạn nhé.

Chúc bạn học tốt.Trong bài hướng dẫn này, bạn đã học được cách sử dụng phương thứcđể biến hóa những thành phần của mảng theo một hàm tùy biến. Bạn sẽ sử dụng nhiều đến map ( ) khi đi làm trong thực tiễn hoặc sử dụng Front end Framework ( như ). Vì thế, rèn luyện thêm để hiểu hơn bạn nhé. Chúc bạn học tốt .

—

HỌC VIỆN ĐÀO TẠO CNTT NIIT – ICT HÀ NỘI

Học Lập trình chất lượng cao ( Since 2002 ). Học trong thực tiễn + Tuyển dụng ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, TP. Hà Nội

SĐT : 02435574074 – 0968051561

E-Mail : [email protected]

Fanpage: https://facebook.com/NIIT.ICT/

# niit # niithanoi # niiticthanoi # hoclaptrinh # khoahoclaptrinh # hoclaptrinhjava # hoclaptrinhphp # java # php # python

admin