ES6指的是ECMAScript 6,也被称为ES2015。它是JavaScript的一种版本,是ECMAScript标准的第六个版本,于2015年发布。ECMAScript是JavaScript的规范,定义了语言的核心特性和行为。ES6引入了许多新的语法特性和功能,以使JavaScript代码更加现代化、清晰和强大。 在此专栏中,我们会持续更新有关于ES6的新特性,感兴趣的小伙伴们可以订阅一下~
前言
今天我们来聊聊ES6新特性中的Set 和 Map
,Set
和 Map
是 ECMAScript 6(ES6)引入的两种新的数据结构,Set
和 Map
提供了更灵活、更强大的数据结构,允许开发者更方便地处理一组唯一的值或键值对。在某些场景下,使用 Set
和 Map
可以带来更高效的数据操作,因为它们是为特定目的而设计的数据结构,而不像普通对象那样有可能包含额外的原型链属性。
Set
Set
是 ECMAScript 6(ES6)中引入的一种数据结构,用于存储一组唯一的值,即不允许重复。它是一种集合类型,与数组类似,但是没有顺序概念。
创建 Set:
可以使用 new Set()
构造函数创建一个空的 Set
,或者通过传递一个可迭代对象(如数组)来创建包含初始值的 Set
。
// 创建空的 Set const mySet = new Set(); // 创建包含初始值的 Set const initialSet = new Set([1, 2, 3, 4, 5]);
Set 的基本操作:
- 添加值: 使用
add
方法向Set
中添加新的值。
mySet.add(6);
- 删除值: 使用
delete
方法从Set
中删除指定的值。
mySet.delete(2);
- 检查是否存在: 使用
has
方法检查Set
中是否存在某个值。
console.log(mySet.has(3)); // 输出 true
- 获取 Set 的大小: 使用
size
属性获取Set
的大小(包含的唯一值的数量)。
console.log(mySet.size); // 输出当前 Set 的大小
使用 Set 解决数组去重问题:
由于 Set
中的值是唯一的,可以利用这个特性轻松实现数组去重。
const array = [1, 2, 3, 3, 4, 5, 5]; // 使用 Set 进行数组去重 const uniqueValues = [new Set(array)]; console.log(uniqueValues); // 输出: [1, 2, 3, 4, 5]
这里的步骤是:
- 创建一个
Set
对象,利用Set
的唯一性会忽略重复值的特性。 - 将数组的值通过解构赋值传递给
Set
构造函数,这样Set
内部会自动去重。 - 最后,使用扩展运算符 (
...
) 将Set
转回数组。
这样,得到的 uniqueValues
数组就是去重后的结果。
请注意,这种方法去重的结果是保持原数组中的元素顺序的。
set迭代器属性
Set
是可迭代的,这意味着你可以使用一些迭代的方式来遍历 Set
中的元素。以下是 Set
的迭代属性和方法:
1. 使用 for...of
循环:
const mySet = new Set([1, 2, 3, 4, 5]); for (const value of mySet) { console.log(value); }
这会遍历 Set
中的每一个元素,输出:
1 2 3 4 5
2. 使用 forEach
方法:
const mySet = new Set([1, 2, 3, 4, 5]); mySet.forEach(value => { console.log(value); });
这也会遍历 Set
中的每一个元素,输出同样的结果。
3. 使用 entries()
方法:
entries()
方法返回一个包含 [value, value]
对的迭代器对象,其中 value
是 Set
中的元素。
const mySet = new Set([1, 2, 3, 4, 5]); for (const entry of mySet.entries()) { console.log(entry); }
这将输出:
[1, 1] [2, 2] [3, 3] [4, 4] [5, 5]
在 Set
中,键和值相同,所以每个条目都是 [value, value]
。
4. 使用 values()
方法:
values()
方法返回一个包含 Set
中值的迭代器对象。
const mySet = new Set([1, 2, 3, 4, 5]); for (const value of mySet.values()) { console.log(value); }
这将输出:
1 2 3 4 5
5. 使用 keys()
方法:
keys()
方法也返回一个包含 Set
中值的迭代器对象,与 values()
方法相同。
const mySet = new Set([1, 2, 3, 4, 5]); for (const key of mySet.keys()) { console.log(key); }
这同样会输出:
1 2 3 4 5
在 Set
中,键和值是相同的。
Map
Map
是 ECMAScript 6(ES6)中引入的一种键值对的集合,用于存储任意类型的键和值之间的映射关系。以下是关于 Map
的全面介绍:
创建 Map:
可以使用 new Map()
构造函数创建一个空的 Map
,或者通过传递一个包含键值对的数组或其他可迭代对象来创建带有初始值的 Map
。
// 创建空的 Map const myMap = new Map(); // 创建包含初始值的 Map const initialMap = new Map([ ['key1', 'value1'], ['key2', 'value2'], // ... ]);
Map 的基本操作:
- 添加键值对: 使用
set
方法向Map
中添加新的键值对。
myMap.set('key3', 'value3');
- 获取值: 使用
get
方法获取指定键对应的值。
console.log(myMap.get('key1')); // 输出 'value1'
- 检查键是否存在: 使用
has
方法检查Map
中是否存在某个键。
console.log(myMap.has('key2')); // 输出 true
- 删除键值对: 使用
delete
方法从Map
中删除指定的键值对。
myMap.delete('key1');
- 清空 Map: 使用
clear
方法清空Map
中的所有键值对。
myMap.clear();
Map可以用任意数据类型做 key 的一种对象
Map
允许使用任意类型的值作为键,包括基本数据类型(如字符串、数字、布尔值)、对象、函数等。这是 Map
相对于普通对象的一个重要区别。在普通对象中,键会被自动转换为字符串,而在 Map
中,键的比较是严格相等的,不会发生类型转换。
const myMap = new Map(); // 使用字符串作为键 myMap.set('stringKey', 'This is a string key'); // 使用数字作为键 myMap.set(42, 'This is a number key'); // 使用布尔值作为键 myMap.set(true, 'This is a boolean key'); // 使用对象作为键 const objKey = { key: 'objectKey' }; myMap.set(objKey, 'This is an object key'); // 使用函数作为键 const functionKey = function() {}; myMap.set(functionKey, 'This is a function key'); // 输出 Map 中的键值对 for (const [key, value] of myMap) { console.log(key, value); }
在这个例子中,myMap
包含了不同类型的键,而且每个键都对应一个值。使用 Map
的这种灵活性使得它非常适合在需要根据不同类型的键检索值的场景,而不受键类型转换的影响。
Map 的迭代:
Map
提供了多种迭代的方法,允许遍历键、值或键值对:
- 遍历键值对:
for (const [key, value] of myMap) { console.log(key, value); }
- 遍历键:
for (const key of myMap.keys()) { console.log(key); }
- 遍历值:
for (const value of myMap.values()) { console.log(value); }
总结
Map 的特点:
- 键可以是任意类型: 与对象不同,
Map
的键可以是任意类型,包括基本数据类型、对象、函数等。 - 保持插入顺序:
Map
保持插入顺序,即键值对的顺序与插入的顺序一致。 - 可迭代:
Map
是可迭代的,可以使用for...of
循环遍历。 - 动态变化:
Map
的大小可以动态变化,可以随时添加或删除键值对。
使用场景:
- 存储和获取键值对,适用于需要根据键来检索值的场景。
- 需要使用非字符串键的情况,例如对象、函数等。
- 保持键值对的顺序很重要的场景。
Set 的特点:
- 唯一性:
Set
中的值是唯一的,重复的值会被忽略。 - 无序性:
Set
中的值是无序的,不具备索引和顺序概念。 - 可迭代性:
Set
是可迭代的,可以使用for...of
循环遍历。 - 大小可动态变化: 可以随时向
Set
中添加或删除值,其大小会动态变化。
使用场景:
- 存储一组唯一的值,不关心顺序。
- 进行数组去重。
- 判断值是否存在。