零基础快速入门前端ES6 核心特性详解：Set 数据结构与对象增强写法(可用于备赛蓝桥杯Web应用开发)

ES6ECMAScript 2015为 JavaScript 带来了诸多实用的新特性其中Set数据结构与对象增强写法在日常开发及竞赛如蓝桥杯 Web 赛道中应用广泛。本文将从基础用法到进阶技巧系统梳理这两大知识点并给出代码实例与汇总表格助你快速掌握并灵活运用。一、Set唯一值的集合Set是 ES6 新增的一种数据结构它类似于数组但成员的值都是唯一的没有重复的值。这一特性在数据去重、集合运算等场景中极为实用。1. 创建 Set通过new Set()创建可以传入一个可迭代对象如数组作为初始值。// 空 Set const set1 new Set(); // 通过数组初始化 const arr [1, 2, 2, 3, NaN, NaN, undefined, undefined]; const set2 new Set(arr); console.log(set2); // Set(5) {1, 2, 3, NaN, undefined}注意NaN在Set中被视为相同值严格相等因此只会保留一个。2. 常用方法方法描述示例add(value)添加元素返回 Set 本身可链式调用set.add(1).add(2)delete(value)删除元素成功返回 true否则 falseset.delete(1)has(value)判断元素是否存在返回布尔值set.has(2)clear()清空所有元素set.clear()size属性返回元素个数set.sizeconst set new Set([1, 2, 3]); set.add(4); set.delete(2); console.log(set.has(3)); // true console.log(set.size); // 3 set.clear(); console.log(set.size); // 03. 遍历 SetSet 本身是可迭代的支持多种遍历方式forEach与数组类似回调函数接收 value、key与 value 相同和 Set 本身。for...of直接迭代元素。转换为数组使用Array.from或扩展运算符[...set]。const set new Set([a, b, c]); // forEach set.forEach(value console.log(value)); // for...of for (let item of set) { console.log(item); } // 转为数组 const arr1 Array.from(set); const arr2 [...set]; console.log(arr1, arr2); // [a,b,c] [a,b,c]4. 实际应用场景数组去重const arr [1, 2, 2, 3, 3, 4]; const uniqueArr [...new Set(arr)]; console.log(uniqueArr); // [1,2,3,4]集合运算并集、交集、差集const setA new Set([1, 2, 3]); const setB new Set([2, 3, 4]); // 并集 const union new Set([...setA, ...setB]); console.log(union); // Set {1,2,3,4} // 交集 const intersection new Set([...setA].filter(x setB.has(x))); console.log(intersection); // Set {2,3} // 差集 (A - B) const difference new Set([...setA].filter(x !setB.has(x))); console.log(difference); // Set {1}学校门禁系统去重统计// 记录每日进出校的学生 ID使用 Set 自动去重 const todayVisitors new Set(); todayVisitors.add(S001); todayVisitors.add(S002); todayVisitors.add(S001); // 重复不会被添加 console.log(todayVisitors.size); // 2二、ES6 对象增强写法对象增强写法让对象定义更加简洁包括属性简写、方法简写以及计算属性名。1. 属性简写当对象的属性名与变量名相同时可以省略冒号和值。const name ggx; const skill rap sing; // 传统写法 const personOld { name: name, skill: skill, age: 18 }; // 增强写法 const personNew { name, // 等价于 name: name skill, // 等价于 skill: skill age: 18 }; console.log(personNew); // { name: ggx, skill: rap sing, age: 18 }2. 方法简写对象中的函数可以省略function关键字和冒号。const obj { name: kunkun, // 传统方法 introduce1: function() { console.log(Hello, Im ${this.name}); }, // 增强写法 introduce2() { console.log(Hello, Im ${this.name}); } }; obj.introduce1(); // Hello, Im kunkun obj.introduce2(); // Hello, Im kunkun注意箭头函数不适合作为方法简写因为箭头函数没有自己的this会捕获外层作用域的this。3. 计算属性名允许在对象字面量中使用表达式作为属性名用方括号[]包裹。const key age; const obj { [key]: 25, [skill Level]: expert }; console.log(obj); // { age: 25, skillLevel: expert }4. 对象增强写法汇总表特性说明示例代码属性简写变量名与属性名相同时可省略键值对{ name, age }方法简写省略function关键字{ sayHi() { ... } }计算属性名使用表达式作为属性名{ [variable]: value }解构赋值补充快速提取对象属性const { name, age } obj三、蓝桥杯 Web 考点结合蓝桥杯 Web 赛道重点考察前端开发能力其中 ES6 新特性是高频考点。以下结合Set和对象增强写法模拟两道典型题目。1. 数组去重Set 应用题目描述实现一个函数uniqueArray(arr)返回去重后的新数组。function uniqueArray(arr) { return [...new Set(arr)]; } console.log(uniqueArray([1,1,2,3,2])); // [1,2,3]考点Set自动去重 扩展运算符。2. 对象数据组装对象增强写法题目描述从后端获取用户信息需要构造一个用于显示的对象包含姓名、技能和默认年龄。要求使用 ES6 增强写法const name ggx; const skill rap sing; // 使用增强写法构建对象 const userInfo { name, skill, age: 18, show() { return ${this.name} 的年龄是 ${this.age}技能是 ${this.skill}; } }; console.log(userInfo.show()); // ggx 的年龄是 18技能是 rap sing考点属性简写、方法简写、模板字符串。总结Set是存储唯一值的集合提供了高效的去重和集合运算能力配合扩展运算符可以轻松实现数组去重、并集、交集等操作。对象增强写法让对象定义更简洁减少了重复代码提升了可读性是日常开发及竞赛中常用的语法糖。