es6新特性功能介绍（四）

ES6 进阶特性实战：Set/Map 集合 + Class 类 从入门到精通

前言

在前端 ES6 核心特性中，Set/Map 集合 解决了传统数组、对象的功能短板，Class 类 让 JavaScript 面向对象编程更规范、更易读。这四大特性是现代前端开发、框架源码、大厂面试的高频必考知识点。

本文基于实战案例，从语法、应用、场景全方位拆解Set 集合、Map 集合、Class 类三大 ES6 进阶特性，代码可直接运行，新手也能快速吃透，建议收藏！

---

一、Set 集合（自动去重的有序集合）

1. 核心概念

ES6 提供的新数据结构，类似于数组，但成员值唯一、自动去重 ； 实现了iterator接口，支持扩展运算符 (...)和for...of遍历。

2. 核心 API（必背）

1. size：返回元素个数
2. add()：添加元素，返回集合本身
3. delete()：删除元素，返回布尔值
4. has()：检测是否包含元素
5. clear()：清空集合

3. 基础使用

javascript

运行

// 创建空Set
let s = new Set();
console.log(s, typeof s); // Set(0) {}  'object'

// 创建带初始值的Set（自动去重）
let s1 = new Set(["大哥", "二哥", "三哥", "四哥", "三哥"]);
console.log(s1); // 自动去掉重复的"三哥"

// 1. size 获取长度
console.log(s1.size); // 4

// 2. add 添加元素
s1.add("大姐");
console.log(s1);

// 3. delete 删除元素
let result = s1.delete("三哥");
console.log(result); // true
console.log(s1);

// 4. has 检测是否存在
let r1 = s1.has("二姐");
console.log(r1); // false

// 5. clear 清空
s1.clear();
console.log(s1); // Set(0) {}

4. Set 三大实战场景（开发高频）

javascript

运行

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let arr2 = [3, 4, 5, 6, 5, 4, 3];

// 1. 数组去重（最常用）
let s1 = new Set(arr);
console.log([...s1]); // [1,2,3,4,5]

// 2. 求交集（两个数组都有的元素）
let intersection = [...new Set(arr)].filter(item => new Set(arr2).has(item));
console.log(intersection); // [3,4,5]

// 3. 求并集（合并+去重）
let union = [...new Set([...arr, ...arr2])];
console.log(union); // [1,2,3,4,5,6]

// 4. 求差集（arr有、arr2没有）
let difference = [...new Set(arr)].filter(item => !new Set(arr2).has(item));
console.log(difference); // [1,2]

---

二、Map 集合（万能键值对集合）

1. 核心概念

ES6 提供的键值对结构，类似于对象，但键可以是任意类型（字符串、数字、对象、Symbol 等）； 同样支持遍历、扩展运算符，弥补了传统对象只能用字符串作为键的缺陷。

2. 核心 API

示例：

const map = new Map();
// 添加新键值对
map.set('language', 'JavaScript');
// 修改已有键值对
map.set('language', 'TypeScript');
// 链式调用
map.set('a', 1).set('b', 2);

get(key) 方法

根据键获取对应的值：

示例：

const map = new Map();
map.set('price', 99);
console.log(map.get('price')); // 输出：99
console.log(map.get('discount')); // 输出：undefined

has(key) 方法

检查 Map 中是否包含指定的键：

示例：

const map = new Map([['id', 123]]);
console.log(map.has('id')); // true
console.log(map.has('name')); // false

clear() 方法

清空 Map 中的所有键值对：

示例：

const map = new Map();
map.set('x', 10).set('y', 20);
console.log(map.size); // 2
map.clear();
console.log(map.size); // 0

应用场景：

Map 常用方法详解

size 属性

size 是 Map 对象的一个属性，返回 Map 中键值对的数量。这个属性是只读的，不能直接修改。使用示例：

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
console.log(map.size); // 输出：2

set(key, value) 方法

用于向 Map 中添加或修改键值对：
2. 如果键不存在，会添加新的键值对
3. 如果键已存在，会更新对应的值
4. 支持链式调用
5. 键可以是任意类型的值（对象、函数等）
6. 如果键存在，返回对应的值
7. 如果键不存在，返回 undefined
8. 查找速度高效（接近 O(1) 时间复杂度）
9. 返回布尔值（true/false）
10. 比先 get 再判断 undefined 更直观
11. 无返回值（返回 undefined）
12. 执行后 size 变为 0
13. 比新建 Map 对象更高效（重用现有对象）
14. 缓存系统实现
15. 数据临时存储
16. 替代对象实现更灵活的键类型
17. 需要频繁增删查操作的场景

3. 基础使用

javascript

运行

// 创建空Map
let m = new Map();

// 创建带初始值的Map
let m2 = new Map([
  ['name', '大喇叭'],
  ['slogon', '只有掌握真正的技术，才能拥有永远的财富']
]);

// 1. size 获取长度
console.log(m2.size); // 2

// 2. set 添加元素
m.set("皇帝", "大哥");
m.set("丞相", "二哥");
console.log(m);

// 3. get 获取值
console.log(m.get("皇帝")); // 大哥

// 4. has 检测
console.log(m.has("皇帝")); // true

// 5. clear 清空
m.clear();
console.log(m); // Map(0) {}

