跳到主要内容

JavaScript Map

提示
  1. 键值对存储：JavaScript的Map允许以键值对的形式存储元素，键可以是对象、函数等多种数据类型。
  2. 操作和访问元素：通过set()方法添加元素，get()访问元素，has()检查元素是否存在，以及delete()和clear()方法删除元素。
  3. 迭代和大小：Map支持迭代，可以使用for...of循环或forEach()方法按插入顺序访问元素，且通过size属性可以获取元素数量。

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

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

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

创建 JavaScript Map​

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

// 创建一个 Map
const map1 = new Map(); // 一个空的 map
console.log(map1); // Map {}

向 Map 插入项​

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

// 创建一个 set
let map1 = new Map();

// 插入键值对
map1.set("info", { name: "Jack", age: 26 });
console.log(map1); // Map {"info" => {name: "Jack", age: 26}}

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

// 使用对象键的 Map
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" });

// 访问 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" });

// 检查元素是否在 Set 中
console.log(map1.has("info")); // true

移除元素​

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

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

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

// 移除特定元素
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" });

// 移除所有元素
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");

// 遍历 Map
for (let [key, value] of map1) {
  console.log(key + "- " + value);
}

输出

name - Jack;
age - 27;

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

// 使用 forEach 方法()
let map1 = new Map();
map1.set("name", "Jack");
map1.set("age", "27");

// 遍历 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");

// 遍历 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");

// 遍历 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");

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

输出

name: Jack;
age: 27;

JavaScript Map 与 Object 的比较​

MapObject
Map 可以包含对象和其他数据类型作为键。对象只能包含字符串和符号作为键。
Map 可以直接遍历，并且可以访问它们的值。对象可以通过访问其键来遍历。
可以使用 size 属性确定 Map 的元素数量。需要手动确定对象的元素数量。
对于需要频繁添加或移除元素的程序，Map 表现更好。如果程序需要频繁添加或移除元素，对象的表现不佳。

JavaScript WeakMap​

WeakMap 与 Map 类似。然而，WeakMap 只能包含对象作为键。例如，

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

let obj = {};

// 向 WeakMap 添加对象（元素）
weakMap.set(obj, "hello");

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

当你尝试添加除对象之外的其他数据类型时，WeakMap 会抛出错误。例如，

const weakMap = new WeakMap();

// 向 WeakMap 添加字符串作为键
weakMap.set("obj", "hello");
// 抛出错误
// TypeError: 尝试在 WeakMap 中设置非对象键

WeakMap 方法​

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

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

let obj = {};

// 向 WeakMap 添加对象（元素）
weakMap.set(obj, "hello");

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

// 获取 WeakMap 的元素
console.log(weakMap.get(obj)); // hello

// 检查元素是否在 WeakMap 中
console.log(weakMap.has(obj)); // true

// 删除 WeakMap 的元素
console.log(weakMap.delete(obj)); // true

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

WeakMaps 不可迭代​

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

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

let obj = {};

// 向 WeakMap 添加对象（元素）
weakMap.set(obj, "hello");

// 遍历 WeakMap
for (let i of weakMap) {
  console.log(i); // TypeError
}

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

最后于 更新