ES6 中Set数据结构

  • A+
所属分类:ES 6 JavaScript Web

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

一.Set数据结构

1.基本定义

  • ①Set本身是一个构造函数,用来生成 Set 数据结构,存储不重复的值。Set的定义如下
  • ②因为set实现了Iterator(遍历器)所以可以使用(...)的拓展运算符来处理集合中的数据
    //例一 创建一个空集合,使用add方法添加数据
    const s = new Set();
    
    [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
    
    for (let i of s) {
      console.log(i);
    }
    // 2 3 5 4
    
    //例二 使用数组初始化set对象
    const set = new Set([1, 2, 3, 4, 4]);
    [...set]
    // [1, 2, 3, 4]
    
    // 例三 使用实现了 iterable 接口的其他数据结构,初始化set对象
    const set = new Set(document.querySelectorAll('div'));
    set.size // 56
    
    // 类似于
    const set = new Set();
    document
     .querySelectorAll('div')
     .forEach(div => set.add(div));
    set.size // 56
    

2.Set结构的常规方法

  1. Set
    Set.prototype.constructor:构造函数,默认就是Set函数。
    Set.prototype.size:返回Set实例的成员总数。
    Set.prototype.add(value):添加某个值,返回 Set 结构本身。
    Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
    Set.prototype.has(value):返回一个布尔值,表示该值是否为Set的成员。
    Set.prototype.clear():清除所有成员,没有返回值。
  2. 范例
    s.add(1).add(2).add(2);
    // 注意2被加入了两次
    
    s.size // 2
    
    s.has(1) // true
    s.has(2) // true
    s.has(3) // false
    
    s.delete(2);
    s.has(2) // false
    

3.Set结构的遍历

  1. Set 结构的实例有四个遍历方法
    Set.prototype.keys():返回键名的遍历器
    Set.prototype.values():返回键值的遍历器
    Set.prototype.entries():返回键值对的遍历器
    Set.prototype.forEach():使用回调函数遍历每个成员
  2. keys(),values(),entries()范例如下,其中 Set 结构没有键名或者健值的名称相同,所以keys方法和values方法返回一致。
    let set = new Set(['red', 'green', 'blue']);
    
    for (let item of set.keys()) {
      console.log(item);
    }
    // red
    // green
    // blue
    
    for (let item of set.values()) {
      console.log(item);
    }
    // red
    // green
    // blue
    
    for (let item of set.entries()) {
      console.log(item);
    }
    // ["red", "red"]
    // ["green", "green"]
    // ["blue", "blue"]
    
  3. set的默认遍历器是values方法,所以可以直接用for...of循环遍历 Set。
    Set.prototype[Symbol.iterator] === Set.prototype.values
    // true
    
    let set = new Set(['red', 'green', 'blue']);
    
    for (let x of set) {
      console.log(x);
    }
    // red
    // green
    // blue
    
  4. forEach()遍历,箭头函数包含键值、键名、集合本身(下例省略了该参数)
    let set = new Set([1, 4, 9]);
    set.forEach((value, key) => console.log(key + ' : ' + value))
    // 1 : 1
    // 4 : 4
    // 9 : 9
    

4.Set结构的应用

  1. 去除重复成员的方法
    // 去除数组的重复成员
    [...new Set(array)]
    
  2. 去除字符串中重复字符
    [...new Set('ababbc')].join('')
    // "abc"
    
  3. 2个对象总是不相等的
    let set = new Set();
    
    set.add({});
    set.size // 1
    
    set.add({});
    set.size // 2
    
  4. Array.from方法可以将 Set 结构转为数组。
    const items = new Set([1, 2, 3, 4, 5]);
    const array = Array.from(items);
    
  5. 使用Array.from进行数组去重
    function dedupe(array) {
      return Array.from(new Set(array));
    }
    dedupe([1, 1, 2, 3]) // [1, 2, 3]
    
  6. 利用数组的map和filter方法,在Set中间接实现并集(Union)、交集(Intersect)和差集(Difference)。
    let a = new Set([1, 2, 3]);
    let b = new Set([4, 3, 2]);
    
    // 并集
    let union = new Set([...a, ...b]);
    // Set {1, 2, 3, 4}
    
    // 交集
    let intersect = new Set([...a].filter(x => b.has(x)));
    // set {2, 3}
    
    // 差集
    let difference = new Set([...a].filter(x => !b.has(x)));
    // Set {1}
    
  7. 在遍历操作中修改原集合数据,使用重新赋值的方式
    // 方法一
    let set = new Set([1, 2, 3]);
    set = new Set([...set].map(val => val * 2));
    // set的值是2, 4, 6
    
    // 方法二
    let set = new Set([1, 2, 3]);
    set = new Set(Array.from(set, val => val * 2));
    // set的值是2, 4, 6
    
zhangfeng

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: