diff options
Diffstat (limited to 'files/vi/web/javascript/guide/keyed_collections/index.html')
-rw-r--r-- | files/vi/web/javascript/guide/keyed_collections/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/vi/web/javascript/guide/keyed_collections/index.html b/files/vi/web/javascript/guide/keyed_collections/index.html new file mode 100644 index 0000000000..491efcf1da --- /dev/null +++ b/files/vi/web/javascript/guide/keyed_collections/index.html @@ -0,0 +1,153 @@ +--- +title: Keyed collections +slug: Web/JavaScript/Guide/Keyed_collections +translation_of: Web/JavaScript/Guide/Keyed_collections +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div> + +<p class="summary">Chương này sẽ giới thiệu về bộ sưu tập dữ liệu được sắp xếp theo key; <code>Map</code> và <code>Set</code> objects chứa các phần tử có thể được lặp lại theo thứ tự được thêm vào.</p> + +<h2 id="Maps">Maps</h2> + +<h3 id="Map_object">Map object</h3> + +<p>ECMAScript 2015 giới thiệu một cấu trúc dữ liệu mới để ánh xạ giá trị thành giá trị. Một đối tượng {{jsxref("Map")}} là một ánh xạ đơn giản key/value và có thể lặp lại các phần tử theo thứ tự thêm vào.</p> + +<p>Đoạn code bên dưới sẽ thể hiện các thao tác cơ bản với <code>Map</code>. Xem thêm {{jsxref("Map")}} để có thêm nhiều ví dụ và toàn bộ API. Bạn có thể sử dụng một vòng lặp {{jsxref("Statements/for...of","for...of")}} để trả về một mảng của <code>[<var>key<var>, <var>value</var>]</var></var></code> trong mỗi lần lặp.</p> + +<pre class="brush: js">let sayings = new Map(); +sayings.set('dog', 'woof'); +sayings.set('cat', 'meow'); +sayings.set('elephant', 'toot'); +sayings.size; // 3 +sayings.get('fox'); // undefined +sayings.has('bird'); // false +sayings.delete('dog'); +sayings.has('dog'); // false + +for (let [key, value] of sayings) { + console.log(key + ' goes ' + value); +} +// "cat goes meow" +// "elephant goes toot" + +sayings.clear(); +sayings.size; // 0 +</pre> + +<h3 id="Object_and_Map_compared">Object and Map compared</h3> + +<p>Thông thường, {{jsxref("Object", "objects", "", 1)}} được sử dụng để ánh xạ string thành value. Objects cũng cho phép bạn đặt key thành values, truy xuất các value, xóa các key, và kiểm tra xe có dữ liệu nào được lưu trữ trong một key. Tuy nhiên <code>Map</code> objects có một vài lợi thế hơn giúp chúng tốt hơn trong việc ánh xạ.</p> + +<ul> + <li>Các key trong một <code>Object</code> là {{jsxref("Global_Objects/String","Strings")}} hoặc {{jsxref("Global_Objects/Symbol","Symbols")}}, trong khi chúng có thể là bất kỳ giá trị nào trong một <code>Map</code>.</li> + <li>Bạn có thể lấy được <code>size</code> của một <code>Map</code> dễ dàng, trong khi bạn sẽ phải xử lý thủ công để lấy được kích thước của một <code>Object</code>.</li> + <li>Vòng lặp của các ánh xạ sẽ theo thứ tự được thêm vào của các phần tử.</li> + <li>Một <code>Object</code> có một prototype, vì thế có các giá trị mặc định của key trong ánh xạ. (Điều này có thể bỏ qua bằng cách sử dụng <code>map = Object.create(null)</code>.)</li> +</ul> + +<p>Ba mẹo dưới đây có thể giúp bạn quyết định khi nào thì sử dụng <code>Map</code> hoặc <code>Object</code>:</p> + +<ul> + <li>Sử dụng các object khi các key không được xác định cho đến khi chạy, và khi tất cả các key có cùng kiểu và tất cả các value cũng cùng kiểu.</li> + <li>Sử dụng các map nếu cần lưu trữ các giá trị có kiểu nguyên thủy làm key vì các object coi mỗi key là một string cho dù nó là một giá trị số, boolean hoặc bất kỳ giá trị có kiểu nguyên thủy nào.</li> + <li>Sử dụng các object khi có logic hoạt động trên các yếu tố riêng lẻ.</li> +</ul> + +<h3 id="WeakMap_object">WeakMap object</h3> + +<p>Đối tượng <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">{{jsxref("WeakMap")}}</a> là một bộ sưu tập của cặp key/value trong đó các key chỉ là các đối tượng và các value có thể là bất kỳ giá trị nào. Tham chiếu đối tượng trong các key được giữ<em> yếu ớt (weakly)</em>, có nghĩa là chúng là mục tiêu của garbage collection (GC) nếu không có tham chiếu nào khác đến đối tượng nữa. Các <code>WeakMap</code> API giống với các <code>Map</code> API.</p> + +<p>Một điểm khác biệt so với các <code>Map</code> objects là các key của <code>WeakMap</code> không đếm được (tức là không có phương thức nào cung cấp cho bạn danh sách các key). Nếu có, danh sách key sẽ phụ thuộc vào trạng thái của garbage collection, đưa ra tính không xác định.</p> + +<p>Một số thông tin và ví dụ khác, xem tại "Why <em>Weak</em>Map?" trong tài liệu tham khảo {{jsxref("WeakMap")}}.</p> + +<p>Một trường hợp sử dụng các <code>WeakMap</code> objec là lưu trữ dữ liệu riêng tư cho một đối tượng hoặc ấn chi tiết thực hiện. Ví dụ sau đây từ bài đăng trên blog của Nick Fitzgerald's <a href="http://fitzgeraldnick.com/weblog/53/">"Hiding Implementation Details with ECMAScript 6 WeakMaps"</a>. Các dữ liệu và phương thức riêng bên trong object sẽ được lưu trữ trong đối tượng <code><var>privates</var></code>. Tất cả các instance và prototype lộ ra được công khai; mọi thứ khác không thể truy cập từ bên ngoài bởi vì <code><var>privates</var></code> không được xuất từ mô-đun.</p> + +<pre class="brush: js">const privates = new WeakMap(); + +function Public() { + const me = { + // Private data goes here + }; + privates.set(this, me); +} + +Public.prototype.method = function () { + const me = privates.get(this); + // Do stuff with private data in `me`... +}; + +module.exports = Public;</pre> + +<h2 id="Sets">Sets</h2> + +<h3 id="Set_object">Set object</h3> + +<p>Các {{jsxref("Set")}} object là bộ sưu tập các giá trị. Bạn có thể lặp các phần tử theo thứ tự được thêm vào. Một giá trị trong một <code>Set</code> chỉ có thể xuất hiện một lần; nó là duy nhất trong <code>Set</code>.</p> + +<p>Đoạn code dưới đây là các thao tác cơ bản với <code>Set</code>. Xem thêm tại tài liệu tham khảo {{jsxref("Set")}} để có thêm nhiều ví dụ và toàn bộ các API.</p> + +<pre class="brush: js">let mySet = new Set(); +mySet.add(1); +mySet.add('some text'); +mySet.add('foo'); + +mySet.has(1); // true +mySet.delete('foo'); +mySet.size; // 2 + +for (let item of mySet) console.log(item); +// 1 +// "some text" +</pre> + +<h3 id="Converting_between_Array_and_Set">Converting between Array and Set</h3> + +<p>Bạn có thể tạo một {{jsxref("Array")}} từ một Set bằng cách sử dụng {{jsxref("Array.from")}} hoặc <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>. Ngoài ra, hàm khởi tạo <code>Set</code> cho phép chuyển đổi một <code>Array</code> theo một hướng khác.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Hãy nhớ rằng các <code>Set</code> object lưu trữ các <em>giá trị duy nhất</em>—vì thế bất kỳ phần tử nào trùng lặp trong Array sẽ bị loại bỏ khi chuyển đổi!</p> +</div> + +<pre class="brush: js">Array.from(mySet); +[...mySet2]; + +mySet2 = new Set([1, 2, 3, 4]); +</pre> + +<h3 id="Array_and_Set_compared">Array and Set compared</h3> + +<p>Thông thường, một tập hợp các phần tử được lưu trữ trong mảng trong JavaScript trong nhiều tính huống. Tuy nhiên, <code>Set</code> object có một vài điểm lợi thế sau:</p> + +<ul> + <li>Xóa bỏ các phẩn tử trong mảng theo giá trị (<code>arr.splice(arr.indexOf(val), 1)</code>) rất chậm.</li> + <li><code>Set</code> object cho phép bạn xóa bỏ các phần tử theo giá trị của chúng. Trong khi đó một mảng, bạn sẽ phải dùng phương thức <code>splice</code> dựa theo index của phần tử.</li> + <li>Giá trị {{jsxref("NaN")}} không thể được tìm thất với <code>indexOf</code> trong một mảng.</li> + <li>Các <code>Set</code> object lưu trữ các giá trị duy nhất. Bạn không cần phải thao tác thủ công để theo dõi các giá trị bị trùng lặp.</li> +</ul> + +<h3 id="WeakSet_object">WeakSet object</h3> + +<p>Các <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">{{jsxref("WeakSet")}}</a> object là bộ sưu tập các đối tượng. Một đối tượng trong <code>WeakSet</code> chỉ xuất hiện một lần. Nó là duy nhất trong bộ sưu tập <code>WeakSet</code>, và các đối tượng đó không thể đếm được.</p> + +<p>Những điểm khác biệt chính so với {{jsxref("Set")}} object:</p> + +<ul> + <li>Khác với <code>Sets</code>, <code>WeakSets</code> là <strong>bộ sưu tập các đối tượng</strong> và không phải bất kỳ giá trị của bất kỳ kiểu nào.<strong> </strong></li> + <li><code>WeakSet</code> là <em>yếu ớt (weak)</em>: Tham chiếu tới đối tượng trong bộ sưu tập được tổ chức <em>yếu ớt </em>(weakly). Nếu không có tham chiếu nào khác tới đối tượng được lưu trữ trong <code>WeakSet</code>, chúng có thể bị thu thập bởi garbage collected. Điều này có nghĩa là không có danh sách các đối tượng đang được lưu trữ trong bộ sưu tập. <code>WeakSets</code> không thể đếm được.</li> +</ul> + +<p>Các trường hợp sử dụng các <code>WeakSet</code> object bị hạn chế. Chúng sẽ không rò rỉ bộ nhớ, vì thế nó có thể an toàn khi sử dụng các phần tử DOM làm khóa và đánh dấu chúng cho mục đích theo dõi.</p> + +<h2 id="Key_and_value_equality_of_Map_and_Set">Key and value equality of Map and Set</h2> + +<p>So sánh bằng nhau của các key của các <code>Map</code> object và value của các <code>Set</code> object dựa trên "<a href="https://tc39.github.io/ecma262/#sec-samevaluezero">same-value-zero algorithm</a>":</p> + +<ul> + <li>So sánh bằng nhau làm việc giống như so sánh bằng toán tử <code>===</code>.</li> + <li><code>-0</code> và<code>+0</code> được coi là bằng nhau.</li> + <li>{{jsxref("NaN")}} được coi là bằng chính nó (trái với <code>===</code>).</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p> |