正文

学会用JS轻松创建Map并添加各种数据类型：从基础入门到实际应用案例

/0 浏览量
0529

在JavaScript中，Map 对象保存键值对，并且能够记住键的原始插入顺序。相比于传统的对象字面量，Map 提供了更多的灵活性和便利性。本篇文章将带领你从基础入门，了解如何创建和使用 Map，并展示一些实际应用案例。

基础入门

创建Map

要创建一个 Map 对象，可以使用 new Map() 构造函数。以下是一个简单的例子：

let map = new Map();

添加键值对

向 Map 中添加键值对可以使用 set() 方法。这个方法接受两个参数：第一个是键，第二个是值。例如：

map.set('name', 'Alice');
map.set(1, 'one');
map.set(true, 'true');

现在，map 对象包含以下键值对：

  • ‘name’ -> ‘Alice’
  • 1 -> ‘one’
  • true -> ‘true’

获取值

要获取 Map 中的值，可以使用 get() 方法。例如：

console.log(map.get('name')); // 输出: Alice
console.log(map.get(1)); // 输出: one
console.log(map.get(true)); // 输出: true

删除键值对

要从 Map 中删除键值对，可以使用 delete() 方法。例如：

map.delete(1);

现在，map 对象中不再包含键值对 1 -> ‘one’。

检查键值对是否存在

要检查 Map 中是否存在某个键值对，可以使用 has() 方法。例如：

console.log(map.has('name')); // 输出: true
console.log(map.has(1)); // 输出: false

遍历Map

要遍历 Map 中的所有键值对，可以使用 for...of 循环。以下是一个例子：

for (let [key, value] of map) {
  console.log(key + ' -> ' + value);
}

输出结果为：

name -> Alice
true -> true

实际应用案例

案例1：存储用户信息

假设我们有一个用户信息存储系统，可以使用 Map 来存储用户的姓名和年龄：

let userInfo = new Map();
userInfo.set('Alice', { age: 25, gender: 'female' });
userInfo.set('Bob', { age: 30, gender: 'male' });

console.log(userInfo.get('Alice')); // 输出: { age: 25, gender: 'female' }

案例2：处理查询参数

当处理查询参数时，可以使用 Map 来存储参数名和值：

function parseQuery(queryString) {
  let query = {};
  let params = queryString.split('&');
  for (let param of params) {
    let [key, value] = param.split('=');
    query[decodeURIComponent(key)] = decodeURIComponent(value);
  }
  return new Map(Object.entries(query));
}

let query = parseQuery('name=Alice&age=25');
console.log(query.get('name')); // 输出: Alice
console.log(query.get('age')); // 输出: 25

通过以上两个案例，我们可以看到 Map 在实际应用中的强大功能。

总结

在JavaScript中，Map 对象是一个非常有用的数据结构，它可以帮助我们更方便地存储和操作键值对。通过本文的学习，你应该已经掌握了如何创建和使用 Map，并了解了其在实际应用中的案例。希望这篇文章能够帮助你更好地理解和应用 Map。

-- 展开阅读全文 --