返回

ES6 增强数组功能——10. Map 与 Set 的运用实例

前端

1.Map 数据结构

在 ES6 之前,JavaScript 中没有一个内置的数据结构可以高效地存储键值对。通常使用对象来模拟,但这存在一些缺点,例如对象键只能是字符串,且无法使用 for..of 遍历。

Map 数据结构弥补了对象的不足。它允许使用任何类型的值作为键,包括对象、数组和函数。此外,Map 可以使用 for..of 遍历,并且具有 size 属性,可以获取集合的大小。

实例:

const myMap = new Map();

myMap.set('name', 'John Doe');
myMap.set(123, 'John Doe');
myMap.set(true, 'John Doe');

console.log(myMap.get('name')); // "John Doe"
console.log(myMap.get(123)); // "John Doe"
console.log(myMap.get(true)); // "John Doe"

console.log(myMap.size); // 3

for (const [key, value] of myMap) {
  console.log(key, value);
}

2.Set 数据结构

Set 数据结构允许存储无重复项的集合。它提供了一系列方法来操作集合中的项,包括添加、删除、查找和求交集、并集等。

实例:

const mySet = new Set();

mySet.add('John Doe');
mySet.add('Jane Doe');
mySet.add('John Doe'); // 不会被添加到集合中

console.log(mySet.has('John Doe')); // true
console.log(mySet.size); // 2

for (const item of mySet) {
  console.log(item);
}

const intersection = new Set(['John Doe', 'Jane Doe']);
const union = new Set([...mySet, ...intersection]);

console.log(intersection); // Set { "John Doe", "Jane Doe" }
console.log(union); // Set { "John Doe", "Jane Doe" }

3.Map 与 Set 的实际应用

3.1 对象查找

Map 数据结构非常适合对象查找。例如,以下代码使用 Map 来存储用户信息,并通过用户名查找用户信息:

const users = new Map();

users.set('johndoe', {
  name: 'John Doe',
  email: 'johndoe@example.com'
});

users.set('janedoe', {
  name: 'Jane Doe',
  email: 'janedoe@example.com'
});

const user = users.get('johndoe');

console.log(user); // { name: 'John Doe', email: 'johndoe@example.com' }

3.2 统计单词出现次数

Set 数据结构非常适合统计单词出现次数。例如,以下代码使用 Set 来统计文本中单词的出现次数:

const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Aenean velit arcu, ullamcorper in ligula eget, vehicula egestas nulla. Sed ut imperdiet massa.';

const words = new Set(text.split(' '));

console.log(words.size); // 19

3.3 去重

Set 数据结构可以用来对数组去重。例如,以下代码使用 Set 来对数组去重:

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueNumbers = new Set(numbers);

console.log(uniqueNumbers); // Set { 1, 2, 3, 4, 5 }

总结

Map 和 Set 是 ES6 中非常有用的数据结构。它们可以用于各种应用场景,例如对象查找、统计单词出现次数和数组去重。使用 Map 和 Set 可以提高 JavaScript 开发效率,并编写出更简洁、更优雅的代码。