path: root/files/vi/web/javascript/reference/global_objects/map/index.html

---
title: Map
slug: Web/JavaScript/Reference/Global_Objects/Map
tags:
  - ES6
  - JavaScript
  - Map
  - cách dùng
  - hàm
translation_of: Web/JavaScript/Reference/Global_Objects/Map
---
<div>{{JSRef}}</div>

<p><span class="seoSummary">Đối tượng <strong><code>Map</code></strong> lưu cặp key-value (khoá - giá trị) theo thứ tự chèn vào của khoá.</span> Bất kỳ giá trị nào (cả đối tượng (objects) và {{Glossary("Primitive", "primitive values")}}) đều có thể sử dụng làm key hoặc value.</p>

<h2 id="Cú_pháp">Cú pháp</h2>

<pre class="syntaxbox">new Map([<em>iterable</em>])</pre>

<h3 id="Tham_số">Tham số</h3>

<dl>
 <dt><code>iterable</code></dt>
 <dd>Một {{jsxref("Array")}} hoặc <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> object có các phần tử là cặp key-value (các mảng có 2 phần tử, vd. <code>[[ 1, 'one' ],[ 2, 'two' ]]</code>). Mỗi cặp key-value sẽ được thêm vào <code>Map</code> mới; những giá trị <code>null</code> chuyển thành <code>undefined</code>.</dd>
</dl>

<h2 id="Mô_tả">Mô tả</h2>

<p>Một <code>Map</code> object duyệt qua các phần tử của nó theo thứ tự chèn vào –– một vòng lặp {{jsxref("Statements/for...of", "for...of")}} trả về một mảng <code>[key, value]</code> cho mỗi lần lặp.</p>

<h3 id="Key_equality_(so_sánh_key)">Key equality (so sánh key)</h3>

<p>Key được xác định bằng nhau dựa vào giải thuật "SameValueZero": <code>NaN</code> được xem là giống <code>NaN</code> (mặc dù <code>NaN !== NaN</code>) và tất cả các giá trị khác được xem xét bằng nhau theo toán tử <code>===</code>. Trong đặc tả ECMAScript hiện tại, <code>-0</code> và <code>+0</code> là bằng nhau, cho dù điều này không đúng ở các bản dự thảo trước đó. Xem "Value equality for -0 and 0" trong bảng <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map$translate?tolocale=vi#Browser_compatibility">tương thích trình duyệt</a> để biết thêm chi tiết.</p>

<h3 id="Objects_and_maps_compared">Objects and maps compared</h3>

<p>{{jsxref("Object", "Objects")}} tương tự với <code>Maps</code> ở chỗ cả hai đều cho phép bạn đặt keys cho values, lấy các values, xoá các keys và xem có gì được chứa trong một key không. Bởi vì điều này (và bởi vì trước đây không tích hợp các lựa chọn khác), trong lịch sử, <code>Object</code>s đã được dùng như <code>Map</code>s; Tuy vậy, có những điểm khác biệt khiến sử dụng một <code>Map</code> thích hợp hơn trong các trường hợp nhất định: </p>

<ul>
 <li>Keys của một Object là {{jsxref("String", "Strings")}} và {{jsxref("Symbol", "Symbols")}}, trong khi chúng có thể là bất kỳ giá trị nào với Map, bao gồm hàm, objects và primitive.</li>
 <li>Các keys trong Map có thứ tự trong khi các keys trong object thì không. Vì thế, khi duyệt qua, Map object trả về keys theo thứ tự chèn vào.</li>
 <li>Bạn có thể lấy kích cỡ của một <code>Map</code> dễ dàng qua thuộc tính <code>size</code>, trong khi số thuộc tính trong một <code>Object</code> phải xác định thủ công.</li>
 <li>Một <code>Map</code> là một <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> và do đó có thể được duyệt trực tiếp, trong khi để duyệt qua một <code>Object</code> cần lấy các keys của nó rồi mới duyệt.</li>
 <li>Một <code>Object</code> có một prototype, vậy nên có các keys mặc định có thể xung đột với các keys của bạn nếu không cẩn thận. Ở ES5, điều này có thể tránh bằng cách sử dụng <code>map = Object.create(null)</code>, nhưng hiếm khi thực hiện.</li>
 <li>Một <code>Map</code> có thể thực thi tốt hơn ở các hoàn cảnh thường xuyên thêm và xoá các cặp keys.</li>
</ul>

<h2 id="Các_thuộc_tính">Các thuộc tính</h2>

<dl>
 <dt><code>Map.length</code></dt>
 <dd>Giá trị của thuộc tính <code>length</code> là 0.</dd>
 <dd>Để lấy số phần tử đang có trong mảng, sử dụng {{jsxref("Map.prototype.size")}}.</dd>
 <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
 <dd>The constructor function that is used to create derived objects.</dd>
 <dt>{{jsxref("Map.prototype")}}</dt>
 <dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd>
</dl>

<h2 id="Map_instances">Map instances</h2>

