ES6基本语法（三）——Set集合和Map集合

Set集合和拓展运算符

Set 集合

Set 是 JavaScript 中的一种数据结构，用于存储唯一值的集合。以下是 Set 集合的一些方法和操作的示例：

// 创建一个空 Set 集合
let fruits = new Set();

// 创建一个有初始值的 Set 集合
let fruits1 = new Set([1, 2, 3]);

// 添加元素
fruits.add(4);
fruits.add(5);

// 删除指定元素
fruits.delete(4);

// 检查 Set 是否包含某个元素
if (fruits.has(3)) {
    console.log('包含元素 3');
}

// 获取 Set 的大小
console.log(fruits.size); // 输出当前 Set 中的元素数量

// 清空 Set 集合
fruits.clear();

// 将 Set 集合转换为数组
let fruitsArray = Array.from(fruits);

// 使用 for-of 循环遍历 Set
for (let [key,value] of fruits) {
    console.log(key,value);
}

// 使用 forEach 方法遍历 Set
fruits.forEach((value, key) => {
    console.log(key, value);
});

// 将数组转换为 Set 实现数组去重
let uniqueFruits = [...new Set([1, 2, 2, 3, 4, 4, 5])];
console.log(uniqueFruits); // 输出: [1, 2, 3, 4, 5]

扩展运算符

扩展运算符（Spread Operator）允许你将一个可迭代的集合（如数组、字符串、Map、Set 等）展开成多个参数。以下是一些使用扩展运算符的例子：

// 将 Set 转化为数组
let set = new Set([1, 2, 3]);
let array = [...set];
console.log(array); // 输出: [1, 2, 3]

// 数组拼接
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combinedArr = [...arr1, ...arr2];
console.log(combinedArr); // 输出: [1, 2, 3, 4, 5, 6]

// 函数参数的展开
function sum(...args) {
    console.log(args);
}
sum(...[1, 2, 3]); // 输出: [1, 2, 3]

扩展运算符也可以用于复制数组或对象、合并数组等场景。

Map 集合

Map 是一种可增长的数据类型，它可以存储任意类型的键和值的映射关系。下面是 Map 集合的一些常用方法和操作：

// 创建一个空 Map 集合
let person = new Map();

// 创建一个有初始键值对的 Map 集合
let person1 = new Map([
    ['name', 'xiaoming'],
    ['age', 18]
]);

// 添加键值对
person.set('job', 'student');

// 如果添加相同的键，则会覆盖原来的值
person.set('name', 'programmer');

// 删除指定键
person.delete('job');

// 检查 Map 是否包含某个键
if (person.has('name')) {
    console.log('包含键 name');
}

// 获取 Map 的键值对数目
console.log(person.size); // 输出当前 Map 中的键值对数量

// 清空 Map 集合
person.clear();

// 将 Map 集合转换为数组
let mapToArray = Array.from(person);

// 使用扩展运算符将 Map 转换为数组
let mapAsArray = [...person1];

// 使用 for-of 循环遍历 Map 集合
for (let [key, value] of person1.entries()) {
    console.log(`${key}: ${value}`);
}

// 使用 forEach 遍历 Map 集合
person1.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

// Map 的解构语法
let mapDeconstructed = person1.entries();
let [firstKey, firstValue] = mapDeconstructed.next().value;
console.log(firstKey, firstValue); // 输出第一个键值对

在上面的代码中，entries()方法返回一个迭代器，它包含了 Map 集合中的每个元素，每个元素都是一个键值对的数组。使用 for...of 循环可以直接遍历这些键值对，而 forEach 方法则允许你对每个键值对执行回调函数。

Map 的解构语法允许你直接获取每个键值对中的键和值。例如，[firstKey, firstValue] = mapDeconstructed.next().value; 这行代码会将 mapDeconstructed 迭代器的第一个值解构成键和值。

解构语法

解构语法是 ES6 引入的一种方便的模式匹配机制，它允许你从数组或对象中提取数据并赋值给不同的变量。下面是一些解构的基本用法：

数组解构

// 从数组中解构出值
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出: 1 2 3

// 可以忽略某些位置的值
let [,, d] = [1, 2, 3];
console.log(d); // 输出: 3

// 提取部分元素
let [e, , f] = [1, 2, 3];
console.log(e, f); // 输出: 1 3

// 解构默认值
let [g = 7, h = 8] = [1];
console.log(g, h); // 输出: 1 8

对象解构

// 从对象中解构出属性
let obj = { p: 'perimeter', area: 'area' };
let { p, area } = obj;
console.log(p, area); // 输出: perimeter area

// 属性别名
let { x: width, y: height } = { x: 10, y: 20 };
console.log(width, height); // 输出: 10 20

// 默认值
let { foo = 100 } = { bar: 200 }; // 当foo不存在时，使用默认值
console.log(foo); // 输出: 100

函数参数解构

// 函数参数解构
function example({ x, y }) {
    console.log(x + y);
}
example({ x: 1, y: 2 }); // 调用函数时传入一个对象，x 和 y 会被解构出来

// 函数返回解构
function returnPoint() {
    return { x: 10, y: 20 };
}
let { x, y } = returnPoint();
console.log(x, y); // 输出: 10 20

字符串解构

let [a, b, c] = 'hello';
console.log(a, b, c); // 输出: h e l

Map 解构

let m = new Map();
m.set('one', 1);
m.set('two', 2);

let [pair] = m;
console.log(pair); // 输出: one 1

Set 解构

let s = new Set();
s.add('one').add('two');

let [first, second] = s;
console.log(first, second); // 输出: one two

函数参数中的默认值

function drawRectangle({ width = 100, height = 50 } = {}) {
    console.log(width, height);
}
drawRectangle({}); // 输出: 100 50
drawRectangle({ height: 100 }); // 输出: 100 100
drawRectangle({ width: 50, height: 200 }); // 输出: 50 200

解构是一种强大的特性，可以让你更容易地处理复杂的数据结构，减少代码量，提升开发效率。