zoukankan      html  css  js  c++  java
  • ES6知识点三(set,map数据结构,promise)

    Map倾向于后台

    Map是ES6引入的一种类似Object的新的数据结构,Map可以理解为是Object的超集,打破了以传统键值对形式定义对象,对象的key不再局限于字符串,也可以是Object。可以更加全面的描述对象的属性。

     1 var map = new Map();
     2 // 设置
     3 // map.set(name,value);
     4 map.set('a','apple');
     5 map.set('b','banana');
     6 // 获取
     7 // map.get(name);
     8 console.log(map.get('a') + ' ' + map.get('b'));
     9 // 删除之前map对象
    10 console.log(map);
    11 // 删除
    12 // map.delete(name);
    13 map.delete('a');
    14 // 删除之后map对象
    15 console.log(map);
    16 
    17 // 注意for..in是不能循环map对象的,不报错也无任何反应,所以下一代码无任何输出,稍微注意下
    18 for(var name in map){
    19     console.log(name);
    20 }
    21 
    22 // 实体 map对象的循环输出
    23 for(var name of map){
    24 //循环出来的结果就是:a,apple b,banana 循环key,value
    25 console.log(name);
    26 }
    27 
    28 //循环出来的结果就是: a,apple b,banana 循环key,value
    29 for(var [key,value] of map.entries()){
    30     console.log(key,value);
    31 }
    32 
    33 //只循环key
    34 for(var key of map.keys()){
    35     console.log(key);
    36 }
    37 
    38 //只循环value
    39 for(var val of map.values()){
    40     console.log(val);
    41 }

    promise

    romise之前代码过多的回调或者嵌套,可读性差、耦合度高、扩展性低。通过Promise机制,扁平化的代码机构,大大提高了代码可读性;用同步编程的方式来编写异步代码,保存线性的代码逻辑,极大的降低了代码耦合性而提高了程序的可扩展性。

    //Promise对象 ---> 用来传递异步操作过来的数据的
    //Pending(等待、处理中) ---> Resolve(完成,fullFilled)   ---> Reject(拒绝,失败)
    //这里只是定义,还没开始执行
    var p1 = new Promise(function(resolve,reject){
        resolve(1); // 成功了,返回一个promise对象1
        // reject(2); // 失败了
    });
    
    // 接收成功和失败的数据,通过then来传递
    // then也是返回一个promise对象,会继续往下传递数据,传递给下一个then
    p1.then(function(value){
        // resolve
        console.log(value); //执行打印1
        return value + 1; // 1
        alert(`成功了:${value}`);
    },function(value){
        // reject
        alert(`失败了:${value}`);
    }).then(function(value){
        console.log(value); // 2
    });
    
    //catch捕获异常错误
    var p1 = new Promise(function(resolve,reject){
        resolve('成功了'); //返回一个promise对象“成功了”
    });
    //then也是返回一个promise对象,会继续往下传递数据
    p1.then(function(value){
        console.log(value); //打印“成功了”
        // throw是用来抛错误的
        throw '发生了点小意外';
    }).catch(function(e){
        // catch用来捕获这个错误的 ---> 追踪
        console.log(e);
    });
    
    //all ---> 全部,用于将多个promise对象,组合,包装成
    //Promise.all([p1,p2,p3,...]); 所有的promise对象,都正确,才走成功
    //否则,只要有一个错误,就走失败
    var p1 = Promise.resolve(1);
    var p2 = Promise.reject(0);
    Promise.all([true,p1,p2]).then(function(obj){
        console.log(`成功了:${obj}`);
    },function(obj){
        console.log(`失败了:${obj}`);
    });
    
    // race ---> 返回的也是一个promise对象
    //最先执行的的promise结果,哪个最快我用哪个,所以下面打印的是one
    var p1 = new Promise(function(resolve,reject){
        setTimeout(resolve,50,'one');
    });
    var p2 = new Promise(function(resolve,reject){
        setTimeout(resolve,100,'two');
    });
    Promise.race([p1,p2]).then(function(val){
        console.log(val);
    });
    
    //resolve ---> 生成一个成功的promise对象
    //语法规则:Promise.resolve(val); // 普通值
    // Promise.resolve(arr); // 数组之类
    //Promise.resolve(promise); // 传递另一个promise对象
    //传递普通值
    Promise.resolve('success').then(function(val){
        // 注意resolve,走得是这里
        console.log(val); // success
    },function(err){
        console.log("err:"+ err);
    });
    //传递数组
    Promise.resolve([1,2,3]).then(function(val){
        // 注意resolve,走得是这里
        console.log(val); // [1,2,3]
    },function(err){
        console.log(err);
    });
    //传递一个promise对象
    var p1 = Promise.resolve(520);
    var p2 = Promise.resolve(p1);
    p2.then(function(val){
        //从p1那边传递过来的
        console.log(val); // 520
    });

    例题

     1 setTimeout(function() {
     2   console.log(1)
     3 }, 0);
     4 new Promise(function executor(resolve) {
     5   console.log(2);
     6   for( var i=0 ; i<10000 ; i++ ) {
     7     i == 9999 && resolve();
     8   }
     9   console.log(3);
    10 }).then(function() {
    11   console.log(4);
    12 });
    13 console.log(5);

    看到以上打印结果,我们都会疑惑为什么是这样?以下看我的解释就明白了

    首先我们可以看到我一开始就使用了定时器,我们都知道定时器是异步加载,于是会先设置一个定时,在定时结束后将传递这个函数放到任务队列里面,因此开始肯定不会输出 1 。等所有的内容加载完毕后才会输出

    然后是一个promise,里面的函数是直接执行的,因此输出2 3

    promise里的then方法是放在tick的最后,但是还是在当前的tick中,会先输出5,才会输出4

    所以它的输出结果才会是 2 3 5 4 1的顺序

    未完............

  • 相关阅读:
    129. Sum Root to Leaf Numbers
    113. Path Sum II
    114. Flatten Binary Tree to Linked List
    112. Path Sum
    100. Same Tree
    300. Longest Increasing Subsequence
    72. Edit Distance
    自定义js标签库
    JS 实现Table相同行的单元格自动合并示例代码
    mysql 高版本only_full_group_by 错误
  • 原文地址:https://www.cnblogs.com/zycs/p/14105660.html
Copyright © 2011-2022 走看看