JavaScript中的new Map()

SRRZL • 2025-02-05 13:05 • 编程

一、Map

Map是JavaScript中的一种可迭代的键值对容器，其中每个键和值可以是任何类型。在ES6中被提出，它可以用来存储和操作键值对数据。

const myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");

上面代码创建了一个空的Map，然后使用set()方法添加了三个键值对。可以使用size属性获取其中的键值对数量。

console.log(myMap.size); // 3

二、Map的基本操作

1. set()

set()方法用于添加键值对到Map中。

myMap.set("key4", "value4");
console.log(myMap); // Map(4) {"key1" => "value1", "key2" => "value2", "key3" => "value3", "key4" => "value4"}

2. get()

get()方法用于获取指定键的值。

console.log(myMap.get("key2")); // "value2"

3. has()

has()方法用于检测Map中是否存在指定的键。

console.log(myMap.has("key5")); // false
console.log(myMap.has("key3")); // true

4. delete()

delete()方法用于删除Map中指定的键值对。

myMap.delete("key4");
console.log(myMap); // Map(3) {"key1" => "value1", "key2" => "value2", "key3" => "value3"}

5. clear()

clear()方法用于清空Map中的所有键值对。

myMap.clear();
console.log(myMap.size); // 0

三、Map的循环迭代

通过Map的entries()、keys()和values()方法，可以分别获取Map中所有键值对、所有键、所有值。

const myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");

// 迭代所有键值对
for (let [key, value] of myMap.entries()) {
  console.log(`${key}: ${value}`);
}

// 迭代所有键
for (let key of myMap.keys()) {
  console.log(key);
}

// 迭代所有值
for (let value of myMap.values()) {
  console.log(value);
}

四、Map的应用

1. 缓存

Map可以用作缓存来提高代码的性能，避免多次计算同一个值。

const cache = new Map();

function fibonacci(num) {
  if (cache.has(num)) {
    return cache.get(num);
  }
  if (num <= 1) {
    return 1;
  }
  const result = fibonacci(num - 1) + fibonacci(num - 2);
  cache.set(num, result);
  return result;
}

上面代码是使用Map实现斐波那契数列函数节约计算次数的例子，可以看到，在每次调用函数时，先检查Map中是否保存了该数字对应的斐波那契数值，如果有，则直接返回该值，否则计算并保存在Map中。

2. 构造函数初始值

可以使用Map作为构造函数的初始值，简化代码。

const myMap = new Map([
    ["key1", "value1"],
    ["key2", "value2"],
    ["key3", "value3"]
]);

上面代码创建了一个含有三个键值对的Map，并将其作为构造函数的初始值。

3. 对象属性映射

Map可以像对象一样使用键值对存储属性和值，但键不仅限于字符串，可以是任何类型，也不限于使用点号。

const myObject = {};

myObject.prop1 = "value1";
myObject.prop2 = "value2";
myObject.prop3 = "value3";

console.log(myObject.prop1); // "value1"

const myMap = new Map();

myMap.set("prop1", "value1");
myMap.set("prop2", "value2");
myMap.set("prop3", "value3");

console.log(myMap.get("prop1")); // "value1"

上面代码比较了使用对象属性和Map的键值对分别存储属性和值的方式。

五、总结

JavaScript中的new Map()提供了一种可迭代的键值对容器，可以用来存储和操作键值对数据。Map可以进行添加、查询、检测、删除和清空操作，还可以循环迭代所有键值对、键和值等。Map可以应用于缓存、构造函数初始值、对象属性映射等方面，使代码更加简洁、优雅和高效。

原创文章，作者：SRRZL，如若转载，请注明出处：https://www.506064.com/n/334160.html