Tại sao map() lại quan trọng trong javascript?

Bản đồ chứa các cặp khóa-giá trị trong đó các khóa có thể là bất kỳ kiểu dữ liệu nào

Bản đồ ghi nhớ thứ tự chèn ban đầu của các phím

Bản đồ có một thuộc tính đại diện cho kích thước của bản đồ

Phương pháp bản đồ

MethodDescriptionnew Map[] Tạo một Map objectset mới[] Đặt giá trị cho một key trong Mapget[] Lấy giá trị cho một key trong Mapclear[] Xóa tất cả các phần tử khỏi Mapdelete[] Xóa một phần tử Map được chỉ định bởi keyhas

Cách tạo bản đồ

Bạn có thể tạo Bản đồ JavaScript bằng cách

• Truyền một mảng tới new Map[]
• Tạo Bản đồ và sử dụng Map.set[]

Bản đồ mới[]

Bạn có thể tạo Bản đồ bằng cách chuyển một Mảng tới hàm tạo new Map[]

Thí dụ

// Tạo bản đồ
const trái cây = Bản đồ mới [[
["táo", 500],
["chuối", 300],
["cam", 200]
]];

Tự mình thử »

Bản đồ. bố trí[]

Bạn có thể thêm các phần tử vào Bản đồ bằng phương thức set[]

Thí dụ

// Tạo bản đồ
const trái cây = Bản đồ mới[];

// Đặt giá trị bản đồ
hoa quả. set["táo", 500];
hoa quả. set["chuối", 300];
hoa quả. set["cam", 200];

Tự mình thử »

Phương pháp set[] cũng có thể được sử dụng để thay đổi các giá trị Bản đồ hiện có

Bản đồ. được[]

Phương thức get[] lấy giá trị của một khóa trong Bản đồ

Bản đồ. kích thước

Thuộc tính size trả về số phần tử trong Bản đồ

Bản đồ. xóa bỏ[]

Phương thức delete[] loại bỏ một phần tử Bản đồ

Bản đồ. thông thoáng[]

Phương thức clear[] xóa tất cả các phần tử khỏi Bản đồ

Bản đồ. có[]

Phương thức has[] trả về true nếu một khóa tồn tại trong Bản đồ

Bản đồ là đối tượng

Map.set[]0 trả về đối tượng

Map.set[]1 Bản đồ trả về true

Đối tượng JavaScript so với Bản đồ

Sự khác biệt giữa Đối tượng JavaScript và Bản đồ

Bản đồ đối tượngKhông thể lặp lại trực tiếpCó thể lặp lại trực tiếpKhông có thuộc tính kích thướcCó thuộc tính kích thướcKhóa phải là Chuỗi [hoặc Ký hiệu]Khóa có thể là bất kỳ kiểu dữ liệuKhóa không được sắp xếp hợp lýKhóa được sắp xếp theo cách chènCó khóa mặc địnhKhông có khóa mặc định

Bản đồ. cho mỗi[]

Phương thức Map.set[]2 gọi một cuộc gọi lại cho từng cặp khóa/giá trị trong Bản đồ

Thí dụ

// Liệt kê tất cả các mục
hãy để văn bản = "";
hoa quả. forEach [hàm [giá trị, khóa] {
văn bản += khóa + ' = ' + giá trị;
}]

Tự mình thử »

Bản đồ. mục[]

Phương thức Map.set[]3 trả về một đối tượng iterator với [key,values] trong Map

Thí dụ

// Liệt kê tất cả các mục
hãy để văn bản = "";
cho [const x của trái cây. mục[]] {
văn bản += x;
}

Tự mình thử »

Bản đồ. phím[]

Phương thức Map.set[]4 trả về một đối tượng lặp với các khóa trong Bản đồ

Thí dụ

// Liệt kê tất cả các khóa
hãy để văn bản = "";
cho [const x của trái cây. phím[]] {
văn bản += x;
}

Tự mình thử »

Bản đồ. giá trị[]

Phương thức Map.set[]5 trả về một đối tượng lặp với các giá trị trong Bản đồ

Thí dụ

// Liệt kê tất cả các giá trị
hãy để văn bản = "";
cho [const x của trái cây. giá trị[]] {
văn bản += x;
}

Tự mình thử »

