　　ES6提供了新的数据结构Set，Set对象不是数组，可以用来保存对象或者基本类型，所有保存的值都是唯一的, chrome浏览器>38和FF>13，以及nodeJS，对Set支持良好，以下的一些代码，都可以拷贝到控制台直接运行哦；

　　创建Set实例的基本方法为:

let set = new Set(); //或者 new Set(null);

console.log(set);

　　或者这样：

let set = new Set([,,,,,,,]);

console.log( Array.from(set) ); //输出：[ 1, 2, 3, 4 ]

　　可以看到，以上重复的4，在set里面只保存了一个，所以Set对象可以用来给数组去重；

　　Set也能用来保存NaN和undefined，如果有重复的NaN， Set会认为就一个NaN(实际上NaN!=NaN);

　　实例Set以后的对象拥有这些属性和方法：

　　　　属性
　　　　Set.prototype
　　　　Set.prototype.size
　　　　方法
　　　　Set.prototype.add()
　　　　Set.prototype.clear()
　　　　Set.prototype.delete()
　　　　Set.prototype.entries()
　　　　Set.prototype.forEach()
　　　　Set.prototype.has()
　　　　Set.prototype.values()
　　　　Set.prototype[@@iterator]()

　　Set这种类型的数据结构其实我们可以直接用数组模拟出来，虽然不能和原生的比，只能模拟以上列表的一些方法和属性( 还有一些功能无法实现的， Set实例的[Symbol.species]指向自己，但是chrome中没有[Symbol.species]这个玩意儿.... )

　　使用数组模拟一个Set构造器：

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

<script>

    "use strict";

    class Set {

        //对_set进行去重;

        static refresh () {

            let _this = this;

            let __set = []

            this._set.forEach(function(obj) {

                if( __set.indexOf(obj) === - && obj!=undefined) {

                    __set.push(obj);

                }

            });

            _this._set =__set;

            this.size = _this._set.length;

        }

        constructor(arg) {

            this.size = ;

            this[Symbol.species] = this;

            this._set = Array.isArray(arg)&&arg||[];

            Set.refresh.call(this)

        }

        add (obj) {

            this._set.push(obj);

            Set.refresh.call(this)

            return this;

        }

        clear () {

            this._set.length = ;

            return this;

        }

        delete (obj) {

            if( this._set.indexOf(obj)!=- ) {

                this._set[this._set.indexOf(obj)] = undefined;

            };

            Set.refresh.call(this);

            return this;

        }

        /**

         * @desc

         * @return Entries [[],[],[],[]]

         * */

                entries () {

            let result = [];

            this.forEach(function(key, value) {

                result.push([key,value]);

            });

            return result;

        }

        has () {

            if( this._set.indexOf(obj)!=- ) return true;

        }

        keys () {

            return this[Symbol.iterator]();

        }

        values () {

            return this[Symbol.iterator]();

        }

        //直接使用数组的forEach方便啊;

        forEach (fn, context) {

            let _this = this;

            this._set.forEach((value) => fn.call(context||value, value, value, _this) );

        }

        //必须支持生成器的写法;

    *[Symbol.iterator] (){

        let index = ;

        let val = undefined;

        while(index<this.size) {

        val = this._set[index];

        yield  val;

        index++;

    }

    }

    }

    var set = new Set([,]);

    //对Set进行基本的操作;

    set.add().add().add().add({:})

    set.delete();

    set.add();

    //使用Set的forEach方法;

    set.forEach(function(key,value,s){console.log(key,value,s,"this")},{this:"this"})

    //检测生成器是否正常运行;

    for(let s of set) {

        console.log(s)

    }

    //因为这个对象有Symbol.iterator， 所以使用扩展符也是好使的；

    console.log([...set]);

</script>

</body>

</html>

　　Set实例的属性：

　　size属性：size是指这个Set的长度，和数组的length效果一样的"
　　constructor属性：这个属性指向Set构造函数，这个代码即可实现 (new Set).constructor === Set //输出：true

　　Set实例的方法：

　　add方法，往set添加数据；

<script>

    Array.from((new Set([,])).add()); // 输出：[1, 2, 3]

</script>

　　clear方法，把set里面的数据清空;

let set = (new Set([,,,]));

