JavaScript Map

JavaScript 的 ES6 引入了两个新的数据结构，即 Map 和 WeakMap。

Map 类似于 JavaScript 中的对象，允许我们以 键/值 对的形式存储元素。

Map 中的元素按插入顺序插入。但是，与对象不同，Map 可以包含 对象、函数 和其他 数据类型 作为键。

创建 JavaScript Map

要创建 Map，我们使用 new Map() 构造函数。例如，

// create a Map
const map1 = new Map(); // an empty map
console.log(map1); // Map {}

向 Map 插入项

创建 Map 后，您可以使用 set() 方法向其插入元素。例如，

// create a map
let map1 = new Map();

// insert key-value pair
map1.set('info', {name: 'Jack', age: 26});
console.log(map1); // Map {"info" => {name: "Jack", age: 26}}

您也可以使用对象或函数作为键。例如，

// Map with object key
let map2 = new Map();

let obj = {};
map2.set(obj, {name: 'Jack', age: "26"});

console.log(map2); // Map {{} => {name: "Jack", age: "26"}}

访问 Map 元素

您可以使用 get() 方法访问 Map 元素。例如，

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

// access the elements of a Map
console.log(map1.get('info')); // {name: "Jack", age: "26"}

检查 Map 元素

您可以使用 has() 方法检查 Map 中是否存在某个元素。例如，

const set1 = new Set([1, 2, 3]);

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

// check if an element is in Set
console.log(map1.has('info')); // true

删除元素

您可以使用 clear() 和 delete() 方法从 Map 中删除元素。

delete() 方法如果指定的键/值对存在并已被删除，则返回 true，否则返回 false。例如，

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

// removing a particular element
map1.delete('address'); // false
console.log(map1); // Map {"info" => {name: "Jack", age: "26"}} 

map1.delete('info'); // true
console.log(map1); // Map {}

clear() 方法会从 Map 对象中删除所有键/值对。例如，

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

// removing all element
map1.clear();
console.log(map1); // Map {}

JavaScript Map 大小

您可以使用 size 属性获取 Map 中的元素数量。例如，

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

console.log(map1.size); // 1

迭代 Map

您可以使用 for...of 循环或 forEach() 方法迭代 Map 元素。元素按插入顺序访问。例如，

let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');

// looping through Map
for (let [key, value] of map1) {
    console.log(key + '- ' + value);
}

输出

name- Jack
age- 27

您也可以使用 forEach() 方法获得与上面程序相同的结果。例如，

// using forEach method()
let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');

// looping through Map
map1.forEach(function(value, key) {
  console.log(key + '- ' + value)
})

迭代 Map 键

您可以使用 key() 方法迭代 Map 并获取键。例如，

let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');

// looping through the Map
for (let key of map1.keys()) {
  console.log(key)
}

输出

name
age

迭代 Map 值

您可以使用 values() 方法迭代 Map 并获取值。例如，

let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');

// looping through the Map
for (let values of map1.values()) {
    console.log(values);
}

输出

Jack
27

获取 Map 的键/值

您可以使用 entries() 方法迭代 Map 并获取 Map 的键/值。例如，

let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');

// looping through the Map
for (let elem of map1.entries()) {
    console.log(`${elem[0]}: ${elem[1]}`);
}

输出

name: Jack
age: 27

JavaScript Map 与 Object 对比

JavaScript WeakMap

WeakMap 类似于 Map。但是，WeakMap 只能包含对象作为键。例如，

const weakMap = new WeakMap();
console.log(weakMap); // WeakMap {} 

let obj = {};

// adding object (element) to WeakMap
weakMap.set(obj, 'hello');

console.log(weakMap); // WeakMap {{} => "hello"}

当您尝试添加对象以外的其他数据类型时，WeakMap 会引发错误。例如，

const weakMap = new WeakMap();

// adding string as a key to WeakMap
weakMap.set('obj', 'hello');

// throws error
// TypeError: Attempted to set a non-object key in a WeakMap

WeakMap 方法

WeakMaps 具有 get()、set()、delete() 和 has() 方法。例如，

const weakMap = new WeakMap();
console.log(weakMap); // WeakMap {} 

let obj = {};

// adding object (element) to WeakMap
weakMap.set(obj, 'hello');

console.log(weakMap); // WeakMap {{} => "hello"}

// get the element of a WeakMap
console.log(weakMap.get(obj)); // hello

// check if an element is present in WeakMap
console.log(weakMap.has(obj)); // true

// delete the element of WeakMap
console.log(weakMap.delete(obj)); // true

console.log(weakMap); // WeakMap {} 

WeakMaps 不可迭代

与 Maps 不同，WeakMaps 不可迭代。例如，

const weakMap = new WeakMap();
console.log(weakMap); // WeakMap {} 

let obj = {};

// adding object (element) to WeakMap
weakMap.set(obj, 'hello');


// looping through WeakMap
for (let i of weakMap) {

    console.log(i);  // TypeError
}

JavaScript 的 Map 和 WeakMap 是在 ES6 中引入的。某些浏览器可能不支持它们的使用。要了解更多信息，请访问 JavaScript Map 支持 和 JavaScript WeakMap 支持。

另请阅读

• JavaScript ES6
• JavaScript Set 和 WeakSet