Bạn có thể sử dụng phương pháp Map.set[]5 để tính tổng các giá trị trong Bản đồ

Thí dụ

// Tính tổng tất cả các giá trị
đặt tổng = 0;
cho [const x của trái cây. giá trị[]] {
tổng cộng += x;
}

Tự mình thử »

Đối tượng như Keys

Có thể sử dụng các đối tượng làm chìa khóa là một tính năng quan trọng của Bản đồ

Thí dụ

// Tạo đối tượng
const táo = {tên. 'Táo'};
const chuối = {tên. 'Chuối'};
const cam = {tên. 'Những quả cam'};

// Tạo bản đồ
const trái cây = Bản đồ mới[];

// Thêm phần tử mới vào bản đồ
hoa quả. bộ[táo, 500];
hoa quả. bộ[chuối, 300];
hoa quả. bộ[cam, 200];

Tự mình thử »

Nhớ. Khóa là một đối tượng [quả táo], không phải là một chuỗi ["quả táo"]

Hỗ trợ trình duyệt

Bản đồ JavaScript được hỗ trợ trong tất cả các trình duyệt, ngoại trừ Internet Explorer

ChromeEdgeFirefoxSafariOpera

Đây là bài #57 của loạt bài, chuyên khám phá JavaScript và các thành phần xây dựng của nó. Trong quá trình xác định và mô tả các yếu tố cốt lõi, chúng tôi cũng chia sẻ một số quy tắc chung mà chúng tôi sử dụng khi xây dựng SessionStack, một ứng dụng JavaScript cần mạnh mẽ và có hiệu suất cao để giúp các công ty tối ưu hóa trải nghiệm kỹ thuật số của người dùng của họ

Các đối tượng trong JavaScript là các thực thể có các thuộc tính và phương thức và chúng có thể được sử dụng để biểu diễn các thuộc tính khi chúng được lưu trữ trong các cặp khóa-giá trị

Mặc dù đại diện cho các thuộc tính bằng cách sử dụng Đối tượng là một cách tiếp cận hợp lý, nhưng cũng có một số thiếu sót liên quan đến nó. Đây là lúc việc sử dụng Bản đồ phát huy tác dụng. Có rất nhiều tính năng mà Bản đồ cung cấp mà bạn có thể không tìm thấy trong các Đối tượng đơn giản

Chẳng hạn, bạn có thể lặp qua các phần tử trong Bản đồ mà vẫn duy trì thứ tự chèn. Ngoài ra, bạn có thể sử dụng các hàm, Đối tượng hoặc bất kỳ kiểu dữ liệu nguyên thủy nào khác làm khóa trong Bản đồ

Trong bài viết này, chúng ta sẽ khám phá Bản đồ và nói về các tính năng của Bản đồ cũng như so sánh chúng với Đối tượng. Ngoài ra, tôi sẽ đưa ra một số mẹo hữu ích về cách sử dụng Bản đồ và đạt được kết quả hiệu quả

ví dụ bản đồ

Bản đồ là tập hợp các phần tử sử dụng định dạng cặp khóa-giá trị, giống như trong Đối tượng. Nó có thể giữ Đối tượng dưới dạng khóa hoặc giá trị

Bản đồ đã được giới thiệu bằng JavaScript trong ES6. Để tạo một thể hiện Bản đồ, bạn phải sử dụng hàm tạo Map[] cùng với từ khóa new, như thế này

Từ ví dụ trên, chúng tôi vừa tạo một thể hiện Bản đồ và gọi nó là staff. Chúng tôi cũng đã chuyển tên và tên thứ hai làm thành phần chính sẽ giữ các thành phần Ukpai và Hannah làm giá trị tương ứng của chúng. Nếu chúng tôi kiểm tra điều này trên bảng điều khiển với console.log, chúng tôi sẽ nhận được kết quả như thế này

Trường hợp các mũi tên chỉ ra khóa nào giữ giá trị nào

Các thuộc tính của thể hiện Bản đồ

Bản đồ cũng có thuộc tính. Các thuộc tính này được sử dụng khi bạn muốn kiểm tra thông tin cụ thể như kích thước của Bản đồ

Trong phần này, tôi sẽ nói về tài sản Map.size

Bản đồ. kích thước

