ES6 set、map和模块化

1.set和weakset

// set()方法本身是构造函数

    var a=new Set([1,2,3,4])//注意为中括号，里面内容可以为任意基本数据类型

    console.log(a);//1234

    // var b=new Set(1,23,3)

    // console.log(b);//报错

    var b=new Set()

    b.add(null)

    b.add(true)

    b.add(3)

    console.log(b);//不想用数组作为参数来传值初始化变量 这样是可以的

    // add()添加方法

    a.add(6)

    console.log(a);//12346

    // 注意成员的唯一性

    a.add(1)

    console.log(a);//12346

    // size属性获取成员个数

    console.log(a.size);//5

    // delete()方法删除set中指定值

    a.delete(1)

    console.log(a);//2346

    // clear()方法清空set中内容

    // a.clear()

    console.log(a);//size=0

    // has()方法判断set中是否含有指定的值

    console.log(a.has(9));//false

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

    console.log(a.entries());//key和values值一样

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

    console.log(a.keys());//2346

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

    console.log(a.values());//2346

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

    a.forEach((item,index)=>{

        console.log(item);

        console.log(index);

    })

    // 数组去重

    let arr=[1,2,3,1,2,1]

    let Arr=new Set(arr)

    console.log(Arr);

    // WeakSet结构

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

    let ws=new WeakSet([{name:'zs'}])//注意也在[]中

    console.log(ws);//weakset{{}}

    // 任何可遍历的对象，都可以作为WeakSet的初始化参数

    let a1=[1]

    let b1=[2]

    let ww=new WeakSet([a1,b1])

    console.log(ww);//weakset{array(1),array(1)}

    // WeakSet 结构不可遍历

    // add,delete,clear,has,entries,keys,values方法与set一样

2.map和weakmap

 // Map( )方法里面的参数，首先它是一个数组，而里面的内容也是由多个数组组成

        let m = new Map([

            ['name', 'zs'],//注意需加引号

            ['age', 18]

        ])

        console.log(m);

        //基本数据类型都可以作为参数，添加建值

        m.set('color', 'pink')

        m.set([1, 2], [2, 3])

        console.log(m);

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

        m.set('color', 'white')

        console.log(m);

        // get()方法获取指定键名的键值，返回键值

        console.log(m.get('color'));

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

        console.log(m.delete('hhh'));

        console.log(m.delete('age'));

        console.log(m);

        // clear方法 一次性删除所有键值对

        // m.clear()

        // console.log(m);

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

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

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

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

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

        }

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

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

        // forEach遍历每一个键值对

        // size：获取实例的成员数

        console.log(m.size);//注意size不是函数为属性

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

        // 使用set方法，不过键名的类型必须要求是引用类型的值

        let wm = new WeakMap();

        //数组类型的键名

        wm.set([1], 2);

        //对象类型的键名

        wm.set({ 'name': 'zs' }, 2);

        //函数类型的键名

        function fn() { };

        wm.set(fn, 2);

        console.log(wm);

        //打印：WeakMap {

    //             [1] => 2,

    //             Object { name: "zs" } => 2,

    //                 function => 2

    //             }

    // WeakMap与Map的区别？

    // Map允许基本数据类型，weakmap允许引用数据类型，基本数据类型不可以

    // WeakMap不支持clear方法，不支持遍历，也就没有了keys、values、entries、forEach这4个方法，也没有属性size。

