Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

Đối tượng Map lưu cặp key-value (khoá - giá trị) theo thứ tự chèn vào của khoá. Bất kỳ giá trị nào (cả đối tượng (objects) và primitive values) đều có thể sử dụng làm key hoặc value.

Cú pháp

new Map([iterable])

Tham số

iterable
Một Array hoặc iterable object có các phần tử là cặp key-value (các mảng có 2 phần tử, vd. [[ 1, 'one' ],[ 2, 'two' ]]). Mỗi cặp key-value sẽ được thêm vào Map mới; những giá trị null chuyển thành undefined.

Mô tả

Một Map 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 for...of trả về một mảng [key, value] cho mỗi lần lặp.

Key equality (so sánh key)

Key được xác định bằng nhau dựa vào giải thuật "SameValueZero": NaN được xem là giống NaN (mặc dù NaN !== NaN) và tất cả các giá trị khác được xem xét bằng nhau theo toán tử ===. Trong đặc tả ECMAScript hiện tại, -0+0 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 tương thích trình duyệt để biết thêm chi tiết.

Objects and maps compared

Objects tương tự với Maps ở 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ử, Objects đã được dùng như Maps; Tuy vậy, có những điểm khác biệt khiến sử dụng một Map thích hợp hơn trong các trường hợp nhất định: 

  • Keys của một Object là StringsSymbols, 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.
  • 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.
  • Bạn có thể lấy kích cỡ của một Map dễ dàng qua thuộc tính size, trong khi số thuộc tính trong một Object phải xác định thủ công.
  • Một Map là một iterable và do đó có thể được duyệt trực tiếp, trong khi để duyệt qua một Object cần lấy các keys của nó rồi mới duyệt.
  • Một Object 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 map = Object.create(null), nhưng hiếm khi thực hiện.
  • Một Map 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.

Các thuộc tính

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

Map instances

?Tất cả Map instances kế thừa từ Map.prototype.

Các thuộc tính

Map.prototype.constructor
Returns the function that created an instance's prototype. This is the Map function by default.
Map.prototype.size
Returns the number of key/value pairs in the Map object.

Các phương thức

Map.prototype.clear()
Removes all key/value pairs from the Map object.
Map.prototype.delete(key)
Returns true if an element in the Map object existed and has been removed, or false if the element does not exist. Map.prototype.has(key) will return false afterwards.
Map.prototype.entries()
Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.
Map.prototype.forEach(callbackFn[, thisArg])
Calls callbackFn once for each key-value pair present in the Map object, in insertion order. If a thisArg parameter is provided to forEach, it will be used as the this value for each callback.
Map.prototype.get(key)
Returns the value associated to the key, or undefined if there is none.
Map.prototype.has(key)
Returns a boolean asserting whether a value has been associated to the key in the Map object or not.
Map.prototype.keys()
Returns a new Iterator object that contains the keys for each element in the Map object in insertion order.
Map.prototype.set(key, value)
Sets the value for the key in the Map object. Returns the Map object.
Map.prototype.values()
Returns a new Iterator object that contains the values for each element in the Map object in insertion order.
Map.prototype[@@iterator]()
Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.

?Ví dụ

Sử dụng Map object

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 () {}

Sử dụng NaN làm Map keys

