欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
你不得不学的es6
2017-09-26 10:08:19   来源:   评论:0 点击:
        • 都是一件令人头疼的事,调试的时候感觉代码跳来跳去,玩着玩着就晕了。ES6 提供 Promise 对象(函数),专门用来处理回掉。

          var promise = new Promise(function(resolve, reject) {
            // ... some code
            if (/* 异步操作成功 */){
              resolve(value);
            } else {
              reject(error);
            }
          });
          
          promise.then(function(value) {
            // success
          }, function(error) {
            // failure
          });

          resolve 和 reject 是两个异步操作调用函数,当异步操作完成时,调用 resolve,error 则调用 reject,这两个函数的功能就是把参数传递给回掉函数。then 函数用来处理成功或失败状态。

          function loadImageAsync(url) {
            var p = new Promise(function(resolve, reject) {
              var image = new Image();
          
              image.onload = function() {
                resolve(image);
              };
          
              image.onerror = function() {
                reject(url);
              };
          
              image.src = url;
            });
            p.then(function(image){
              document.body.appendChild(image);
            }, function(url){
              throw new Error('Could not load '+ url);
            })
          }
          
          loadImageAsync('http://yuren.space/images/bg.gif');

          上面是一个用 Promise 实现的异步加载图片的函数。

          for of 与 ...

          Python 中有 for in 运算符,ES6 就搞了个 for...of。当使用 for...of 循环遍历某种数据结构时,该循环会自动去寻找 Iterator 接口。一种数据结构只要部署了 Iterator 接口,我们就称这种数据结构是可遍历的,对象、数组、字符串都是可遍历的。

          var str = 'hello';
          for(let i of str){
            console.log(i);
          }
          // 'h' 'e' 'l' 'l' 'o'

          ...也非常好用,可以直接把可遍历对象直接转换成数组:

          var str = 'hello';
          [...str] //["h", "e", "l", "l", "o"]
          
          let arr = ['b', 'c'];
          ['a', ...arr, 'd'] 
          // ['a', 'b', 'c', 'd']

          有了 ... 之后,方便对非数组可遍历的对象进行转换,比如 arguments 和 querySelectAll 的结果:

          [...arguments] // Array
          
          var selects = document.querySelectAll('a');
          [...selects] // Array

          set 集合和 Map 结构

          ES6 新增 Set 集合对象,其实像其他语言早都支持了,不过,吃瓜群众,不觉明厉,以后,再遇到数组去重算法题,就可以:

          [...(new Set([1, 2, 2, 3]))];
          //[1, 2, 3]

          Set 方法分为操作和遍历,操作方法有 add-添加成员, delete-删除成员, has-拥有判断返回布尔值, clear-清空集合。

          遍历操作有 keys(),values(),entries(),forEach(),...,for of,map 和 filter 函数也可以用于 Set,不过要进行巧妙操作,先转换成数组,在进行操作:

          let set = new Set([1,2,3]);
          set = new Set([...set].map(a => a*2));
          // Set {2, 4, 6}

          Ma

相关热词搜索:

上一篇:如果要学习web前端开发,需要学习什么?
下一篇:分享一个目前可用的翻墙方法

收藏