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

ES6（ECMAScript 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，否则 false	`set.delete(1)`
`has(value)`	判断元素是否存在，返回布尔值	`set.has(2)`
`clear()`	清空所有元素	`set.clear()`
`size`	属性，返回元素个数	`set.size`

复制代码

const 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);   // 0

3. 遍历 Set

Set 本身是可迭代的，支持多种遍历方式：

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, I'm ${this.name}`);
  },
  // 增强写法
  introduce2() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

obj.introduce1(); // Hello, I'm kunkun
obj.introduce2(); // Hello, I'm 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 是存储唯一值的集合，提供了高效的去重和集合运算能力，配合扩展运算符可以轻松实现数组去重、并集、交集等操作。
对象增强写法 让对象定义更简洁，减少了重复代码，提升了可读性，是日常开发及竞赛中常用的语法糖。