• javascript学习-Set


    一、基础用法

      ES6 提供的一个新的数据结构,它类似于 Array,但是和 Array 不同的是 Set 里面是每一项都是唯一的,没有重复的数据,Set 本身是一个构造函数,可以用来创建一个 Set 实例对象(注意:ie10 及以下版本是不支持 Set 对象的

      const set =new Set() ; 

    const set =new Set()
    const arr=[1,3,2,4,5,2,5]
    arr.forEach(e => {
      set.add(e)
    });
    console.log(set) // {1,3,2,4,5}

      可以使用 add() 方法来给 set 添加数据。如果是添加两个一样的值,它只会保存一个值。

      也可以给Set() 里面传递一个数组来初始化数据(或者具有Iterable接口的其他数据结构),如下:

    const set =new Set([1,3,4,2,5,3,2])
    console.log(set) // {1,3,4,2,5}

       利用 Set 数据结构的特性,可以用来给数组去重,如下:

    let arr=[1,3,2,5,3,2,6,4,3];
    arr=[...new Set(arr)]
    console.log(arr) // [ 1, 3, 2, 5, 6, 4 ]

      

      注意:向 Set 传递值的时候 并不会发生类型转化,例如 3 和 ‘3’ 是两个不同的值,Set 内部判断两个值是否相同是使用 全等(===)来进行判断的,它和全等运算符的唯一区别就是全等运算符认为 NaN 是不相等的,但是 Set 认为 NaN 是相同的。

         两个对象总是不相等的,两个{ } 对象也不是相等的。所以他们可以被添加到里面去。

    二、Set 实例的属性和方法

    可以查看MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set。

    三、实现Set结构

      在一些浏览器版本中可能不支持 Set 数据结构,可以自己实现一个 Set 数据结构,如下:

    function Set() {
            var items = {};
            this.size = 0;
            // 实现has方法
            // has(val)方法
            this.has = function(val) {
                // 对象都有hasOwnProperty方法,判断是否拥有特定属性
                return items.hasOwnProperty(val);
            };
    
            // 实现add
            this.add = function(val) {
                if (!this.has(val)) {
                    items[val] = val;
                    this.size++;    // 累加集合成员数量
                    return true;
                }
                return false;
            };
    
            // delete(val)方法
            this.delete = function(val) {
                if (this.has(val)) {
                    delete items[val];  // 将items对象上的属性删掉
                    this.size--;
                    return true;
                }
                return false;
            };
            // clear方法
            this.clear = function() {
                items = {};     // 直接将集合赋一个空对象即可
                this.size = 0;
            };
    
            // keys()方法
            this.keys = function() {
                return Object.keys(items);  // 返回遍历集合的所有键名的数组
            };
            // values()方法
            this.values = function() {
                return Object.values(items);  // 返回遍历集合的所有键值的数组
            };
    
            // forEach(fn, context)方法
            this.forEach = function(fn, context) {
                for (var i = 0; i < this.size; i++) {
                    var item = Object.keys(items)[i];
                    fn.call(context, item, item, items);
                }
            };
    
            // 并集
            this.union = function (other) {
                var union = new Set();
                var values = this.values();
                for (var i = 0; i < values.length; i++) {
                    union.add(values[i]);
                }
                values = other.values();    // 将values重新赋值为新的集合
                for (var i = 0; i < values.length; i++) {
                    union.add(values[i]);
                }
    
                return union;
            };
            // 交集
            this.intersect = function (other) {
                var intersect = new Set();
                var values = this.values();
                for (var i = 0; i < values.length; i++) {
                    if (other.has(values[i])) {     // 查看是否也存在于other中
                        intersect.add(values[i]);   // 存在的话就像intersect中添加元素
                    }
                }
                return intersect;
            };
    
            // 差集
            this.difference = function (other) {
                var difference = new Set();
                var values = this.values();
                for (var i = 0; i < values.length; i++) {
                    if (!other.has(values[i])) {    // 将不存在于other集合中的添加到新的集合中
                        difference.add(values[i]);
                    }
                }
                return difference;
            };
    
    
        }
    View Code
  • 相关阅读:
    ES6的Generator函数
    2017年要学习的三个CSS新特性
    移动端H5页面遇到的问题总结
    移动端布局解决方案+神器
    利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
    JavaScript 中 for 循环
    HTML DOM对象的属性和方法介绍(原生JS方法)
    初识JSON
    让你的WizFi250适应各种气候
    JAVA复习2 JAVA开发环境配置
  • 原文地址:https://www.cnblogs.com/zhilili/p/14760882.html
Copyright © 2020-2023  润新知