学学es6新增的Map的用法

前端

2023-11-12 06:20:47

认识Map：解锁以任何类型值作为键名的强大数据结构

前言

在学习JavaScript对象的旅程中，我们遇到了一个令人沮丧的问题：对象只能使用字符串作为键名。这限制了我们存储复杂数据的能力，例如具有对象作为键名的数据。为了解决这一问题，ES6引入了Map数据结构，让我们一探究竟！

Map概述

Map是一种革命性的数据结构，它打破了字符串键名的限制。你可以使用任何类型的值作为键名，包括对象、函数甚至符号。这使得Map非常适合存储复杂数据，因为你可以轻松地使用所需的数据作为键名来查找数据。

Map的用法

1. 创建Map

创建一个Map很容易！只需使用new Map()创建一个空Map，或者使用Map(iterable)创建一个包含键值对的Map，其中iterable可以是数组或对象。

// 创建一个空Map
const map = new Map();

// 创建一个包含键值对的Map
const map = new Map([
  ['name', 'John Doe'],
  ['age', 30],
  ['city', 'New York'],
]);

2. 向Map中添加键值对

要向Map中添加键值对，请使用map.set(key, value)方法，其中key是键名，value是键值。

map.set('name', 'Jane Doe');

3. 从Map中获取键值

要从Map中获取键值，请使用map.get(key)方法，其中key是键名。

const name = map.get('name'); // 返回 'Jane Doe'

4. 从Map中删除键值对

要从Map中删除键值对，请使用map.delete(key)方法，其中key是键名。

map.delete('name');

Map实例

1. 存储用户信息

Map非常适合存储用户信息，例如姓名、年龄和城市。

const userMap = new Map();
userMap.set('name', 'John Doe');
userMap.set('age', 30);
userMap.set('city', 'New York');

console.log(userMap.get('name')); // 输出：'John Doe'

2. 存储购物车信息

Map也可以用来存储购物车信息，包括商品名称、数量和价格。

const cartMap = new Map();
cartMap.set('item', 'iPhone 13');
cartMap.set('quantity', 1);
cartMap.set('price', 999.99);

console.log(cartMap.get('item')); // 输出：'iPhone 13'