ES6 new Map()基础使用

ES6 new Map()基础使用

const getmap = new Map([['aa',1],['bb',2]]);
getmap.set('aa',2);
console.log(getmap.get('aa')); //2
console.log(getmap.has('aa')); //是否存在aa
const map = Map.from(getmap);//深度拷贝map对象
map.set('aa',1);
console.log(map.get('aa'));//1
console.log(getmap.get('aa'));//2
console.log(getmap.delete('aa'));//删除aa这个元素

//一般用不上
map与array转换
const arr = Array.from(getmap);
console.log(arr)//[['bb',2]]
console.log(arr.flat());//['bb',2]
### 使用场景与示例 #### 存储键值对数据 Map 是一种存储键值对的数据结构,其中键可以是任意类型,而不仅仅是字符串或数字。这使得 Map 在需要使用复杂对象作为键的情况下非常有用。例如,当需要将 DOM 元素与特定数据关联时,可以使用元素本身作为键。 ```javascript const elementData = new Map(); const element = document.getElementById('myElement'); elementData.set(element, { clicks: 0 }); ``` #### 数据缓存 Map 可以用于实现简单的缓存机制,尤其是在需要根据键快速检索数据的情况下。由于 Map 提供了高效的增删改查操作,它非常适合用于缓存频繁访问的数据[^4]。 ```javascript const cache = new Map(); function getCachedData(key) { if (cache.has(key)) { return cache.get(key); } else { const data = fetchDataFromServer(key); // 假设这是从服务器获取数据的函数 cache.set(key, data); return data; } } ``` #### 私有对象属性 WeakMapMap 的一种变体,它可以用来存储对象的私有属性。由于 WeakMap 的键是弱引用,因此不会阻止垃圾回收器回收这些对象,这对于封装和保护数据非常有用[^4]。 ```javascript const privateProperties = new WeakMap(); class MyClass { constructor() { privateProperties.set(this, { secretValue: 42 }); } getSecretValue() { return privateProperties.get(this).secretValue; } } ``` #### 集合运算 虽然 Set 更常用于集合运算,但 Map 也可以通过其键或值来进行类似的集合操作。例如,可以通过 Map 的键来执行交集、并集等操作,从而处理更复杂的业务逻辑[^2]。 ```javascript const map1 = new Map([ [ 'a', 1 ], [ 'b', 2 ] ]); const map2 = new Map([ [ 'b', 3 ], [ 'c', 4 ] ]); // 合并两个 Map 并处理键冲突 const mergedMap = new Map([...map1, ...map2]); ``` #### 大数据量处理 当涉及到大量数据或者需要保持插入顺序时,Map 比传统的对象(Object)更加适合。此外,Map 支持迭代器,可以直接使用 `for...of` 循环进行遍历[^5]。 ```javascript const largeDataMap = new Map(); for (let i = 0; i < 100000; i++) { largeDataMap.set(`key${i}`, `value${i}`); } // 遍历 Map for (const [key, value] of largeDataMap) { console.log(`${key}: ${value}`); } ``` #### 用户信息管理 Map 可以用来存储用户信息,特别是当需要动态添加或更新用户数据时。这种情况下,Map 提供了比普通对象更灵活的操作方式。 ```javascript const users = new Map(); users.set('user1', { name: 'Alice', age: 30 }); users.set('user2', { name: 'Bob', age: 25 }); // 更新用户信息 users.get('user1').age = 31; // 删除用户 users.delete('user2'); ``` #### 结合其他数据结构实现复杂逻辑 Map 和 Set 可以结合使用来实现更复杂的业务逻辑。例如,可以利用 Map 来存储主数据,并用 Set 来跟踪某些特定的状态或条件。 ```javascript const userActivity = new Map(); userActivity.set('user1', new Set(['login', 'edit'])); userActivity.set('user2', new Set(['login'])); // 添加新的活动记录 userActivity.get('user1').add('logout'); // 检查是否存在某个活动 console.log(userActivity.get('user1').has('edit')); // true ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值