Người Viết : ViKiMi Editor
Tập hợp Giá trị Duy Nhất và Mã định danh có thể sử dụng dễ dàng với JavaScript Sets khi thiết kế Trang Web
Thực hiện xử lý với tập hợp các giá trị duy nhất trong JavaScript đôi khi sẽ rất cần thiết. Giả sử bạn muốn thao tác tập hợp các giá trị định danh duy nhất thì lúc này JavaScript cung cấp JavaScript Sets thật hữu hiệu. Điều này giúp bạn thao tác và hoàn toàn yên tâm về độ chính xác. Các dữ liệu duy nhất có thể là mã định danh
Câu hỏi chúng ta đặt ra là ?
+ Làm sao để thao tác với các dữ liệu duy nhất khi lập trình ?
Và chúng ta đã có câu trả lời là hãy sử dụng JavaScript Sets
Lợi ích mà JavaScript Sets đem lại là gì ?
+ Giúp thao tác trên tập các dữ liệu duy nhất và tất cả các xử lý đề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 các dữ liệu duy nhất 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
+ Thêm nữa khi thao tác với JavaScript Sets thì tất cả thật đơn giản và dễ dàng
JavaScript Sets ĐƯỢC SỬ DỤNG NHƯ THẾ NÀO
Chúng ta có thể tạo một tập hợp các giá trị duy nhất với JavaScript Sets và thao tác trên các phần tử của tập hợp 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 Set() : Phương thức tạo mới một tập hợp ( / Set )
+ add() : Phương thức thêm mới phần tử vào Set
+ delete() : Phương thức thực hiện xóa một phần tử khỏi Set
+ has() : Phương thức giúp kiểm tra giá trị có tồn tại trong tập hợp. Nếu giá trị tồn tại trong Tập hợp thì trả về TRUE
+ forEach() : Gọi hàm gọi lại ( Callback Function ) cho từng thành phần trong Tập hợp. Dựa vào đó có thể thực hiện thao tác trên từng thành phần của tập hợp.
+ values() : Trả về một Iterator cho tất cả các giá trị trong tập hợp ( / / Set ). Dựa vào đó có thể thực hiện thao tác trên từng phần tử của tập hợp.
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 tập hợp ( / Set )
A ] Tạo mới một Tập hợp ( / SET )
Chúng ta có 3 Cách tạo một Tập Hợp trong JavaScript
+ Thực hiện truyền một mảng (/ Array) tới Tập hơp (/ Set)
+ Thực hiện tạo mới một Tập hợp và sử dụng Phương thức add() để thêm giá trị vào tập hợp
+ Thực hiện tạo mới một Tập hợp và sử dụng Phương thức add() để thêm biến vào tập hợp
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 Tập hợp để có một tập hợp với các giá trị duy nhất. Đây là các khá được ưu chuộng khi dùng ngôn ngữ JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Tạo mới Tập hợp bằng cách truyền Mảng có các giá trị duy nhất </p>
<p id="Paragraph_01"></p>
<script>
const employees = new Set( ["Le A", "Le B", "Le C"] );
let txt_employees = "";
employees.forEach (function(value) {
txt_employees += value + "<br>";
})
document.getElementById("Paragraph_01").innerHTML = txt_employees;
</script>
</body>
</html>
2 ] Thực hiện tạo mới một Tập hợp và sử dụng Phương thức add() để thêm giá trị vào tập hợp
Chúng ta tạo một Tập hợp mới và sau đó thêm các giá trị duy nhât. Đây là cá vào tập hợp được tạo ra.
Đây cũng là một lựa chọn
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Tạo mới Tập hợp và thêm các giá trị duy nhất vào tập hợp </p>
<p id="Paragraph_01"></p>
<script>
const employees = new Set();
employees.add("Le A");
employees.add("Le B");
employees.add("Le C");
/*
* Hiển Thị Kích Thước Tập Hợp
*/
document.getElementById("Paragraph_01").innerHTML = employees.size;
</script>
</body>
</html>
3 ] Thực hiện tạo mới một Tập hợp và sử dụng Phương thức add() để thêm biến vào tập hợp
Chúng ta tạo một Tập hợp mới và sau đó them các biến có giá trị duy nhất vào tập hợp. Đảm bảo rằng các gí trị là duy nhất và không có trùng lặp.
Đây cũng là một lựa chọn
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p> Tạo mới Tập hợp và thêm biến vào tập hợp </p>
<p id="Paragraph_01"></p>
<script>
const employees = new Set();
const le_a = "Le Van A";
const le_b = "Le Van B";
const le_c = "Le Van C";
employees.add( le_a );
employees.add( le_b );
employees.add( le_c );
/*
* Hiển Thị Kích Thước Tập Hợp
*/
document.getElementById("Paragraph_01").innerHTML = employees.size;
</script>
</body>
</html>
B ] THAO TÁC TRÊN TẬP HỢP
Chúng ta có thể sử dụng 2 Phương thức được cung cấp để thao tác trên các phần tử của tập hợp :
+ forEach() : Gọi hàm gọi lại ( Callback Function ) cho từng thành phần trong Tập hợp. Dựa vào đó có thể thực hiện thao tác trên từng thành phần của tập hợp.
+ values() : Trả về một Iterator cho tất cả các giá trị trong tập hợp ( / / Set ). Dựa vào đó có thể thực hiện thao tác trên từng phần tử của tập hợp.
1 ] Sử dụng Phương Thức forEach()
Chúng ta tham khảo ví dụ sau :
EXAMPLE :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Thao tác trên các Phần tử của Tập hợp sử dụng phương thức forEach được cung cấp</p>
<p id="Paragraph_01"></p>
<script>
const employees = new Set( ["Le A", "Le B", "Le C"] );
let txt_employees = "";
employees.forEach (function(value) {
txt_employees += value + "<br>";
})
document.getElementById("Paragraph_01").innerHTML = txt_employees;
</script>
</body>
</html>
2 ] Sử dụng Phương Thức values()
Chúng ta tham khảo ví dụ sau :
EXAMPLE :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Sử dụng Phương Thức Values và sử dụng Iterator để truy cập vào các phần tử Tập hợp</p>
<p id="Paragraph_01"></p>
<script>
// Create a Set
const employees = new Set( ["Ma-LeA01", "Ma-LeB02", "Ma-LeC03"] );
// List all Elements
let txt_employees = "";
for (const value of employees.values()) {
txt_employees += value + "<br>";
}
document.getElementById("Paragraph_01").innerHTML = txt_employees;
</script>
</body>
</html>
Tổng kết, Chúng ta có rất nhiều dữ liệu cần xử lý là duy nhất. Để thao tác với các dữ liệu duy nhất chúng ta có nhiều lựa chọn làm việc, làm việc phía Server và làm việc phía Client. Tuy nhiên, khi đã biết đến JavaScript Sets thì chắc chắn đây là một lựa chọn không tồi, nó giúp bạn thao tác đơn giản gọn nhẹ hiệu quả trên phía Client
+ Nhờ vậy, với những xử lý có thể làm việc tại Client thì đây là một lựa chọn hoàn toàn ổn
