set、map与模块化

Set 和 WeakSet用法

什么是set

Set是ES6给开发者带来的一种新的数据结构，你可以理解为值的集合。我们平时见到的数组Array也是一种数据结构，但是Set跟其他数据结构不同的地方就在于：它的值不会有重复项。

Set格式 let a = new Set([ ]); 使用add方法添加成员 成员值唯一

 结构除了提供add方法用于添加成员以外，还提供了哪些方法和属性呢？

size属性：获取成员的个数。 

delete( )方法：用户删除Set结构中的指定值，删除成功返回：true，删除失败返回：fasle。

clear( )方法：清除所有成员

has( )方法：判断set结构中是否含有指定的值。如果有，返回true；如果没有，返回fasle。

entries( )方法：返回一个键值对的遍历器。

keys( )方法：返回键名的遍历器。

values( )方法：返回键值的遍历器。

forEach( )方法：遍历每一个成员。

Weakset结构

 WeakSet结构同样不会存储重复的值，不同的是，它的成员必须是对象类型的值。

同样，WeakSet结构也提供了add( ) 方法，delete( ) 方法，has( )方法给开发者使用，作用与用法跟Set结构完全一致。

        另一个不同点是：WeakSet 结构不可遍历。因为它的成员都是对象的弱引用，随时被回收机制回收，成员消失。所以WeakSet结构不会有keys( )，values( )，entries( )，forEach( )等方法和size属性。

Map和WeakMap用法

什么是Map？

ES6 提供了Map结构给我们使用，它跟Object对象很像，但是不同的是，它的key键名的类型不再局限于字符串类型了，它可以是各种类型的值；可以说，它比Object对象更加灵活了，当然，也更加复杂了。

格式 let a=new Map([["name","前端"]])

set( )方法作用：给实例设置一对键值对，返回map实例。

 //数组类型的键名

m.set([1],2);

//对象类型的键名

m.set({"name":"Zhangsan"},2);

//布尔类型的键名

m.set(true,2);

//Symbol类型的键名

m.set(Symbol('name'),2);

//null为键名

m.set(null,2);

//undefined为键名

m.set(undefined,2);

  以上6种类型值都可以作为键名，可以成功添加键值对，没毛病。

使用set方法的时候有一点需要注意，如果你设置一个已经存在的键名，那么后面的键值会覆盖前面的键值。

get( )方法作用：获取指定键名的键值，返回键值。

let m = new Map([["name","前端君"]]);

m.get("name");//结果：前端君

m.get("gender");//结果：undefined

get方法使用也很简单，只需要指定键名即可。获取存在对应的键值，如果键值对存在，就会返回键值；否则，返回undefined

delete( )方法作用：删除指定的键值对，删除成功返回：true，否则返回：false。

跟Set结构一样，Map结构也提供了clear( )方法，让你一次性删除所有键值对。

has( )方法作用：判断Map实例内是否含有指定的键值对，有就返回：true，否则返回：false。

entries( )方法作用：返回实例的键值对遍历器。

let m = new Map([

    ["name","前端君"],

    ["age",25]

]);

for(let [key,value] of m.entries()){

    console.log(key+'  '+value);

}

//打印结果：name  前端君

//              age  25

keys( )方法：返回实例所有键名的遍历器。

values( ) 方法：返回实例所有键值的遍历器。

除了使用以上三个方法实现遍历以外，我们还可以使用forEach遍历每一个键值对

size：获取实例的成员数。

什么是WeakMap？

WeakMap结构和Map结构很类似，不同点在于WeakMap结构的键名只支持引用类型的数据。哪些是引用类型的值呢？比如：数组，对象，函数。

eakMap的基本用法

WeakMap结构的使用方式和Map结构一样：

 let wm = new WeakMap();

WeakMap与Map的区别？

如果是普通的值类型则不允许。比如：字符串，数字，null，undefined，布尔类型。而Map结构是允许的，这就是两者的不同之处，谨记。