<p>?Tất cả <code>Map</code> instances kế thừa từ {{jsxref("Map.prototype")}}.</p>

<h3 id="Các_thuộc_tính_2">Các thuộc tính</h3>

<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p>

<h3 id="Các_phương_thức">Các phương thức</h3>

<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p>

<h2 id="Ví_dụ">?Ví dụ</h2>

<h3 id="Sử_dụng_Map_object">Sử dụng Map object</h3>

<pre class="brush: js">var myMap = new Map();

var keyString = 'a string',
    keyObj = {},
    keyFunc = function() {};

// đặt các values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, 'value associated with keyObj');
myMap.set(keyFunc, 'value associated with keyFunc');

myMap.size; // 3

// lấy các values
myMap.get(keyString);    // "value associated with 'a string'"
myMap.get(keyObj);       // "value associated with keyObj"
myMap.get(keyFunc);      // "value associated with keyFunc"

myMap.get('a string');   // "value associated with 'a string'"
                         // ?vì keyString === 'a string'
myMap.get({});           // undefined, vì keyObj !== {}
myMap.get(function() {}) // undefined, vì  keyFunc !== function () {}
</pre>

<h3 id="Sử_dụng_NaN_làm_Map_keys">Sử dụng NaN làm Map keys</h3>

<p><code>NaN</code> có thể sử dụng làm một key. Kể cả khi mỗi <code>NaN</code> không bằng chính nó (<code>NaN !== NaN</code> trả về true), ví dụ sau chạy tốt bởi vì các NaNs không phân biệt lẫn nhau:</p>

<pre class="brush: js">var myMap = new Map();
myMap.set(NaN, 'not a number');

myMap.get(NaN); // "not a number"

var otherNaN = Number('foo');
myMap.get(otherNaN); // "not a number"
</pre>

<h3 id="Duyệt_Maps_với_for..of">Duyệt Maps với for..of</h3>

<p>Maps có thể được duyệt với vòng lặp <code>for..of</code>:</p>

<pre class="brush: js">var myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');
for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
}
// 0 = zero
// 1 = one

for (var key of myMap.keys()) {
  console.log(key);
}
// 0
// 1

for (var value of myMap.values()) {
  console.log(value);
}
// zero
// one

for (var [key, value] of myMap.entries()) {
  console.log(key + ' = ' + value);
}
// 0 = zero
// 1 = one
</pre>

<h3 id="Duyệt_Maps_với_forEach()">Duyệt Maps với forEach()</h3>

<p>Maps có thể được duyệt bằng phương thức <code>forEach()</code>:</p>

<pre class="brush: js">myMap.forEach(function(value, key) {
  console.log(key + ' = ' + value);
});
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
</pre>

<h3 id="Quan_hệ_với_Array_objects">Quan hệ với Array objects</h3>

<pre class="brush: js">var kvArray = [['key1', 'value1'], ['key2', 'value2']];

// Sử dụng hàm khởi tạo Map để chuyển một 2D key-value Array vào một map
var myMap = new Map(kvArray);

myMap.get('key1'); // returns "value1"

// Sử dụng hàm Array.from để chuyển một map vào một 2D key-value Array
console.log(Array.from(myMap)); // Sẽ hiện ra Array giống hệt kvArray

// Hoặc sử dụng duyệt keys hoặc values và chuyển chúng thành một mảng
console.log(Array.from(myMap.keys())); // Sẽ hiện ["key1", "key2"]
</pre>

<h3 id="Nhân_bản_(cloning)_và_gộp_(merging)_Maps">Nhân bản (cloning) và gộp (merging) Maps</h3>

<p>Giống như Arrays, Maps có thể được nhân bản:</p>

<pre class="brush: js">var original = new Map([
  [1, 'one']
]);

var clone = new Map(original);

console.log(clone.get(1)); // one
console.log(original === clone); // false. Useful for shallow comparison</pre>

<p>Keep in mind that the <em>data</em> itself is not cloned</p>

<p>Maps có thể được gộp lại, vẫn đảm bảo các key là duy nhất: </p>

<pre class="brush: js">var first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

var second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);

// Merge two maps. The last repeated key wins.
// Spread operator essentially converts a Map to an Array
var merged = new Map([...first, ...second]);

console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three</pre>

<p>Maps cũng có thể được gộp với Arrays:</p>

<pre class="brush: js">var first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

var second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);

// Merge maps with an array. The last repeated key wins.
var merged = new Map([...first, ...second, [1, 'eins']]);

console.log(merged.get(1)); // eins
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three</pre>

<h3 id="Các_đặc_tả">Các đặc tả</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2>



<p>{{Compat("javascript.builtins.Map")}}</p>

<h2 id="Xem_thêm">Xem thêm</h2>

<ul>
 <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li>
 <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li>
 <li>{{jsxref("Set")}}</li>
 <li>{{jsxref("WeakMap")}}</li>
 <li>{{jsxref("WeakSet")}}</li>
</ul>