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 

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