文章目录

  • 创建 JavaScript Map
  • 将条目插入 Map
  • 访问 Map 元素
  • 检查 Map 元素
  • 移除元素
  • JavaScript Map 大小
  • 遍历 Map
  • 迭代 Map 键
  • 迭代 Map 值
  • 获取 Map 的键/值
  • JavaScript Map vs 对象
  • JavaScript WeakMap
  • WeakMap 方法
  • WeakMaps 不可迭代
  • 参考文档


    在本教程中，您将借助示例了解 JavaScript Map 和 WeakMap。
    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 set
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 键

    您可以遍历 Map，使用 keys() 方法获取键。例如，

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 值

    您可以遍历 Map，使用 values() 方法获取值。例如，

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 的键/值

    您可以遍历 Map，使用 entries() 方法获取 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 vs 对象

Map

对象

Map可以包含对象和其他数据类型作为键。

对象只能包含字符串和符号作为键。

Map可以直接迭代，并且可以访问它们的值。

可以通过访问其键来迭代对象。

Map的元素个数可以由size属性决定。

对象的元素数量需要手动确定。

Map对于需要频繁添加或删除元素的程序表现更好。

如果程序需要频繁添加或删除元素，则对象性能不佳。

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 方法

    WeakMap 有方法 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 不可迭代

    与 Map 不同，WeakMap 不可迭代。例如，

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 支持。

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/map-weakmap