ES6

作者: 大佬_娜 | 来源:发表于2019-02-26 14:20 被阅读0次

    一. 声明变量的方法:

    let 用来声明变量。

    1.属于块级作用域,只在let命令所在的代码块内有效;
    2.同时声明两个变量,会报错;
    3.不可做变量提升;
    4.let声明的变量不属于顶层对象属性,全局变量将逐步与顶层对象的属性脱钩。

    const 用来声明常量。

    1.初始化的时候必须有值;
    2.不能重新赋值,重新赋值后会报错;
    3.对于const声明的是数组或对象时,可更改属性,不可重新赋值;

    import
    class
    //例题1:
    function f1() {
      let n = 5;
      if (true) {
        let n = 10;
      }
      console.log(n); 
    }
    
    //例题2:
    function f() { console.log('I am outside!'); }
    (function () {
      var f = undefined;
      if (false) {
        function f() { console.log('I am inside!'); }
      }
    
      f();
    }());
    //例题3
    const a = [];
    a.push('Hello'); 
    a.length = 0;    
    a = ['Dave'];    
    //例题4
    var a = 1;
    window.a 
    let b = 1;
    window.b
    

    二. 变量的解构赋值

    数组的解构赋值 let [a, b, c] = [1, 2, 3];

    1.基本用法,数组的元素是按次序排列的,变量的取值由它的位置决定;

    let [foo, [[bar], baz]] = [1, [[2], 3]];
    foo 
    bar 
    baz 
    
    let [ , , third] = ["foo", "bar", "baz"];
    third 
    
    let [x, , y] = [1, 2, 3];
    x 
    y 
    
    let [head, ...tail] = [1, 2, 3, 4];
    head
    tail
    
    let [x, y, ...z] = ['a'];
    x 
    y
    z 
    
    let [foo] = [];            
    let [bar, foo] = [1];  
    foo
    foo
    
    let [x, y] = [1, 2, 3];
    x 
    y
    
    let [a, [b], d] = [1, [2, 3], 4];
    a 
    b 
    d 
    

    2.解构赋值允许指定默认值,默认值是一个表达式,那么这个表达式是惰性求值的;

    let [x, y = 'b'] = ['a']; 
    x 
    y
    
    let [x, y = 'b'] = ['a', undefined]; 
    x
    y
    
    function f() {
      console.log('aaa');
    }
    let [x = f()] = [1];
    
    let [x = 1, y = x] = [];     
    x
    y
    
    let [x = 1, y = x] = [2];    
    x
    y
    
    let [x = 1, y = x] = [1, 2];
    x
    y
    
    let [x = y, y = 1] = []; 
    x
    y
    
    
    对象的解构赋值

    1.对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

    let { foo, bar } = { foo: "aaa", bar: "bbb" }; 
    bar 
    foo
    let { baz } = { foo: "aaa", bar: "bbb" };
    baz 
    

    2.变量名与属性名不一致的写法

    let obj = { first: 'hello', last: 'world' };
    let { first: f, last: l } = obj;
    f 
    l 
    
    let { foo: baz } = { foo: "aaa", bar: "bbb" };
    baz 
    foo 
    
    字符串的解构赋值

    字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
    类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

    const [a, b, c, d, e] = 'hello';
    a 
    b 
    c 
    d 
    e 
    let {length : len} = 'hello';
    len 
    

    三.Promise对象

    const promise = new Promise(function(resolve, reject) {
      // ... some code
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });
    
    //Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
    promise.then(function(value) {
      // success
    }, function(error) {
      // failure
    });
    

    1.Promise对象是一个构造函数,用来生成Promise实例。
    2.Promise是实现异步编程的一种解决方案
    3.Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。 resolve的作用是从未完成变为成功(即从 pending 变为 resolved),reject的作用是从未完成变为失败(即从 pending 变为 rejected)

    //例题:用Promise对象实现的 Ajax 操作的例子
    const getJSON = function(url) {
      const promise = new Promise(function(resolve, reject){
        const handler = function() {
          if (this.readyState !== 4) {
            return;
          }
          if (this.status === 200) {
            resolve(this.response);
          } else {
            reject(new Error(this.statusText));
          }
        };
        const client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
    
      });
    
      return promise;
    };
    
    getJSON("/posts.json").then(function(json) {
      console.log('Contents: ' + json);
    }, function(error) {
      console.error('出错了', error);
    });
    

    4.调用resolve或reject并不会终结 Promise 的参数函数的执行。

    new Promise((resolve, reject) => {
      resolve(1);
      console.log(2);
    }).then(r => {
      console.log(r);
    });
    

    5.Promise.prototype.then()
    promise实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法(第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数)。

    getJSON("/post/1.json").then(function(post) {
      return getJSON(post.commentURL);
    }).then(function funcA(comments) {
      console.log("resolved: ", comments);
    }, function funcB(err){
      console.log("rejected: ", err);
    });
    //箭头函数写更为简单
    getJSON("/post/1.json").then(
      post => getJSON(post.commentURL)
    ).then(
      comments => console.log("resolved: ", comments),
      err => console.log("rejected: ", err)
    );
    

    6.Promise.prototype.catch()
    如果 Promise 状态已经变成resolved,再抛出错误是无效的。

    const promise = new Promise(function(resolve, reject) {
      resolve('ok');
      throw new Error('test');
    });
    promise
      .then(function(value) { console.log(value) })
      .catch(function(error) { console.log(error) });
    

    不要在.then方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法。.catch可以捕获前面then方法执行中的错误

    // bad
    promise
      .then(function(data) {
        // success
      }, function(err) {
        // error
      });
    
    // good
    promise
      .then(function(data) { //cb
        // success
      })
      .catch(function(err) {
        // 
    

    Promise 内部的错误不会影响到 Promise 外部的代码。

    const someAsyncThing = function() {
      return new Promise(function(resolve, reject) {
        // 下面一行会报错,因为x没有声明
        resolve(x + 2);
      });
    };
    
    someAsyncThing().then(function() {
      console.log('everything is great');
    });
    
    setTimeout(() => { console.log(123) }, 2000)
    

    Promise 对象建议后面要跟catch方法,这样可以处理 Promise 内部发生的错误。catch方法返回的还是一个 Promise 对象,因此后面还可以接着调用then方法。

    const someAsyncThing = function() {
      return new Promise(function(resolve, reject) {
        // 下面一行会报错,因为x没有声明
        resolve(x + 2);
      });
    };
    
    someAsyncThing()
    .catch(function(error) {
      console.log('oh no', error);
    })
    .then(function() {
      console.log('carry on');
    });
    

    7.Promise.prototype.finally()
    finally方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。

    promise
    .then(result => {···})
    .catch(error => {···})
    .finally(() => {···});
    

    8.Promise.all()
    Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

    const p = Promise.all([p1, p2, p3]);
    

    9.总结:
    优点:Promise 的写法是回调函数的改进,使用then方法以后,异步任务的两段执行看得更清楚了。then将原来异步函数的嵌套关系转变为链式步骤

    缺点:Promise 的最大问题是代码冗余,原来的任务被Promise 包装了一下,不管什么操作,一眼看去都是一堆 then,原来的语义变得很不清楚.

    相关文章

      网友评论

          本文标题:ES6

          本文链接:https://www.haomeiwen.com/subject/rheayqtx.html