zoukankan      html  css  js  c++  java
  • es6新增 set

    Set

    基本用法

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

    Set本身是一个构造函数,用来生成Set数据结构。

    复制代码
    var s = new Set();
    
    [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));
    
    for (let i of s) {
      console.log(i);
    }
    // 2 3 5 4
    复制代码

    上面代码通过add方法向Set结构加入成员,结果表明Set结构不会添加重复的值。

    Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化。

    复制代码
    // 例一
    var set = new Set([1, 2, 3, 4, 4]);
    [...set]
    // [1, 2, 3, 4]
    
    // 例二
    var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
    items.size // 5
    
    // 例三
    function divs () {
      return [...document.querySelectorAll('div')];
    }
    
    var set = new Set(divs());
    set.size // 56
    
    // 类似于
    divs().forEach(div => set.add(div));
    set.size // 56
    复制代码

    上面代码中,例一和例二都是Set函数接受数组作为参数,例三是接受类似数组的对象作为参数。

    上面代码中,也展示了一种去除数组重复成员的方法。

    // 去除数组的重复成员
    [...new Set(array)]

    向Set加入值的时候,不会发生类型转换,所以5"5"是两个不同的值。Set内部判断两个值是否不同,使用的算法叫做“Same-value equality”,它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。在Set内部,两个NaN是相等。

    Set实例的属性和方法

    Set结构的实例有以下属性。

    • Set.prototype.constructor:构造函数,默认就是Set函数。
    • Set.prototype.size:返回Set实例的成员总数。

    Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。

    • add(value):添加某个值,返回Set结构本身。
    • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
    • has(value):返回一个布尔值,表示该值是否为Set的成员。
    • clear():清除所有成员,没有返回值。

    上面这些属性和方法的实例如下。

    复制代码
    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
    复制代码

    Array.from方法可以将Set结构转为数组。

    var items = new Set([1, 2, 3, 4, 5]);
    var array = Array.from(items);

    这就提供了去除数组重复成员的另一种方法。

    function dedupe(array) {
      return Array.from(new Set(array));
    }
    
    dedupe([1, 1, 2, 3]) // [1, 2, 3]

    遍历操作

    Set结构的实例有四个遍历方法,可以用于遍历成员。

    • keys():返回一个键名的遍历器
    • values():返回一个键值的遍历器
    • entries():返回一个键值对的遍历器
    • forEach():使用回调函数遍历每个成员

    key方法、value方法、entries方法返回的都是遍历器对象。由于Set结构没有键名,只有键值(或者说键名和键值是同一个值),所以key方法和value方法的行为完全一致。

    复制代码
    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"]
    复制代码

    Set结构的实例默认可遍历,它的默认遍历器生成函数就是它的values方法。

    Set.prototype[Symbol.iterator] === Set.prototype.values
    // true

    这意味着,可以省略values方法,直接用for...of循环遍历Set。

    WeakSet

    WeakSet结构与Set类似,也是不重复的值的集合。但是,它与Set有两个区别。

    首先,WeakSet的成员只能是对象,而不能是其他类型的值。

    其次,WeakSet中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于WeakSet之中。这个特点意味着,无法引用WeakSet的成员,因此WeakSet是不可遍历的。

    var ws = new WeakSet();
    ws.add(1)
    // TypeError: Invalid value used in weak set
    ws.add(Symbol())
    // TypeError: invalid value used in weak set

    上面代码试图向WeakSet添加一个数值和Symbol值,结果报错,因为WeakSet只能放置对象。

    WeakSet是一个构造函数,可以使用new命令,创建WeakSet数据结构。

    var ws = new WeakSet();

    作为构造函数,WeakSet可以接受一个数组或类似数组的对象作为参数。(实际上,任何具有iterable接口的对象,都可以作为WeakSet的参数。)该数组的所有成员,都会自动成为WeakSet实例对象的成员。

    WeakSet结构有以下三个方法。

    • WeakSet.prototype.add(value):向WeakSet实例添加一个新成员。
    • WeakSet.prototype.delete(value):清除WeakSet实例的指定成员。
    • WeakSet.prototype.has(value):返回一个布尔值,表示某个值是否在WeakSet实例之中。

    下面是一个例子。

    复制代码
    var ws = new WeakSet();
    var obj = {};
    var foo = {};
    
    ws.add(window);
    ws.add(obj);
    
    ws.has(window); // true
    ws.has(foo);    // false
    
    ws.delete(window);
    ws.has(window);    // false
    复制代码

    WeakSet没有size属性,没有办法遍历它的成员。

    WeakSet不能遍历,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了。WeakSet的一个用处,是储存DOM节点,而不用担心这些节点从文档移除时,会引发内存泄漏。

  • 相关阅读:
    KSTORE日常工作遇到问题总结
    调用bat文件执行java文件
    腾讯课堂十大Excel函数
    《将博客搬至CSDN》
    oracle 累加功能,累加百分比
    验证身份证是否合法
    远程登录修改密码
    二叉树的遍历
    nginx启动、重启、关闭
    状态模式-State-订单状态
  • 原文地址:https://www.cnblogs.com/liuna/p/6171003.html
Copyright © 2011-2022 走看看