3.Promise对象

 // 参数是一个匿名函数,其中有两个参数：resolve(解决)和reject(拒绝),两个函数均为方法。resolve方法用于处理异步操作成功后业务；reject方法用于操作异步操作失败后的业务。

        let one = new Promise((res, rej) => { })

        // Promise对象有三种状态：

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

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

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

        // 注意：

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

        let pro = new Promise((res, rej) => {

            //实例化后状态：pending

            if ('操作成功') {

                res();

                //resolve方法调用,状态为：fulfilled

            } else {

                rej();

                //reject方法调用,状态为：rejected

            }

        });

        console.log(pro);//Promise {<fulfilled>: undefined}

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

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

        pro.then(function (res) {

            //操作成功的处理程序

        }, function (error) {

            //操作失败的处理程序

        });

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

        pro.catch(function (error) {

            //操作失败的处理程序

        });

        //所以这两个方法可以联用

        pro.then(function (res) {

            //操作成功的处理程序

        }).catch(function (error) {

            //操作失败的处理程序

        });

        // 需要注意的是then和catch方法返回的都为promise对象

        //用new关键字创建一个Promise实例

        let pro1 = new Promise((resolve, reject) => {

            //假设condition的值为true

            let flag = false;

            if (flag) {

                //调用操作成功方法

                resolve('操作成功');//需要与参数名相同

                //状态：pending->fulfilled

            } else {

                //调用操作异常方法

                reject('异常');

                //状态：pending->rejected

            }

        });

        //用then处理操作成功,catch处理操作异常

        pro1.then((res) => {

            //参数可随意定义 重点在与then方法

            //操作成功的处理程序

            console.log(res)

       }).catch((error) => {

           //操作失败的处理程序

            console.log(error)

            // reject('操作异常');

        });

        console.log(pro1);

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

            if (false) {

                //调用操作成功方法

                resolve('操作成功');

            } else {

                //调用操作异常方法

                reject('操作异常');

            }

        });

        // function requestA() {

        //     console.log('请求A成功');

        //     return '请求B,下一个就是你了';

        // }

        // function requestB(res) { //参数为上一个then方法的返回值

        //     console.log('上一步的结果：' + res);

        //     console.log('请求B成功');

        //     return '请求C,下一个就是你了';

        // }

        // function requestC(res) {

        //     console.log('上一步的结果：' + res);

        //     console.log('请求C成功');

        // }

        function requestError() {

            console.log('请求失败');

        }

        //用then处理操作成功,catch处理操作异常

        // pro2.then(requestA)

        //     .then(requestB)

        //     .then(requestC)

        pro2.catch(requestError)

        console.log(pro2);

        // 回调地狱；指的是过多地使用回调函数嵌套

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

        //创建实例pro1

        let cat1 = new Promise(function (resolve) {

            setTimeout(function () {

                resolve('我是猫1');

            }, 5000);

        });

        //创建实例pro2

        let cat2 = new Promise(function (resolve) {

            setTimeout(function () {

                resolve('我是猫2');

            }, 1000);

        });

        // 同步显示，1s会等5s，在5s一起显示

        Promise.all([cat1, cat2]).then((result)=> {//result为返回值

            console.log(result);

        });

        // Promise.race()方法 只要有一个状态发生变化（不管是成功fulfilled还是异常rejected），它就会有返回

        //创建实例pro1

        let cat3 = new Promise(function (resolve) {

            setTimeout(function () {

                resolve('我是猫1');

            }, 5000);

        });

        //创建实例pro2

        let cat4 = new Promise(function (resolve) {

            setTimeout(function () {

                resolve('我是猫2');

            }, 1000);

        });

        //1s不会等5s，cat4先显示

        Promise.race([cat3, cat4]).then((result)=> {//result为返回值

            console.log(result);

        });

4.async和await

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

async function demo() {

            setTimeout(() => {

                console.log('11111');

            }, 3000)

            return '222222'

        }

        demo()

        demo().then(res => {

            console.log(res);

        })

        console.log(demo);

        //     async ƒ demo(){

        //         setTimeout(()=>{

        //             console.log('11111');

        //         },1000)

        //         return '222222'

        //     }

        // Async和await.html:21 222222

        // 2Async和await.html:15 11111

        // await 等待promise对象，但不需then方法，直接可以得到返回值

        async function demo1() {

            let test = await Promise.resolve('哈哈哈哈')

            console.log(test);

        }

        demo1()

        // 相对的把回调“纵向发展”了，形成了一个回调链 只会打印一个

        function sleep(wait) {

            return new Promise((res, rej) => {

                setTimeout(() => {

                    res(wait);

                }, wait);

            });

        }

        /*

        let p1 = sleep(100);

        let p2 = sleep(200);

        let p =*/

        sleep(100).then(result => {//result 100 上一次返回值

            return sleep(result + 100);

        }).then(result02 => {//result02 200

            return sleep(result02 + 100);

        }).then(result03 => {

            console.log(result03);

        })

        sleep()

        // 后面的结果都是依赖前面的结果,await是强制把异步变成了同步，这一句代码执行完，才会执行下一句

        // async function demo() {

        //     let result01 = await sleep(100);

        //     //上一个await执行之后才会执行下一句

        //     let result02 = await sleep(result01 + 100);

        //     let result03 = await sleep(result02 + 100);

        //     // console.log(result03);

        //     return result03;

        // }

        // demo().then(result => {

        //     console.log(result);

        // });

        // demo()

        //300

         //300

          //300