set.clear();

Array.from(set);

　　delete方法，删除set里面的指定数据：

let set = (new Set([,,,]));

set.delete();

Array.from(set); //输出：[2, 3, 4]

　　entries方法：

let set = (new Set([,,,]));

Array.from(set.entries());

　　forEach方法：set的forEach有两个参数，第一个参数为一个函数，第二个参数是非必须的，如果传了第二个参数，那么该函数的上下文this就是我们传的第二个参数：

<script>

let set = (new Set([,,,]));

set.forEach(function() {

    console.log(arguments);

    console.log(this)

},"");

</script>

　　输出：

　　has方法， has是判断这个set是否有指定的值，返回false或者true;

<script>

let set = (new Set([,,,]));

console.log(set.has()) //输出：true;

console.log(set.has()) //输出：false

</script>

　　keys方法和values()方法, 这两个方法都是返回一个迭代器；

<script>

let set = new Set([,,,]);

console.log(set.keys());

console.log(set.values());

var keys = set.keys();

for(let key of keys) {

    console.log(key);

};

</script>

　　@@iterator()方法, @iterator方法是set默认的迭代器;

<script>

let set = new Set([,,,]);

let setIner = set[Symbol.iterator]();

console.log(setIner.next().value) //输出：1

console.log(setIner.next().value) //输出：2

console.log(setIner.next().value) //输出：3

console.log(setIner.next().value) //输出：4

</script>

　　实际上我们可以重写set[Symbol.iterator]，但是不会对set的keys和values方法产生影响;

　　整个DEMO：

var mySet = new Set();

//往mySet里面添加数据， 1 ， 5

mySet.add();

mySet.add();

mySet.add("some text");

//添加对象

var o = {a: , b: };

mySet.add(o);

mySet.has(); // 返回：true

mySet.has(); // 返回：false

mySet.has();              // 返回：true

mySet.has(Math.sqrt());  // 返回：true

mySet.has("Some Text".toLowerCase()); // t返回：rue

mySet.has(o); // 返回：true

mySet.size; //

mySet.delete(); // 从mySet里面删除5

mySet.has();    // 输出：false, 5 已经被删除了

mySet.size; // 现在的长度为：3

// 通过 for...or循环获取数据;

// 输出: 1, "some text"

for (let item of mySet) console.log(item);

// 输出: 1, "some text"

for (let item of mySet.keys()) console.log(item);

// 输出: 1, "some text"

for (let item of mySet.values()) console.log(item);

// 输出: 1, "some text"， 对于Set来说：key和value是一样的

for (let [key, value] of mySet.entries()) console.log(key);

// 把迭代器转化为数组的第一种方式；

var myArr = [v for (v of mySet)]; // [1, "some text"]

// 把迭代器转化为数组的第二种方式；

var myArr = Array.from(mySet); // [1, "some text"]

// 也可以用next()方法，手动去获取每一个值;

　　Set的实际用处：

　　利用set可以方便的进行交集和并集：

　　求并集，我们可以给两个方案或者更多：

var union = (setA, setB) => {

    //[...setA]这种方式目前只有babel才支持

    return new Seet([...setA,...setB]);

};

var union = (setA, setB) => {

    return new Set(Array.from(setA).concat(Array.from(setB)));

}

　　这种获取交集的方式，和数组求交集差不多;

var intersect = (set1, set2) => {

    //return [x for (x of set1) if (set2.has(x))]; 这种写法完全不行嘛....

    var resultSet = new Set();

    for(let set of set1) {

        if(set2.has(set)) {

            resultSet.add(set);

        };

    };

    return resultSet;

};

　　以下这种代码更短，太酷了啊，这个方法来自：http://es6.ruanyifeng.com/#docs/set-map;

var intersect = (set1, set2) => {

    return new Set([...set1].filter(x => set2.has(x)));

}

console.log(intersect(new Set([,,,]), new Set([,,,]))); //输出：Set {2,3,4}

　　弱引用的WeakSet

　　WeakSet对象是一些对象值的集合, 并且其中的每个对象值都只能出现一次，WeakSet只能存对象类型的元素，比如：Object, Array, Function 等等；有了弱引用的WeakSet，就不用担心内存泄漏了，如果别的对象不引用该对象，这个对象会被垃圾回收机制自动回收；

