ES6 Set 数据结构详解:创建、去重与遍历方法

作者:半夏时间:2026-10-23 04:53:02浏览:182

本文详解 ES6 新增的 Set 数据结构,介绍其无重复成员的特性。内容涵盖通过构造函数或数组参数创建 Set、利用扩展运算符和 Array.from 实现数组去重,以及 add、delete、has、clear 等操作方法。同时解析 keys、values 和 entries 三种遍历器的用法与区别,帮助开发者高效掌握 Set 的核心功能。

ES6 Set 数据结构概述

ES6 中的 Set 数据结构

ES6 引入了一种名为 Set 的新数据结构,其形态类似于数组。Set 最显著的特征是内部成员不允许重复,这一特性使其成为实现数组去重的便捷工具。Set 本质上是一个构造函数,需通过 new Set() 语法来实例化创建。

Set 的创建与初始化


  let arr1 = ['Hello', 'World', 'ES6']
  let set1 = new Set() 
  arr1.forEach(type => {
    set1.add(type)
  }) 

首先通过 new Set() 创建一个空的 Set 实例。接着使用 forEach 方法遍历数组 arr1,并将数组中的每一项通过 Set.prototype.add 方法逐个添加至 Set 结构中。

在创建 Set 时,可以直接传入一个数组作为参数。


  let arr2 = [1,2,3,4,1,5,2]
  let set2 = new Set(arr2) 
  for (let type of set2) {
   console.log(type)
  }
  // 1
  // 2
  // 3
  // 4
  // 5

上述代码中,new Set() 接收一个数组作为初始化参数。随后使用 for...of 循环遍历 set2。由于 Set 结构自动过滤重复值,最终输出的结果为 1、2、3、4、5。

Set 在接收参数时不会进行类型转换。例如 new Set(5, '5') 会被视为两个独立的值,因为数字 5 和字符串 '5' 类型不同。

利用 Set 特性实现数组去重

利用 Set 实现数组去重


  // 方法1 
  [...new Set([1,2,3,1,2])] // 1 2 3
  
  // 方法2
  Array.from(new Set([1,2,3,1,2])) // 1 2 3

主要方法是将数组传入 new Set(),利用其成员唯一的特性去除重复项。最后可通过扩展运算符 (...) 或 ES6 提供的 Array.from() 方法,将类数组的 Set 对象转换回标准数组。

Set 的基本操作方法

  • Set.prototype.add(value):向 Set 中添加一个新成员,该方法返回 Set 结构本身,支持链式调用。
  • Set.prototype.delete(value):删除指定成员,返回布尔值。若删除成功返回 true,若成员不存在则返回 false。
  • Set.prototype.has(value):检查 Set 中是否存在指定成员,存在返回 true,不存在返回 false。
  • Set.prototype.clear():清空 Set 中的所有成员。

Set 的基本操作方法


  let arr3 = [7,8,9]
  let set3 = new Set(arr3)
  set3.add(10)
  set3.size() // 4
  set3.delete(8)
  set3.size() // 3
  set3.clear() // 0

Set 的遍历方法

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回键值对的遍历器,以数组形式返回 [key, value]。

Set 的遍历器方法


  let arr4 = ['javascript', 'vue', 'node.js', 'typescript']
  let set4 = new Set(arr4) 
  
  // set.keys()
  for (let k of set4.keys()) {
   console.log(k)\
   // javascript
   // vue 
   // node.js
   // typescript
  } 

 // set.values()
 for (ket v of set4.values()) {
  console.log(v)
  // 和上面的set4.keys() 遍历的结果一样
 } 

 // set.entries()
 for (let e of set3.entries()) {
  console.log(e)
  // ['javascript', 'javascript']
  // ['vue', 'vue']
  // ['node.js', 'node.js']
  // ['typescript', 'typescript']
 }

可以看出,keys() 和 values() 的遍历结果完全一致,因此在实际使用中两者无区别。entries() 遍历返回的是数组,包含 keys 和 values 的结果对。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章