阅读量:2
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 解构是一种强大的特性，可以让你更容易地处理复杂的数据结构，减少代码量，提升开发效率。