Để truy cập số lượng mục trong Bản đồ, hãy sử dụng thuộc tính trình truy cập .size, sẽ trả về một số nguyên, biểu thị số lượng phần tử được tìm thấy trong Bản đồ

Khi chúng tôi chạy ví dụ trên, chúng tôi sẽ nhận được 2 trên bảng điều khiển

Chẳng hạn, nếu chúng ta thêm một tập hợp khác gồm các cặp mục nhập Map[]0, chẳng hạn như Map[]1 [khóa] và Map[]2 [giá trị], thuộc tính Map[]3 sẽ trả về 3

Tiếp theo, chúng ta sẽ nói về việc thực hiện các thao tác trên các mục nhập Bản đồ bằng cách sử dụng các phương thức đối tượng Bản đồ

Các phương thức thể hiện bản đồ

Các Phương thức này có thể thực hiện một số thao tác nhất định như xóa một tập hợp các mục nhập cặp khóa-giá trị cụ thể khỏi Bản đồ

Trong Bản đồ, bạn cũng có thể thêm một tập hợp các mục nhập mới hoặc kiểm tra các khóa có trong đó

Ví dụ: nếu chúng tôi muốn kiểm tra các khóa trong Bản đồ, chúng tôi chỉ cần thực hiện điều đó bằng cách chạy mã bên dưới

Ví dụ này sử dụng phương pháp Map[]4. Nếu chúng tôi kiểm tra điều này trong bảng điều khiển, chúng tôi sẽ nhận được Map[]5 và Map[]6 như thế này

Trong đó Map[]5 và Map[]6 là khóa. Bạn có thể làm nhiều việc khác với Maps

Bản đồ. bố trí[]

Trong Bản đồ, bạn có thể thêm một nhóm mục mới [cặp khóa-giá trị] tại bất kỳ điểm nào trong chương trình của mình. Giả sử chúng ta muốn thêm một mục nhập Map[]1 vào Bản đồ. Mặc dù chúng tôi có thể làm như vậy bằng cách thêm nó vào Bản đồ theo cách thủ công, nhưng điều gì sẽ xảy ra nếu chúng tôi có một cơ sở mã lớn và chúng tôi muốn tự động thêm các mục nhập không được biết trước?

Điều này có nghĩa là chúng tôi sẽ cần liên tục cập nhật Bản đồ. Điều này có thể trở thành một nhiệm vụ khó khăn và đầy thử thách. Để giải quyết vấn đề này, chúng ta có thể sử dụng phương pháp new0

Bây giờ, nếu bạn kiểm tra điều này trên bàn điều khiển, bạn sẽ nhận được kết quả như thế này

Lưu ý rằng cặp khóa-giá trị của Map[]1 và Map[]2 đã được thêm vào đối tượng Bản đồ. Ngoài ra, hãy chú ý cách kích thước đã thay đổi từ 2 thành 3. Điều này là do chúng tôi vừa cập nhật Bản đồ. Vì vậy, phương thức new0 thêm một tập hợp các mục nhập mới vào Bản đồ

Phương thức new0 chấp nhận hai tham số. Tham số đầu tiên biểu thị một new5 và tham số thứ hai biểu thị một new6. Chỉ sử dụng một tham số trong phương thức new0 sẽ khiến nó coi tham số đó là khóa và chuyển một giá trị không xác định vào đó. Điều này được minh họa trong ví dụ dưới đây

Từ ví dụ trên, lưu ý rằng chúng tôi chỉ sử dụng một tham số 'Paul'. Vì vậy, nếu chúng ta chạy cái này trong bảng điều khiển, chúng ta sẽ thấy một cái gì đó như thế này

Ngoài ra, bạn có thể cập nhật [sửa đổi] một phần tử bên trong Bản đồ bằng phương thức new0

Chẳng hạn, nếu bạn muốn thay đổi giá trị của Map[]6 hiện tại là Hannah thành một giá trị khác như staff1, thì bạn có thể thực hiện điều đó bằng cách sử dụng phương thức new0

Thí dụ

Vì vậy, nếu bạn kiểm tra điều này trên bảng điều khiển, bạn sẽ nhận thấy rằng giá trị Hannah vừa được thay thế bằng staff1

Bản đồ. xóa bỏ[]

