tek4

Set và WeakSet trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8198 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-51.png" alt="Set v&agrave; WeakSet trong JavaScript" width="562" height="343" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ t&igrave;m hiểu về kiểu dữ liệu cấu tr&uacute;c Set v&agrave; WeakSet trong JavaScript c&ugrave;ng với sự trợ gi&uacute;p của c&aacute;c v&iacute; dụ dẫn chứng.</p> <h1>Kiểu dữ liệu Set trong JavaScript</h1> <p>JavaScript ES6 đ&atilde; giới thiệu hai cấu tr&uacute;c dữ liệu mới, bao gồm kiểu dữ liệu Set v&agrave; WeakSet.</p> <p>Kiểu dữ liệu Set tương tự như kiểu dữ liệu mảng, cho ph&eacute;p ch&uacute;ng ta lưu trữ nhiều phần tử như số, chuỗi k&yacute; tự, đối tượng,&hellip; Tuy nhi&ecirc;n, n&oacute; c&oacute; điểm kh&aacute;c biệt ở chỗ đ&oacute; l&agrave; n&oacute; sẽ kh&ocirc;ng thể chứa c&aacute;c gi&aacute; trị tr&ugrave;ng lặp.</p> <h2>Tạo đối tượng c&oacute; kiểu dữ liệu Set trong JavaScript</h2> <p>Để tạo một đối tượng c&oacute; kiểu dữ liệu Set, ta sẽ cần sử dụng h&agrave;m tạo <code class="EnlighterJSRAW" data-enlighter-language="generic">Set()</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new Set(["Nam", "Nam", "Trung"]); console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>Set{'Nam', 'Trung'}</pre> <p>Khi c&aacute;c gi&aacute; trị tr&ugrave;ng lặp được th&ecirc;m v&agrave;o cho một đối tượng kiểu dữ liệu Set, c&aacute;c gi&aacute; trị tr&ugrave;ng lặp sẽ bị loại bỏ.</p> <h2>Truy cập v&agrave;o c&aacute;c phần tử của đối tượng kiểu dữ liệu Set</h2> <p>Ta c&oacute; thể truy cập c&aacute;c phần tử của đối tượng kiểu dữ liệu Set bằng phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">values()</code>v&agrave; kiểm tra xem c&oacute; phần tử n&agrave;o b&ecirc;n trong đối tượng Set bằng phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">has()</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new Set(["Nam", "Nam", "Trung"]); console.log(sinh_vien.values());</pre> <p>Kết quả:</p> <pre>[Set Iterator] {'Nam', 'Trung'}</pre> <p>Ta c&oacute; thể sử dụng phương thức has() để kiểm tra xem phần tử c&oacute; tồn tại trong đối tượng Set hay kh&ocirc;ng.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new Set(["Nam", "Nam", "Trung"]); console.log(sinh_vien.has("Nam"));</pre> <p>Kết quả:</p> <pre>True</pre> <h2>Th&ecirc;m c&aacute;c phần tử mới v&agrave;o trong đối tượng Set</h2> <p>Ta c&oacute; thể th&ecirc;m c&aacute;c phần tử v&agrave;o trong một đối tượng kiểu dữ liệu Set bằng phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">add()</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new Set(["Nam", "Nam", "Trung"]); sinh_vien.add("Thanh"); console.log(sinh_vien.values());</pre> <p>Kết quả:</p> <pre>[Set Iterator] {'Nam', 'Trung', 'Thanh'}</pre> <h2>Loại bỏ c&aacute;c phần tử kiểu dữ liệu Set</h2> <p>Ta c&oacute; thể sử dụng phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">clear()</code>v&agrave; <code class="EnlighterJSRAW" data-enlighter-language="generic">delete()</code>để x&oacute;a c&aacute;c phần tử khỏi đối tượng c&oacute; kiểu dữ liệu Set.</p> <p>Phương thức delete() c&oacute; nhiệm vụ x&oacute;a một phần tử x&aacute;c định khỏi một đối tượng Set.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new Set(["Nam", "Nam", "Trung"]); sinh_vien.add("Thanh"); sinh_vien.delete("Nam"); console.log(sinh_vien.values());</pre> <p>Kết quả:</p> <pre>[Set Iterator] {'Trung', 'Thanh'}</pre> <p>Phương thức clear() sẽ c&oacute; nhiệm vụ x&oacute;a tất cả c&aacute;c phần tử khỏi một đối tượng Set.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new Set(["Nam", "Nam", "Trung"]); sinh_vien.add("Thanh"); sinh_vien.clear(); console.log(sinh_vien.values());</pre> <p>Kết quả:</p> <pre>[Set Iterator] { }</pre> <h2>Duyệt qua c&aacute;c phần tử của đối tượng Set</h2> <p>Ta c&oacute; thể duyệt qua c&aacute;c phần tử trong đối tượng kiểu dữ liệu Set bằng c&aacute;ch sử dụng v&ograve;ng lặp <code class="EnlighterJSRAW" data-enlighter-language="generic">for...of</code>hoặc phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">forEach()</code>. C&aacute;c phần tử sẽ được duyệt theo thứ tự khi thực hiện việc th&ecirc;m c&aacute;c phần tử.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new Set(["Nam", "Nam", "Trung"]); for (let a of sinh_vien) { &nbsp;&nbsp;&nbsp; console.log(a); }</pre> <p>Kết quả:</p> <pre>Nam Trung</pre> <h2>Kiểu dữ liệu WeakSet trong JavaScript</h2> <p>Kiểu dữ liệu WeakSet tương tự như kiểu dữ liệu Set. Tuy nhi&ecirc;n, WeakSet chỉ c&oacute; thể chứa c&aacute;c th&agrave;nh phần c&oacute; kiểu dữ liệu l&agrave; đối tượng trong khi Set c&oacute; thể chứa bất kỳ kiểu dữ liệu n&agrave;o như chuỗi k&yacute; tự, số, đối tượng,&hellip;</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new WeakSet(); console.log(sinh_vien); let sv = { &nbsp;&nbsp;&nbsp; Ten: 'Nam', &nbsp;&nbsp;&nbsp; ID: 100 } sinh_vien.add(sv); console.log(sinh_vien);</pre> <p>Kết quả:</p> <pre>WeakSet{&lt;items unknown&gt;} WeakSet{&lt;items unknown&gt;}</pre> <p>Khi ta th&ecirc;m c&aacute;c kiểu dữ liệu kh&aacute;c ngo&agrave;i kiểu dữ liệu đối tượng, tr&igrave;nh bi&ecirc;n dịch sẽ đưa ra th&ocirc;ng b&aacute;o lỗi.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new WeakSet(); console.log(sinh_vien); let sv = { &nbsp;&nbsp;&nbsp; Ten: 'Nam', &nbsp;&nbsp;&nbsp; ID: 100 } sinh_vien.add(sv); sinh_vien.add("Sinh vi&ecirc;n"); console.log(sinh_vien);</pre> <p>Kết quả nhận được của chương tr&igrave;nh sẽ l&agrave; th&ocirc;ng b&aacute;o lỗi.</p> <h2>C&aacute;c phương thức của kiểu dữ liệu WeakSet</h2> <p>WeakSets bao gồm c&aacute;c phương thức add(), delete() v&agrave; has(). C&aacute;c phương thức n&agrave;y được sử dụng để thao t&aacute;c với c&aacute;c đối tượng c&oacute; kiểu dữ liệu WeakSet</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new WeakSet(); console.log(sinh_vien); let sv = { &nbsp;&nbsp;&nbsp; Ten: 'Nam', &nbsp;&nbsp;&nbsp; ID: 100 } sinh_vien.add(sv); console.log(sinh_vien.has(sv)); sinh_vien.delete(sv); console.log(sinh_vien);</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: C&aacute;c đối tượng WeakSet kh&ocirc;ng thể được duyệt qua c&aacute;c phần tử b&ecirc;n trong n&oacute;.</span></strong></p> <p>Kh&ocirc;ng giống như c&aacute;c đối tượng kiểu Set, đối tượng c&oacute; kiểu dữ liệu l&agrave; WeakSet kh&ocirc;ng thể duyệt qua c&aacute;c phần tử b&ecirc;n trong n&oacute;.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const sinh_vien = new WeakSet(); console.log(sinh_vien); let sv = { &nbsp;&nbsp;&nbsp; Ten: 'Nam', &nbsp;&nbsp;&nbsp; ID: 100 } sinh_vien.add(sv); for (let a of sinh_vien) { &nbsp;&nbsp;&nbsp; console.log(a); }</pre> <p>Kết quả của chương tr&igrave;nh tr&ecirc;n sẽ l&agrave; th&ocirc;ng b&aacute;o lỗi.</p> <h2>C&aacute;c ph&eacute;p to&aacute;n cho tập hợp</h2> <p>Trong JavaScript, Set kh&ocirc;ng cung cấp c&aacute;c phương thức được t&iacute;ch hợp sẵn để thực hiện c&aacute;c ph&eacute;p to&aacute;n như li&ecirc;n hợp, giao hợp, t&igrave;m sự kh&aacute;c biệt,&hellip; Tuy nhi&ecirc;n, ch&uacute;ng ta c&oacute; thể tạo c&aacute;c chương tr&igrave;nh để thực hiện c&aacute;c ph&eacute;p to&aacute;n đ&oacute;.</p> <p>V&iacute; dụ 1: T&igrave;m li&ecirc;n hợp của c&aacute;c tập hợp.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function union(a, b) { &nbsp;&nbsp;&nbsp; let uni = new Set(a); &nbsp;&nbsp;&nbsp; for (let i of b) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; uni.add(i); &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; return uni; } let sv = new Set(['Nam', 'Trung', 'Thanh']); let sv2 = new Set(['Trang', 'Trung', 'Nam']); let kq = union(sv, sv2); console.log(kq);</pre> <p>Kết quả:</p> <pre>Set {'Nam', 'Trung', 'Thanh', 'Trang'}</pre> <p>V&iacute; dụ 2: T&igrave;m tập giao của c&aacute;c tập hợp.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function intersect(setA, setB) { &nbsp;&nbsp;&nbsp; let inter = new Set(); &nbsp;&nbsp;&nbsp; for (let i of setB) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (setA.has(i)) { &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inter.add(i); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; return inter; } let sv = new Set(['Nam', 'Trung', 'Thanh']); let sv2 = new Set(['Trang', 'Trung', 'Nam']); let kq = intersect(sv, sv2); console.log(kq);</pre> <p>Kết quả:</p> <pre>Set {'Trung', 'Nam'}</pre> <p>V&iacute; dụ 3: T&igrave;m sự kh&aacute;c biệt của c&aacute;c tập hợp.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function difference(setA, setB) { &nbsp;&nbsp;&nbsp; let differ = new Set(setA) &nbsp;&nbsp;&nbsp; for (let i of setB) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; differ.delete(i) &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; return differ } let sv = new Set(['Nam', 'Trung', 'Thanh']); let sv2 = new Set(['Trang', 'Trung', 'Nam']); let kq = difference(sv, sv2); console.log(kq);</pre> <p>Kết quả:</p> <pre>Set {'Thanh'}</pre> <p>V&iacute; dụ 4: Kiểm tra tập con.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function subset(set1, set2) { &nbsp;&nbsp;&nbsp; for (let i of set2) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!set1.has(i)) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; return true } let sv = new Set(['Nam', 'Trung', 'Thanh']); let sv2 = new Set(['Thanh', 'Trung']); let kq = subset(sv, sv2); console.log(kq);</pre> <p>Kết quả:</p> <pre>True</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: C&aacute;c đối tượng kiểu Sets v&agrave; WeakSet trong JavaScript đ&atilde; được giới thiệu trong ES6. Một số tr&igrave;nh duyệt c&oacute; thể kh&ocirc;ng hỗ trợ việc sử dụng c&aacute;c cấu tr&uacute;c dữ liệu n&agrave;y.</span></strong></p> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về kiểu dữ liệu Set v&agrave; WeakSet trong JavaScript. Hy vọng mọi người c&oacute; thể &aacute;p dụng v&agrave;o trong chương tr&igrave;nh của m&igrave;nh. Mọi người h&atilde;y tiếp tục theo d&otilde;i c&aacute;c b&agrave;i tiếp theo v&agrave; cập nhật c&aacute;c b&agrave;i tiếp theo về lập tr&igrave;nh JavaScript tr&ecirc;n <a href="http://tek4.vn">tek4</a> nh&eacute;!</p> <p>P/s: Cảm ơn mọi người đ&atilde; tin tưởng tek4!</p>