Người Viết : ViKiMi Editor
JavaScript Maps giúp quản lý Dữ liệu [ Khóa / Giá Trị ] cách tốt nhất, tăng cướng khả năng thiết kế Web-site
Nếu Bạn muốn thao tác Dữ liệu dạng Cặp Khóa – Giá Trị thì JavaScript cũng sẽ đáp ứng cho Bạn điều này. Và JavaScript sẽ cung cấp Map để bạn có thể làm việc với Các Cặp Khóa – Giá trị. Đây cũng là một điều khá là thú vị. Bạn hoàn toàn có thể yên tâm rằng Bạn có thể đáp ứng mọi yêu cầu của Khách hàng khi thiết kế Web
Câu hỏi chúng ta đặt ra là ?
+ Làm sao để thao tác với dữ liệu dạng các Cặp Khóa – Giá trị khi lập trình ?
Và chúng ta đã có câu trả lời là hãy sử dụng JavaScript Maps
Lợi ích mà JavaScript Maps đem lại là gì ?
+ Giúp thao tác dữ liệu dạng các Cặp Khóa – Giá trị , ví dụ : Mã định danh cùng Tên Công Dân ; và tất cả các xử lý dữ liệu đều nằm tại phía Client khiên đảm bảo hiệu suất cao nhất có thể
+ Việc thao tác dữ liệu các Cặp Khóa – Giá trị cũng có thể thực hiện phía Server, nhưng điều này đôi khi khiến hiệu suất không đảm bảo cao
JavaScript Maps ĐƯỢC SỬ DỤNG NHƯ THẾ NÀO
Chúng ta có thể tạo một Map các cặp Khóa – Giá trị với JavaScript Maps và thao tác dữ liệu trên Map này. Tất cả các xử lý đều có thể làm được và ngay cả Callback Function cũng được cung cấp để bạn có thể có nhiều lựa chọn.
CÁC PHƯƠNG THỨC CHÚNG TA Có
+ new Map() : Phương thức này giúp Tạo một Map mới
+ set() : Phương thức này đặt giá trị cho Khóa của Map
+ get() : Phương thức này giúp lấy về giá trị của một khóa trong Map
+ delete() : Phương thức này thực hiện Xóa phần tử của Map được chỉ định bởi khóa
+ has() : Phương thức này kiểm tra sự tồn tại của Khóa trong bản đồ. Trả về true nếu khóa tồn tại
+ forEach() : Phương thức này cho phép Gọi hàm gọi lại (/ Callback Function) cho từng cặp khóa – giá trị trong Map
+ entries() : Phương thức này trả về Iterator của các cặp [key, value] trong Map
CÁC THUỘC TÍNH CHÚNG TA CÓ
+ size : Thuộc tính này trả về số phần tử tồn tại trong Map
A ] Tạo mới một Map
Chúng ta có 2 Cách tạo một Map trong JavaScript
+ Thực hiện Truyền một mảng vào Map()
+ Thực hiện Tạo một Map và sử dụng Map.set() để thêm các Cặp Khóa – Giá trị
1 ] Thực hiện truyền một mảng
Chúng ta hãy truyền một mảng vào một Map để tạo một Map với các cặp Khóa – giá trị. Đây là các khá được ưu chuộng khi dùng ngôn ngữ JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Thực hiện truyền Một Array vào một Map mới :</p>
<p id="Paragraph_01"></p>
<script>
/*
* Tạo một Map
*/
const employees = new Map([
["Ma-LeA", "Le Van A"],
["Ma-LeB", "Le Van B"],
["Ma-LeC", "Le Van C"]
]);
let txt_employees = "";
employees.forEach ( function( value, key ) {
txt_employees += key + ' = ' + value + "<br>"
})
document.getElementById("Paragraph_01").innerHTML = txt_employees;
</script>
</body>
</html>
2 ] Thực hiện tạo mới một Map và sử dụng Phương thức set() để thêm Cặp Khóa – giá trị
Chúng ta tạo một Map mới và sau đó thêm các cặp Khóa – giá trị cần thiết. Đây là cách rất phổ biến khi lập trình.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Thực hiện truyền Một Array vào một Map mới :</p>
<p id="Paragraph_01"></p>
<script>
/*
* Tạo một Map
*/
const employees = new Map();
/*
* Sử dụng phương thức Set
*/
employees.set("Ma-LeA", "Le Van A");
employees.set("Ma-LeB", "Le Van B");
employees.set("Ma-LeC", "Le Van C");
let txt_employees = "";
employees.forEach ( function( value, key ) {
txt_employees += key + ' = ' + value + "<br>"
})
document.getElementById("Paragraph_01").innerHTML = txt_employees;
</script>
</body>
</html>
B ] THAO TÁC TRÊN MAP
Chúng ta có thể sử dụng các Phương thức được cung cấp để thao tác trên các phần tử của Map :
1 + Phương Thức get()
Phương thức này cho phép lấy về giá trị của một Khóa Trong Map
Example :
employees.get("Ma-LeC"); // Returns Le Van C
2 + Phương thức Delete()
Phương thức này cho phép xóa một Phần tử Trong Map
Example :
employees.delete("Ma-LeC");
3 + Phương thức has()
Phương thức này cho phép kiểm tra sử tồn tại của một Khóa Trong Map. Nếu tồn tại trả về True, Không tồn tại trả về False
Example :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Sử dụng Phương thức has() kiểm tra tồn tại khóa </p>
<p id="Paragraph_01"></p>
<script>
/*
* Create a Map
*/
const employees = new Map([
["Ma-LeA", "Le Van A"],
["Ma-LeB", "Le Van B"],
["Ma-LeC", "Le Van C"]
]);
/*
* Delete an Element
*/
employees.delete("Ma-LeA");
document.getElementById("Paragraph_01").innerHTML = employees.has("Ma-LeA");
</script>
</body>
</html>
4 + The forEach() Method
Gọi hàm gọi lại ( Callback Function ) cho từng thành phần ( Cặp key / value ) trong Map. Dựa vào đó có thể thực hiện thao tác trên từng thành phần của Map.
Example :
const employees = new Map([
["Ma-LeA", "Le Van A"],
["Ma-LeB", "Le Van B"],
["Ma-LeC", "Le Van C"]
]);
employees.forEach ( function( value, key ) {
txt_employees += key + ' = ' + value + "<br>"
})
5 + Phương thức entries()
Phương thức này trả về một Iterator Object với [ Khóa / Giá trị ] trong Map
Example :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p> Sử dụng Phương thức entries() thao tác dữ liệu trong Map </p>
<p id="Paragraph_01"></p>
<script>
/*
* Tạo một Map
*/
const employees = new Map([
["Ma-LeA", "Le Van A"],
["Ma-LeB", "Le Van B"],
["Ma-LeC", "Le Van C"]
]);
let txt_employees = "";
for (const x of employees.entries()) {
txt_employees += x + "<br>";
}
document.getElementById("Paragraph_01").innerHTML = txt_employees;
</script>
</body>
</html>
6 + Thuộc tính Size
Thuộc tính Size trả về số phần tử của Map trong JavaScript
Như vậy, JavaScript Maps cho phép chúng ta thao tác dữ liệu dạng [ Key / Values ] rất hữu hiệu. Điều này cho phép đưa ra các thiết kế dữ liệu dạng [ Key / Values ] trên Website. Chúng ta có thể đáp ứng tốt nhất các yêu cầu thiết kế đề ra. Có thể nói JavaScript là một ngôn ngữ chạy phía Client khá hoàn hảo với các yêu cầu phổ thông nhất
