TypeScript là một phiên bản cao hơn của JavaScript, được thiết kế để xây dựng các ứng dụng lớn và phức tạp.
Tuy nhiên, không phải ai cũng biết cách nó hoạt động như thế nào.
Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách sử dụng Maps và Sets để lưu trữ cặp (key-value) mà không bị trùng lặp như thế nào nhé.
Lưu key-value với Maps
Các thao tác chính với Maps như sau:
- Khởi tạo:
let map = new Map() - Thêm phần tử:
map.set('name', 'Tran Nu Nhu Quynh') - Xóa phần tử:
map.delete("name") - Kiểm tra phần tử tồn tại:
map.has('name') - Đếm tổng số phần tử:
map.size - Xóa toàn bộ phần tử:
map.clear()
Đối với Map thì các key không được trùng, vì vậy nếu truyền vào 2 key giống nhau thì nó chỉ lưu đè vào một key duy nhất. Và key có thể là một string, number, const hay thậm chí là một NaN.
Ngoài ra, còn có một số hàm hỗ trợ trong Maps như: keys() – lấy danh sách keys,values() – lấy danh sách values, entries()– lấy danh sách keys + values.
Sử dụng Symbol như là key của Maps
Symbol có thể được sử dụng như là một khoá của cho các đối tượng Maps và Object.
Chẳng hạn, chúng ta có thể viết:
1 2 3 4 5 | <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> symbol <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> data<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">,</span> <span class="token string">"Quỳnh"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> data<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>symbol<span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Symbol là hoàn toàn duy nhất (hoàn toàn khác nhau), điều đó có nghĩa là nếu bạn tạo ra 2 Symbol, thì chúng là khác nhau, kể cả khi bạn tạo ra 2 Symbol theo cùng một cách.
Ví dụ:
1 2 3 | <span class="token keyword">const</span> symbol1 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> symbol2 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Chúng có cùng tên nhưng khác nhau.
1 2 | symbol1 <span class="token operator">===</span> symbol2 <span class="token comment">// kết qủa trả về false</span> |
Chúng ta có thể lấy giá trị với key symbol đã khai báo bằng cách:
1 2 | <span class="token keyword">const</span> value <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>symbol<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Lưu data bằng Index
Chúng ta có thể lưu data mà không trùng lặp với Sets.
Ví dụ:
1 2 | <span class="token keyword">const</span> <span class="token keyword">set</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Set(3) {1, 2, 3}</span> |
Hoặc:
1 2 | <span class="token keyword">const</span> <span class="token keyword">set</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Set(3) {1, 2, 3}</span> |
Chúng ta cũng thấy giá trị trùng lặp đã bị loại bỏ.
Set có thuộc tính size để trả về kích thước của một set.
Tương tự với Maps, Sets cũng có một số phương thức hữu ích như add() – thêm một phần tử, delete() – xoá một phần tử, has() – kiểm tra phần tử có tồn tại không, clear()– xoá tất cả các phần tử và loop.
Tổng kết
Maps sẽ là công cụ hữu hiệu để lưu trữ dữ liệu dạng (khóa, giá trị).
Trong khi đó, Sets giúp bạn lưu trữ chuỗi dữ liệu mà không lo lắng về việc trùng lặp giá trị.
Với những điều đó, không có lí do gì mà không áp dụng liền vào những dự án của chính mình các bạn nhỉ. Hy vọng sẽ giúp ích cho các bạn. Hẹn gặp lại các bạn ở các bài chia sẻ tiếp theo nhé.