Đôi khi bạn có thể muốn xóa toàn bộ tập hợp các mục khỏi Bản đồ. Giả sử chúng ta có phần tử thứ ba [Map[]1 và Map[]2], nhưng bây giờ chúng ta không muốn nó nữa. Bạn có thể sử dụng phương pháp staff7 như thế này

Bây giờ, thay vì có, Map[]5, Map[]6 và Map[]1 trên bảng điều khiển, bạn chỉ nhận được Map[]5 và Map[]6. Điều này là do bạn đã xóa thành công khóa Map[]1 và giá trị của nó là Map[]2 khỏi danh sách các mục nhập

Lưu ý rằng phương thức Ukpai5 chỉ chấp nhận một tham số là khóa của mục bạn định xóa. Hãy xem ví dụ dưới đây

Điều này sẽ không hoạt động vì Map[]2 không phải là khóa mà là giá trị

Bản đồ. thông thoáng[]

Hãy xem điều gì sẽ xảy ra nếu chúng tôi muốn xóa tất cả các mục trong Bản đồ, không chỉ một mục cụ thể. Mặc dù chúng ta có thể quyết định xóa lần lượt từng mục nhập bằng cách sử dụng phương pháp Ukpai5, điều này sẽ hiệu quả nhưng phức tạp

Do đó, để loại bỏ tất cả các mục một cách hiệu quả và nhanh hơn, bạn nên sử dụng phương pháp Ukpai8. Phương pháp Ukpai8 xóa các mục khỏi Bản đồ giống như phương pháp Ukpai5. Nó xóa tất cả các mục trong đối tượng Bản đồ và không chỉ một mục được chỉ định

Chẳng hạn, giả sử chúng ta không muốn các phần tử bên trong Bản đồ của mình và vì vậy chúng ta muốn làm trống nó. Chúng ta có thể làm điều này với phương pháp Ukpai8 như thế này

Ví dụ trên sẽ làm trống Bản đồ và trả về kích thước bằng 0 cho Đối tượng Bản đồ trên bảng điều khiển. Lưu ý rằng chúng ta không cần chuyển bất kỳ tham số nào vào phương thức Ukpai8 vì chúng ta không cần đưa ra bất kỳ thông số kỹ thuật nào. Thông số kỹ thuật duy nhất chúng tôi cần là tên của Bản đồ

Bản đồ. được[]

Bản đồ cũng cho phép chúng tôi kiểm tra các giá trị cụ thể. Một trong những cách bạn có thể kiểm tra các mục trong Bản đồ là sử dụng phương pháp Hannah3. Phương thức Hannah3 trả về giá trị được liên kết với một khóa được chỉ định

Từ ví dụ trên, đầu ra dự kiến ​​là giá trị được liên kết với khóa Map[]5 mà trong trường hợp của chúng ta là Ukpai

Phương thức Hannah7 chỉ chấp nhận một tham số, dự kiến ​​là một khóa trong Bản đồ. Do đó, nếu bạn chuyển vào một tham số không phải là khóa trong Bản đồ, bạn sẽ không xác định được trong bảng điều khiển. Ngoài ra, nếu bạn truyền hai tham số trở lên trong phương thức Hannah3, thì chỉ tham số đầu tiên sẽ được sử dụng

Bản đồ. phím[]

Giống như chúng ta có thể kiểm tra các giá trị được liên kết với các khóa trong Bản đồ, cũng có thể kiểm tra các khóa của từng mục nhập trong Bản đồ. Để làm điều này, bạn cần sử dụng phương pháp Hannah9

nếu bạn kiểm tra điều này trên bảng điều khiển, bạn sẽ thấy một danh sách tất cả các phím [tôi. e. tên, tên và tuổi], được liên kết với mỗi mục trong Bản đồ. Chúng ta không cần truyền bất kỳ tham số nào vào phương thức console.log0

Bản đồ. giá trị[]

Trước đó, chúng tôi đã khám phá cách nhận các giá trị được liên kết với một khóa được chỉ định trong Bản đồ. Tuy nhiên, trong một số trường hợp, bạn có thể muốn lấy tất cả các giá trị trong Bản đồ. Trong trường hợp này, phương pháp Hannah3 sẽ không hữu ích lắm

