前端祖传三件套JavaScript的ES6+之Set/Map

1. Set

Set是ES6+中的一个新类型，它类似于数组，但是可以确保没有重复的值。可以用来存储任意类型的数据，包括原始类型和对象。使用Set可以帮助我们更加方便地进行去重操作。

• 创建Set
  在ES6+中，我们可以使用new关键字来创建一个Set。例如：

const set = new Set();

• 这里创建了一个空的Set。
• 添加元素
  在ES6+中，我们可以使用add方法向Set中添加元素。例如：

const set = new Set();
set.add(1);
set.add('Hello');
set.add({ name: 'Alice', age: 20 });
console.log(set); // Set { 1, 'Hello', { name: 'Alice', age: 20 } }

• 这里向Set中添加了整数1、字符串'Hello'和一个对象{ name: 'Alice', age: 20 }。
• 删除元素
  在ES6+中，我们可以使用delete方法从Set中删除元素。例如：

const set = new Set([1, 2, 3]);
set.delete(1);
console.log(set); // Set { 2, 3 }

• 这里从Set中删除了整数1。
• 判断元素是否存在
  在ES6+中，我们可以使用has方法来判断Set中是否存在某个元素。例如：

const set = new Set(['apple', 'banana', 'orange']);
console.log(set.has('apple')); // true
console.log(set.has('watermelon')); // false

• 这里判断Set中是否存在字符串'apple'和'watermelon'。

2. Map

Map是ES6+中的另一个新类型，它类似于对象，但是键不仅仅限于字符串，可以是任意类型的数据。使用Map可以帮助我们更加方便地进行键值对操作。

• 创建Map
  在ES6+中，我们可以使用new关键字来创建一个Map。例如：

const map = new Map();

• 这里创建了一个空的Map。
• 添加元素
  在ES6+中，我们可以使用set方法向Map中添加元素。例如：

const map = new Map();
map.set('name', 'Alice');
map.set('age', 20);
map.set({ gender: 'female' }, 'gender');
console.log(map); // Map { 'name' => 'Alice', 'age' => 20, { gender: 'female' } => 'gender' }

• 这里向Map中添加了字符串'name'、整数20和一个对象{ gender: 'female' }。
• 获取元素
  在ES6+中，我们可以使用get方法来获取Map中的元素。例如：

const map = new Map();
map.set('name', 'Alice');
map.set('age', 20);
console.log(map.get('name')); // 'Alice'
console.log(map.get('gender')); // undefined

• 这里获取了Map中键为'name'和'gender'的值。
• 删除元素
  在ES6+中，我们可以使用delete方法从Map中删除元素。例如：

const map = new Map([
  ['name', 'Alice'],
  ['age', 20]
]);
map.delete('name');
console.log(map); // Map { 'age' => 20 }

• 这里从Map中删除了键为'name'的元素。

总结

通过本文的介绍，我们了解了JavaScript中的两个新类型Set和Map