NaN có thể sử dụng làm một key. Kể cả khi mỗi NaN không bằng chính nó (NaN !== NaN 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:

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"

Duyệt Maps với for..of

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

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

Duyệt Maps với forEach()

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

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

Quan hệ với Array objects

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"]

Nhân bản (cloning) và gộp (merging) Maps

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

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

Keep in mind that the data itself is not cloned

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

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

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

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

Các đặc tả

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Map' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Map' in that specification.
Draft  

Tương thích trình duyệt

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Basic supportChrome Full support 38Edge Full support 12Firefox Full support 13IE Full support 11Opera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 14Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support 0.12
Full support 0.12
Full support 0.10
Disabled
Disabled From version 0.10: this feature is behind the --harmony runtime flag.
new Map(iterable)Chrome Full support 38Edge Full support 12Firefox Full support 13IE No support NoOpera Full support 25Safari Full support 9WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 14Opera Android Full support 25Safari iOS Full support 9Samsung Internet Android Full support Yesnodejs Full support 0.12
new Map(null)Chrome Full support YesEdge Full support 12Firefox Full support 37IE Full support 11Opera Full support YesSafari Full support 9WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 37Opera Android Full support YesSafari iOS Full support 9Samsung Internet Android Full support Yesnodejs Full support 0.12
Full support 0.12
Full support 0.10
Disabled
Disabled From version 0.10: this feature is behind the --harmony runtime flag.
Map() without new throwsChrome Full support YesEdge Full support 12Firefox Full support 42IE Full support 11Opera Full support YesSafari Full support 9WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 42Opera Android Full support YesSafari iOS Full support 9Samsung Internet Android Full support Yesnodejs Full support 0.12
Key equality for -0 and 0Chrome Full support 38Edge Full support 12Firefox Full support 29IE No support NoOpera Full support 25Safari Full support 9WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 29Opera Android Full support 25Safari iOS Full support 9Samsung Internet Android Full support Yesnodejs Full support 4.0.0
clearChrome Full support 38Edge Full support 12Firefox Full support 19IE Full support 11Opera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 19Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support 0.12
deleteChrome Full support 38Edge Full support 12Firefox Full support 13IE Full support 11Opera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 14Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support 0.12
Full support 0.12
Full support 0.10
Disabled
Disabled From version 0.10: this feature is behind the --harmony runtime flag.
entriesChrome Full support 38Edge Full support 12Firefox Full support 20IE No support NoOpera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 20Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support 0.12
forEachChrome Full support 38Edge Full support 12Firefox Full support 25IE Full support 11Opera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 25Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support 0.12
getChrome Full support 38Edge Full support 12Firefox Full support 13IE Full support 11Opera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 14Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support Yes
hasChrome Full support 38Edge Full support 12Firefox Full support 13IE Full support 11Opera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 14Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support Yes
keysChrome Full support 38Edge Full support 12Firefox Full support 20IE No support NoOpera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 20Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support 0.12
prototypeChrome Full support 38Edge Full support 12Firefox Full support 13IE Full support 11Opera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 14Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support Yes
setChrome Full support 38Edge Full support 12Firefox Full support 13IE Partial support 11
Notes
Partial support 11
Notes
Notes Returns 'undefined' instead of the 'Map' object.
Opera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 14Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support Yes
sizeChrome Full support 38Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes From Firefox 13 to Firefox 18, the size property was implemented as a Map.prototype.size() method, this has been changed to a property in later versions conform to the ECMAScript 2015 specification.
IE Full support 11Opera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 19
Notes
Full support 19
Notes
Notes From Firefox 13 to Firefox 18, the size property was implemented as a Map.prototype.size() method, this has been changed to a property in later versions conform to the ECMAScript 2015 specification.
Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support 0.12
valuesChrome Full support 38Edge Full support 12Firefox Full support 20IE No support NoOpera Full support 25Safari Full support 8WebView Android Full support 38Chrome Android Full support 38Edge Mobile Full support 12Firefox Android Full support 20Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support Yesnodejs Full support 0.12
@@iteratorChrome Full support YesEdge Full support YesFirefox Full support 36
Full support 36
No support 27 — 36
Notes Alternate Name
Notes A placeholder property named @@iterator is used.
Alternate Name Uses the non-standard name: @@iterator
No support 17 — 27
Notes Alternate Name
Notes A placeholder property named iterator is used.
Alternate Name Uses the non-standard name: iterator
IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 36
Full support 36
No support 27 — 36
Notes Alternate Name
Notes A placeholder property named @@iterator is used.
Alternate Name Uses the non-standard name: @@iterator
No support 17 — 27
Notes Alternate Name
Notes A placeholder property named iterator is used.
Alternate Name Uses the non-standard name: iterator
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support 0.12
@@speciesChrome Full support 51Edge Full support 13Firefox Full support 41IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Edge Mobile Full support 13Firefox Android Full support 41Opera Android Full support 38Safari iOS Full support 10Samsung Internet Android Full support 5.0nodejs Full support 6.5.0
Full support 6.5.0
Full support 6.0.0
Disabled
Disabled From version 6.0.0: this feature is behind the --harmony runtime flag.
@@toStringTagChrome Full support 44Edge No support NoFirefox Full support 51IE No support NoOpera No support NoSafari No support NoWebView Android Full support 44Chrome Android Full support 44Edge Mobile No support NoFirefox Android Full support 51Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support 4.0nodejs No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

Xem thêm

Document Tags and Contributors

Những người đóng góp cho trang này: vhai
Cập nhật lần cuối bởi: vhai,