Do đó, để có được tất cả các giá trị trong Bản đồ, chúng ta sẽ cần sử dụng phương pháp console.log2. Phương thức console.log2 trả về một Đối tượng chứa các giá trị của từng mục nhập trong Bản đồ theo thứ tự mà chúng được chèn vào trong Bản đồ

Ví dụ trên sẽ trả về Ukpai, Hannah và Map[]2 trong bảng điều khiển. Phương pháp này không yêu cầu bạn truyền bất kỳ tham số nào vào nó

Bản đồ. mục[]

Cho đến giờ, chúng ta đã khám phá cách kiểm tra khóa và giá trị của các mục nhập trong Bản đồ dưới dạng các thực thể đơn lẻ. Tuy nhiên, bạn cũng có thể nhận được kết quả của cả khóa và giá trị dưới dạng một cặp duy nhất, sử dụng phương thức console.log7

Phương thức console.log7 trả về một Đối tượng chứa danh sách cặp khóa-giá trị cho mỗi mục nhập

Nếu bạn chạy ví dụ trên đúng cách, bạn sẽ nhận được kết quả đầu ra chứa từng mục nhập cặp khóa-giá trị trong Đối tượng bản đồ. Đầu ra của bạn sẽ trông giống như thế này

Lưu ý rằng phương thức console.log7 là một phương thức khác không yêu cầu truyền tham số

Bản đồ. cho mỗi[]

Phương pháp Map.size0 được sử dụng khi lặp qua danh sách các mục trong Bản đồ. Giả sử chúng ta muốn in ra các mục trong Bản đồ. Nhưng lần này, chúng tôi không muốn mô hình sử dụng mũi tên thông thường để kết nối các khóa và giá trị, chúng tôi muốn làm như vậy bằng cách sử dụng một hàm

Bạn có thể áp dụng chức năng này cho từng cặp khóa/giá trị trong Đối tượng Bản đồ bằng cách sử dụng phương pháp Map.size0 như thế này

Vì vậy, phương thức Map.size0 thực thi gọi lại [hàm] được cung cấp một lần cho mỗi khóa trong Bản đồ

So sánh Bản đồ và Đối tượng

Bản đồ và Đối tượng khá giống nhau về cách tạo và chuyển các giá trị vào chúng. Ví dụ: cả Bản đồ và Đối tượng đều cho phép bạn làm việc với các phần tử cặp khóa-giá trị. Ngoài ra, bạn có thể thực hiện kiểm tra thuộc tính và thực hiện các thao tác như xóa, truy xuất cũng như sửa đổi khóa và giá trị. Vì lý do này, các Đối tượng đã được sử dụng làm Bản đồ trong thời gian trước đó

Nhưng bất kể những điểm tương đồng này, vẫn có một số điểm khác biệt chính giữa Bản đồ và Đối tượng và tôi sẽ liệt kê và nói về chúng trong phần này

Phím mặc định

Theo mặc định, Bản đồ không chứa bất kỳ khóa nào. Những gì bạn có thể tìm thấy bên trong Bản đồ là những gì bạn đưa vào đó. Nhưng một Đối tượng chứa một số khóa mặc định có thể xung đột với những khóa bạn chèn vào nếu bạn không đủ cẩn thận

Kiểu dữ liệu phím

Như tôi đã đề cập trước đó trong bài viết này, Bản đồ có thể chứa các khóa thuộc bất kỳ loại dữ liệu nào, đó có thể là hàm hoặc mảng Đối tượng. Nhưng trong Đối tượng, khóa phải luôn là chuỗi hoặc ký hiệu

lặp lại

Bản đồ cũng có thể lặp lại, vì vậy bạn có thể dễ dàng lặp qua các mục trong Bản đồ bằng phương thức forEach[ ], giống như chúng ta đã làm trước đây, trong khi Đối tượng không hỗ trợ giao thức lặp, do đó có thể khó lặp lại trực tiếp Đối tượng

Kích thước

Kiểm tra số lượng mục nhập trong Bản đồ khá dễ dàng so với kiểm tra của Đối tượng. Kiểm tra số lượng mục nhập trong Bản đồ có thể được thực hiện bằng cách sử dụng. thuộc tính truy cập kích thước. Nhưng nếu bạn muốn kiểm tra số lượng mục trong một Đối tượng, bạn sẽ phải thực hiện thủ công