跟Map一样，WeakMap也拥有get、has、delete方法，用法和用途都一样。不同地方在于，WeakMap不支持clear方法，不支持遍历，也就没有了keys、values、entries、forEach这4个方法，也没有属性size。

ES6的Promise对象

Promise基本用法

我们就看看它的基本用法：promise 承诺

let pro = new Promise(function(resolve,reject){

})

Promise的三种状态

Promise对象有三种状态：

        1.pending：刚刚创建一个Promise实例的时候，表示初始状态；

        2.fulfilled：resolve方法调用的时候，表示操作成功；

        3.rejected：reject方法调用的时候，表示操作失败；

状态只能从 初始化 -> 成功  或者  初始化 -> 失败，不能逆向转换，也不能在成功fulfilled 和失败rejected之间转换。

  then( )方法：用于绑定处理操作后的处理程序。

参数是两个函数，第一个用于处理操作成功后的业务，第二个用于处理操作异常后的业务。

  pro.then(function (res) {

        //操作成功的处理程序

    },function (error) {

        //操作失败的处理程序

    });

Catch方法

对于操作异常的程序，Promise专门提供了一个实例方法来处理：catch( )方法。

 pro.catch(function (error) {

        //操作失败的处理程序

    });

 catch只接受一个参数，用于处理操作异常后的业务。

  综合上面的两个方法，大家都建议将then方法用于处理操作成功，catch方法用于处理操作异常

Promise.all( )方法：接受一个数组作为参数，数组的元素是Promise实例对象，当参数中的实例对象的状态都为fulfilled时，Promise.all( )才会有返回。

Promise.race()方法：它的参数要求跟Promise.all( )方法一样，不同的是，它参数中的promise实例，只要有一个状态发生变化（不管是成功fulfilled还是异常rejected），它就会有返回，其他实例中再发生变化，它也不管了。

ES7中 的Async/await

Promise虽然跳出了异步嵌套的怪圈，解决了回调地狱的问题,用链式表达更加清晰，但是我们也发现如果有大量的异步请求的时候，流程复杂的情况下，会发现充满了屏幕的then，看起来非常吃力，而ES7的Async/Await的出现就是为了解决这种复杂的情况。

async用于申明一个function是异步的，返回一个promise对象，而await可以认为是async wait的简写，等待一个异步方法执行完成。async必须声明的是一个function，await必须在声明的函数内部使用。

基本语法

 

 Module模块

模块Module

模块Module：一个模块，就是一个对其他模块暴露自己的属性或者方法的文件。

在这里，我们会把module-A.js和module-B.js分别当作两个模块（moduleA模块和moduleB模块）来对待和处理。用这两个模块来演示如何暴露一个模块的属性或方法。

导出Export

导出Export：作为一个模块，它可以选择性地给其他模块暴露（提供）自己的属性和方法，供其他模块使用。

导入Import

导入Import：作为一个模块，可以根据需要，引入其他模块的提供的属性或者方法，供自己模块使用。

模块化的实现

模块B演示了导出

 模块B演示了导出，接下来我们用模块A来演示如何导入。

 批量导出

对于模块B，如果你想导出（暴露）多个属性和方法的话，你可以这样实现：

    而对于这种批量导出，我们导入的时候怎么对应上呢？

 同样，我们使用多个同名变量就可以获取对应的属性和方法，变量名字必须跟导出的一致才能准确获取，位置顺序无要求。

重命名导出的变量

 

使用关键字as，可以实现给变量name更换名字为myname。最后正确输出myname的值：“前端君”。

整体导入

 

默认导出

默认导出，每个模块支持我们导出一个没有名字的变量，我们使用关键语句export default来实现：

   

我们使用export default关键字对外导出一个匿名函数，导入这个模块的时候，可以为这个匿名函数取任意的名字，我们试一下导入上面那个匿名函数：

 声明的变量，对外都是只读的。 导入不存在的变量，会报错。