<script>

    console.log(new WeakSet([{},[],()=>({:})]));

</script>

　　WeakSet对象的方法只有三个，而且WeakSet对象没有size属性；
　　　　weakSet.add();
　　　　weakSet.delete();
　　　　weakSet.has();

　　如果对象不存在引用，那么WeakSet对象会把没有引用的对象占用的内存回收，下面这个demo，你可以跑一下，然后过一会儿(我的chrome浏览器10S就看到效果了)再看控制台：

<script>

var ws = new WeakSet()

var obj = {}; ws.add(obj);

ws.add([])

setInterval(()=>{

    console.log(ws);

},)

</script>

　　weakSet可以用来保存DOM节点，当节点被删除， weakSet里面的该节点如果不存在别的引用的话，一段时间内会被内存回收；

　　参考：

　　MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

　　ruanyifeng：http://es6.ruanyifeng.com/#docs/set-map

作者： NONO
出处：http://www.cnblogs.com/diligenceday/

QQ：287101329

微信：18101055830

ES6新特性：Javascript中Set和WeakSet类型的数据结构的更多相关文章

javascript ES6 新特性之扩展运算符三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
ES6新特性概览1
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
ES6新特性：Proxy代理器
ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...
必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
前端入门21-JavaScript的ES6新特性
声明本篇内容全部摘自阮一峰的:ECMAScript 6 入门阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
34.js----JS 开发者必须知道的十个 ES6 新特性
JS 开发者必须知道的十个 ES6 新特性这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数模版表达式多行字符串拆包表达式改进的对象表达式箭头函数 =&> ...

随机推荐

网格弹簧质点系统模拟（Spring-Mass System by Verlet Integration）附源码
模拟物体变形最简单的方法就是采用弹簧质点系统(Spring-Mass System),由于模型简单并且实用,它已被广泛应用于服饰.毛发以及弹性固体的动态模拟.对于三角网格而言,弹簧质点系统将网格中的顶 ...
AC日记——计算多项式的导函数 openjudge 1.5 38
38:计算多项式的导函数总时间限制: 1000ms 内存限制: 65536kB 描述计算多项式的导函数是一件非常容易的任务.给定一个函数f(x),我们用f'(x)来表示其导函数.我们用x^n来 ...
Mecanim 动作复用示例
Mecanim动作复用资源包四个动画文件一个Controller 不同的模型让模型都生成Avter,然后让多个模型重用一套动作复用动作预览动画状态机资源地址 Assets Store地址 ...
UNITY 2D入门基础教程
Unity4.3增加了原生的2D开发环境,新建项目时选2D http://blog.1vr.cn/?p=1422
Hoj2634 How to earn more?
How to earn more My Tags (Edit) Source : ww Time limit : 1 sec Memory limit : 64 M Submitted ...
MIPAV - Talairach ACPC transform
源地址:http://blog.sina.com.cn/s/blog_64cfe24f0100h358.html 1.打开MIPAV软件,File>open image from disk> ...
让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
How do I list the files in a directory?
原文地址:How do I list the files in a directory? You want a list of all the files, or all the files matc ...
TinyFrame升级之十：WCF Rest Service注入IOC的心
由于在实际开发中,Silverlight需要调用WebService完成数据的获取,由于之前我们一直采用古老的ASMX方式,生成的代理类不仅难以维护,而且自身没有提供APM模式的调用方式,导致在Sin ...
java动态代理浅析
最近在公司看到了mybatis与spring整合中MapperScannerConfigurer的使用,该类通过反向代理自动生成基于接口的动态代理类. 于是想起了java的动态代理,然后就有了这篇文章 ...

ES6新特性：Javascript中Set和WeakSet类型的数据结构

创建Set实例的基本方法为:

使用数组模拟一个Set构造器：

Set实例的属性：

Set实例的方法：

弱引用的WeakSet

参考：

ES6新特性：Javascript中Set和WeakSet类型的数据结构的更多相关文章

随机推荐

热门专题

　　创建Set实例的基本方法为:

　　使用数组模拟一个Set构造器：

　　Set实例的属性：

　　Set实例的方法：

　　弱引用的WeakSet

　　参考：