Vì vậy, đây là một vài điểm khác biệt và tương đồng chính giữa Bản đồ và Đối tượng. Những khác biệt này làm cho chúng trở nên độc đáo và cụ thể cho các loại nhiệm vụ khác nhau

Tiếp theo, tôi sẽ chỉ cho bạn một số phương pháp hay mà bạn nên tuân thủ khi sử dụng loại dữ liệu Bản đồ

Các phương pháp hay nhất về sử dụng Bản đồ

Đặt thuộc tính

Bạn có thể thêm các thuộc tính Đối tượng vào Bản đồ bằng cách sử dụng Map.size3

Tuy nhiên, đây không phải là một cách làm tốt, vì làm như vậy sẽ khiến các hoạt động khác không thành công. Điều này là do phương pháp cài đặt dữ liệu này không tương tác với cấu trúc bản đồ, nó sử dụng tính năng đối tượng chung. Do đó, mặc dù bảng điều khiển in ra Ukpai, các phương pháp bên dưới sẽ không thành công

Cách tốt nhất để chuyển và lưu trữ dữ liệu trong Bản đồ là sử dụng phương pháp new0 mà chúng ta đã thảo luận trước đó

phân biệt chữ hoa chữ thường

Luôn nhớ rằng cả từ khóa và số nhận dạng trong Bản đồ đều phân biệt chữ hoa chữ thường. Chẳng hạn, khi tạo một thể hiện Bản đồ, bạn phải sử dụng chữ hoa Map.size6. Nếu bạn sử dụng chữ thường Map.size7, bạn sẽ nhận được lỗi tham chiếu chưa bắt được

Đơn giản hơn phức tạp

Luôn nhớ rằng một đoạn mã đơn giản nhưng hiệu quả sẽ được đánh giá cao hơn một đoạn mã phức tạp. Vì vậy, trong khi viết mã, bạn cần chọn đúng phương pháp phù hợp nhất với nhiệm vụ hiện tại

khả năng đọc mã

Hãy luôn nhớ rằng điều làm cho mã của bạn tốt không chỉ là khả năng hoàn thành nhiệm vụ mà còn là mức độ dễ đọc của nó. Vì vậy, trong khi làm việc với Bản đồ, hãy cố gắng làm cho mã có thể đọc được càng nhiều càng tốt, làm cho mã ít phức tạp và ít cồng kềnh hơn. Ví dụ, trong trường hợp bạn muốn xóa tất cả các mục trong Bản đồ, hãy luôn chọn phương pháp Map.size8 thay vì phương pháp Map.size9, điều đó sẽ giúp công việc của bạn bớt cồng kềnh hơn

Phần kết luận

Việc sử dụng Map trong JavaScript có thể rất hữu ích, vì nó giúp việc viết chương trình hiệu quả hơn. Để sử dụng Bản đồ đúng cách và đạt được kết quả hiệu quả, bạn phải hiểu đúng các khái niệm và phương pháp chính

Bạn phải rất cẩn thận về cấu trúc dữ liệu mà bạn chọn cho một số tác vụ nhất định, đặc biệt đối với những tác vụ có khả năng làm giảm hiệu suất của sản phẩm của bạn. Ngay cả khi bạn cảm thấy rằng các quyết định đúng đắn đã được đưa ra, bạn vẫn luôn cần phải xác minh rằng điều này thực sự đúng và người dùng của bạn có trải nghiệm tuyệt vời với sản phẩm của bạn

Một giải pháp như SessionStack sẽ cho phép bạn phát lại hành trình của khách hàng dưới dạng video, cho bạn thấy khách hàng thực sự trải nghiệm sản phẩm của bạn như thế nào. Bạn có thể nhanh chóng xác định xem sản phẩm của mình có hoạt động theo mong đợi của họ hay không. Trong trường hợp bạn thấy có gì đó không ổn, bạn có thể khám phá tất cả các chi tiết kỹ thuật từ trình duyệt của người dùng, chẳng hạn như mạng, thông tin gỡ lỗi và mọi thứ về môi trường của họ để bạn có thể dễ dàng hiểu và giải quyết vấn đề

Mục đích chính của hàm array map[] là gì?

Lợi ích của việc sử dụng phương thức map[] là gì?

Mục đích của array map[] trong JavaScript là gì?