set、map与模块化

1.Set 和 WeakSet用法

        Set是ES6给开发者带来的一种新的数据结构，可以理解为值的集合

        Set跟其他数据结构不同的地方就在于：它的值不会有重复项。

        set结构的成员值是没有重复的，每个值都是唯一的

（1）Set的用法：(Set本身是一个构造函数，需要new)

        var s = new Set();

        var s1 = new Set([1,2,3]);

        s.add(4);   //可用add方法添加

        如果值成员为引用数据类型则需要变量存内存地址

        如：var obj = {'name':'zs'}

                var s2 = new Set([1,2,obj]);

        1.size属性：获取成员的个数

        2.delete属性：删除Set结构中的指定值，删除成功返回：true，删除失败返回：fasle。

                var s1 = new Set([1,2,3])

                s1.delete(2); //true

                s1.delete(4); //false

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

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

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

        6.keys和values方法

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

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

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

        8.Set数组去重

                let arr = [1,1,4,5,7,7,8,8,4,5,5,1]

                let arr2 = Array.from(new Set(arr))

（2）Weakset结构

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

初始化：      let ws = new WeakSet([{ "age": 18 }]);  //WeakSet {Object {age: 18}}

                    let ws1 = new WeakSet([1,2]); //结果：报错

任何可遍历的对象，都可以作为WeakSet的初始化参数。比如：数组。

        let arr1 = [1];

        let arr3 = [2]; 

       let ws2 = new WeakSet([arr1, arr3]);   //初始化一个WeakSet对象,参数是数组类型

      console.log(ws2);   //结果：WeakSet {Array(1) [1] Array(1) [2]}

        WeakSet结构也提供了add( ) 方法，delete( ) 方法，has( )

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

2.Map和WeakMap用法

        key键名的类型不再局限于字符串类型了，它可以是任意类型的值

（1）Map的基本用法 

        let m = new Map([      //用new来创建实例

                ['name', ['前端君']],

                ['gender', 1]

            ]);

        1.set方法

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

        参数1是key,参数2是value

                m.set([2], 2)

                m.set({ 'age': 18 }, 2)

                console.log(m);  // {'name' => Array(1), 'gender' => 1, Array(1) => 2, {…} => 2}

          如果设置一个已经存在的键名，那么后面的键值会覆盖前面的键值

                    m.set('name','zs')

                    console.log(m.get('name'));  //zs

        2.get方法：获取指定键名的键值，返回键值

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

                 console.log(m.delete('gender'));  //true

                console.log(m.delete('gender'));  //false

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

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

                console.log(m.has('name'));  //true

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

                for (let [i, v] of m.entries()) {

                       console.log([i, v]);

                    }

        7.keys和values方法

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

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

                for (let key of m.keys()) {

                        console.log(key);

            }

                 for (let value of m.values()) {

                        console.log(value);

            }

         8.forEach方法

                 m.forEach((key, value) => {

                        console.log([key, value]);

                    })

        9.size属性：获取实例的成员数。

（1）WeakMap

        WeakMap结构的键名(key)只支持引用类型的数据。比如：数组，对象，函数

        用new来创建实例：let wm = new WeakMap();

            wm.set([1], 2);     //数组类型的键名

            wm.set({ 'name': 'Zhangsan' }, 2);      //对象类型的键名

            function fn() { };  

            wm.set(fn, 2);      //函数类型的键名

           console.log(wm.get(fn));   //2

            console.log(wm.has(fn));   //true

            wm.delete(fn)

WeakMap与Map的区别：

              WeakMap普通的值类型则不允许。比如：字符串，数字，null，undefined，布尔类型。而Map结构是允许的。

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

3.ES6的Promise对象

        目的：为了解决回调函数层层嵌套（又称：回调地狱）问题

        Promise跳出了异步嵌套的怪圈，解决了回调地狱的问题,用链式表达更加清晰 

 （1）Promise基本用法

         Promise对象是全局对象，你也可以理解为一个类，创建Promise实例的时候，要有那个new关键字。参数是一个匿名函数，其中有两个参数：resolve(解决)和reject(拒绝)，两个函数均为方法。resolve方法用于处理异步操作成功后业务；reject方法用于操作异步操作失败后的业务。

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

            }) 

 （2）Promise的三种状态

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

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

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

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

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

                if ('操作成功') {

                    resolve();   //resolve方法调用，状态为：fulfilled

                } else {

                    reject();    //reject方法调用，状态为：rejected

                }

            })

（3）Then方法，返回的还是promise对象，所以支持链式调用

            pro.then(function (res) {

                //操作成功的处理程序

            }）

（4）Catch方法

           pro.catch(function (error) {

                //操作失败的处理程序

            });

之所以能够使用链式调用，是因为then方法和catch方法调用后，都会返回promise对象。

                pro.then(function (res) {

                        //操作成功的处理程序

                    }).catch(function (error) {

                        //操作失败的处理程序

                    });

（5）Promise.all方法

        接收一个数组作为参数，数组的元素是Promise实例对象，当参数中的实例对象的状态都为fulfilled时（各参数Promise全部请求结束后），Promise.all( )才会有返回。

（6）Promise.race方法

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

4.ES7中 的Async/await

（1）Async/await的基本使用

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

5.Module模块（目的：高内聚，低耦合）

（1）模块化的初衷（便于维护）

        目前还没有浏览器支持ES6的module模块

         <script type="module">将script标签中的type的类型换成module,告诉浏览器我们要使用es6的模块化了

（2）导出 Export，导入Import

        选择性地给其他模块暴露（提供）自己的属性和方法，供其他模块使用

                export var name = '小红'     //在./module-B.js文件中

                import {name} from './module-B.js'   //在./module-A.js文件中

（3）批量导出，导入

//在./module-B.js文件中

        var name = '小红'；

        var age = 25;

        export {name,age}     //批量导出

//在./module-A.js文件中

        import {name,age} from  './module-B.js'   //批量导入

（4）重命名导出的变量

 更改导入变量的名称

         import {name as myname} from  './module-B.js' 

（5）整体导入

        我们还可以使用星号*实现整体导入

                 import * as obj  from  './module-B.js' 

（6）默认导出，一个模块不能有多个默认导出，只能有一个

         使用关键语句export default来实现

        //每个模块支持我们导出一个没有名字的变量

         export default function(){

                console.log('I am default Fn');

        }

         //导入

        import sayDefault from  './module-B.js';

        sayDefault();

（7）注意事项

         声明的变量，对外都是只读的。

        基本数据类型不能改值，引用数据类型，可改变属性和属性值，不能改变地址

        导入不存在的变量，会报错。 

        模块A想导入的变量height，在模块B中并没有提供，会抛出异常