---

三、Class 类（ES6 面向对象标准语法）

1. 核心概念

ES6 的 class 实际上是基于 JavaScript 原型继承的语法糖，它让 JavaScript 的面向对象编程风格更接近传统语言如 Java/C++，使代码结构更加清晰易读。通过 class 语法，开发者可以更直观地定义类和实现继承关系。

以下是 class 语法的核心关键字及其用法：

1. class

   用于声明一个类，类名通常采用大驼峰命名法。

   示例：

   class Person {
     // 类定义
   }

2. constructor

   类的构造函数，用于初始化实例属性。在通过 new 创建对象时自动调用。

   示例：

   class Person {
     constructor(name, age) {
       this.name = name;
       this.age = age;
     }
   }
   const person = new Person('Alice', 25);

3. extends

   用于实现类继承，建立子类和父类之间的关系。子类会继承父类的属性和方法。

   示例：

   class Student extends Person {
     constructor(name, age, grade) {
       super(name, age); // 调用父类构造函数
       this.grade = grade;
     }
   }

4. super

   用于在子类中调用父类的构造函数或方法。在构造函数中必须先调用 super() 才能使用 this。

   示例：

   class Student extends Person {
     study() {
       console.log(`${this.name} is studying.`);
     }
   }

5. static

   定义静态方法或属性，属于类本身而非实例，通过类名直接调用。

   示例：

   class MathUtils {
     static add(a, b) {
       return a + b;
     }
   }
   console.log(MathUtils.add(1, 2)); // 3

应用场景

• 封装业务逻辑，提高代码复用性
• 实现组件化开发（如 React 类组件）
• 构建复杂的数据模型

与传统原型链的区别

虽然 class 语法更直观，但底层仍基于原型链。例如，class 中的方法实际是定义在原型上的：

class Person {
  sayHello() {
    console.log('Hello');
  }
}
// 等同于
function Person() {}
Person.prototype.sayHello = function() {
  console.log('Hello');
}

2. 基础用法：定义类 + 实例化

javascript

运行

class Phone {
  // 构造方法：初始化属性
  constructor(brand, price) {
    this.brand = brand;
    this.price = price;
  }

  // 成员方法
  call() {
    console.log("我可以打电话！");
  }
}

// 实例化对象
let HuaWei = new Phone("华为", 5999);
HuaWei.call(); // 我可以打电话！
console.log(HuaWei); // Phone { brand:'华为', price:5999 }

3. 静态成员（static）

静态属性 / 方法属于类，不属于实例，直接通过类名调用。

javascript

运行

class Phone {
  // 静态属性
  static name = "手机";
  // 静态方法
  static change() {
    console.log("我可以改变世界！");
  }
}

let nokia = new Phone();
console.log(nokia.name); // undefined（实例无法访问静态属性）
console.log(Phone.name); // 手机
Phone.change(); // 我可以改变世界！

4. 类继承（extends + super）

子类继承父类，用super()调用父类构造方法。

javascript

运行

// 父类
class Phone {
  constructor(brand, price) {
    this.brand = brand;
    this.price = price;
  }
  call() {
    console.log("我可以打电话！");
  }
}

// 子类：智能手机
class SmartPhone extends Phone {
  constructor(brand, price, color, size) {
    super(brand, price); // 必须调用父类构造器
    this.color = color;
    this.size = size;
  }

  photo() {
    console.log("我可以拍照！");
  }
  game() {
    console.log("我可以玩游戏！");
  }
}

const chuizi = new SmartPhone("小米", 1999, "黑色", "5.15inch");
chuizi.call(); // 继承父类方法
chuizi.photo();
chuizi.game();

5. 方法重写（子类覆盖父类方法）

子类定义同名方法会直接覆盖父类方法：

javascript

运行

class SmartPhone extends Phone {
  // 重写 call 方法
  call() {
    console.log("我可以进行视频通话！");
  }
}

const phone = new SmartPhone("苹果", 8999);
phone.call(); // 我可以进行视频通话！

6. getter /setter 用法

用于读取 / 修改属性时执行逻辑：

javascript

运行

class Phone {
  constructor(brand, price) {
    this.brand = brand;
    this.price = price;
  }

  // getter 获取属性
  get info() {
    return `${this.brand} - ${this.price}元`;
  }

  // setter 修改属性
  set info(newVal) {
    let [brand, price] = newVal.split("-");
    this.brand = brand;
    this.price = price;
  }
}

let p = new Phone("华为", 5999);
console.log(p.info); // 华为 - 5999元
p.info = "vivo-3999";
console.log(p.info); // vivo - 3999元

---

四、三大特性高频总结（面试必背）

1. Set 集合

• 成员唯一，自动去重
• 可遍历、可转换数组
• 常用：数组去重、交集、并集、差集

2. Map 集合

• 键可以是任意类型
• 比传统对象更灵活
• 有序、可遍历、可统计长度

3. Class 类

• constructor：初始化属性
• static：定义静态成员
• extends：继承
• super()：调用父类构造
• 支持方法重写、get/set

---

结语

ES6 的Set/Map 让数据处理更高效，Class让面向对象开发更规范。这三大特性是 Vue/React 源码、工程化项目的基础语法，熟练掌握能大幅提升代码质量与开发效率。