Map和set

Map

Map是一组键值对的结构,具有极快的查找速度。

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。

如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。用JavaScript写一个Map如下:

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化Map需要一个二维数组,或者直接初始化一个空MapMap具有以下方法:

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Set

SetMap类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。

要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在Set中自动被过滤:

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

注意数字3和字符串'3'是不同的元素。

通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

通过delete(key)方法可以删除元素:

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

小结

MapSet是ES6标准新增的数据类型,请根据浏览器的支持情况决定是否要使用。



### ES6中MapSet的区别与使用方法 #### 1. 数据结构与存储方式 Map 是一种键值对的集合,任何类型的值(包括对象)都可以作为键或值。与对象不同的是,Map 的键是有序的,所以当你遍历它的时候,会按照插入顺序来[^3]。 而 Set 是一种集合数据结构,其中的元素都是唯一的,不允许重复。Set 可以通过数组或其他可迭代对象创建,并且支持添加、删除、查找等操作[^4]。 #### 2. 创建方式 - **Map**:可以通过空构造函数创建一个空的 Map,或者通过传入一个二维数组来初始化。 ```javascript let myMap = new Map(); // 空 Map let myMapWithValues = new Map([['key1', 'value1'], ['key2', 'value2']]); ``` - **Set**:可以通过空构造函数创建一个空的 Set,或者通过传入一个数组来初始化。 ```javascript let mySet = new Set(); // 空 Set let mySetWithValues = new Set([1, 2, 3]); ``` #### 3. 添加元素 - **Map**:使用 `set` 方法添加键值对。 ```javascript myMap.set('name', '张三'); myMap.set(1, 'one'); ``` - **Set**:使用 `add` 方法添加元素。 ```javascript mySet.add(1); mySet.add('string'); ``` #### 4. 删除元素 - **Map**:使用 `delete` 方法删除指定键的键值对。 ```javascript myMap.delete('name'); // 删除键为 'name' 的键值对 ``` - **Set**:使用 `delete` 方法删除指定元素。 ```javascript mySet.delete(1); // 删除值为 1 的元素 ``` #### 5. 清空所有数据 - **Map**:使用 `clear` 方法清空所有键值对。 ```javascript myMap.clear(); // 移除所有键值对 ``` - **Set**:使用 `clear` 方法清空所有元素。 ```javascript mySet.clear(); // 移除所有元素 ``` #### 6. 获取大小 - **Map**:使用 `size` 属性获取键值对的数量。 ```javascript console.log(myMap.size); // 输出:2 ``` - **Set**:使用 `size` 属性获取元素的数量。 ```javascript console.log(mySet.size); // 输出:3 ``` #### 7. 检查是否存在 - **Map**:使用 `has` 方法检查某个键是否存在。 ```javascript console.log(myMap.has('name')); // 输出:false ``` - **Set**:使用 `has` 方法检查某个元素是否存在。 ```javascript console.log(mySet.has(1)); // 输出:true ``` #### 8. 遍历 - **Map**:可以通过多种方式进行遍历,例如 `for...of` 循环或 `forEach` 方法。 ```javascript for (let [key, value] of myMap) { console.log(key, value); } myMap.forEach((value, key) => { console.log(key, value); }); ``` - **Set**:同样可以通过 `for...of` 循环或 `forEach` 方法进行遍历。 ```javascript for (let value of mySet) { console.log(value); } mySet.forEach(value => { console.log(value); }); ``` ### 总结 Map Set 在 ES6 中都是非常有用的数据结构,但它们的用途有所不同。Map 更适合存储键值对,尤其是当键需要是复杂类型时;而 Set 则更适合存储唯一值的集合[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值