ES6深入認(rèn)識(shí)02

結(jié)構(gòu)賦值

1. 數(shù)組的解構(gòu)賦值

幾種常見(jiàn)情況舉例：

// 正常的解構(gòu)賦值
let [ a, b, c ] = [ 1, 2, 3 ];
a // 1
b // 2
c // 3
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

// 解構(gòu)失敗
let [ foo ] = [  ];
let [ bar, foo ] = [ 1 ];

// 不完全解構(gòu)
let [ one, two, three, four, five ] = [ 1, 2, 3, 4, 5, 6, 7, 8 ];

// 解構(gòu)錯(cuò)誤， 報(bào)錯(cuò)
let [ one ] = 'hello world';

總結(jié)來(lái)看，大致分為四種：

• 解構(gòu)成功
• 解構(gòu)失敗
• 不完全解構(gòu)
• 解構(gòu)錯(cuò)誤

解構(gòu)成功與其他三種對(duì)比可知，等號(hào)左側(cè)的變量個(gè)數(shù)如果等于右側(cè)的合法類型值，那么解構(gòu)即成功，如果解構(gòu)時(shí)，變量被賦予undefined就屬于解構(gòu)失敗，但是不報(bào)錯(cuò)。如果解構(gòu)時(shí)，左側(cè)的變量個(gè)數(shù)小于右側(cè)的合法值，則必定有一部分本應(yīng)該賦值給等號(hào)右側(cè)變量的值被浪費(fèi)，而解構(gòu)錯(cuò)誤則很好理解，解構(gòu)時(shí)等號(hào)右側(cè)并非可遍歷類型。

2. 默認(rèn)值

• 解構(gòu)賦值中，在被賦值的位置嚴(yán)格等于undefined時(shí)才會(huì)使用默認(rèn)值。示例如下：

let [ x = 1 ] = [ '' ];
let [ x = 1 ] = [ null ];
let [ x = 1 ] = [ undefined ];

以上三種案例，只有最后一種可以使x被賦值為1，其他幾種情況都因等號(hào)右側(cè)內(nèi)容與undefined不嚴(yán)格相等，導(dǎo)致默認(rèn)值賦值失敗

• 默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明，示例：

let [ x = y, y = 1 ] = [ 0, 2 ]; // 報(bào)引用錯(cuò)誤

此處就是一個(gè)典型的引用結(jié)構(gòu)賦值的其他變量，導(dǎo)致錯(cuò)誤的例子，在x被賦值為y的時(shí)候，y還并未被聲明且也未被賦值。

promise

自己對(duì)于promise的幾點(diǎn)理解：

1. 解決方案角度：promise是一種處理異步編程的解決方案，對(duì)比傳統(tǒng)的回調(diào)函數(shù)和事件更合理強(qiáng)大
2. 本質(zhì)：promise是一個(gè)裝著未來(lái)才會(huì)結(jié)束的某一個(gè)事件的結(jié)果
3. 語(yǔ)法：promise是一個(gè)對(duì)象，原型上有一些方法API，例如：then/catch/finally，分別用于處理返回的promise。該對(duì)象有三種狀態(tài)pending/fulfilled(resolved)/rejected，平時(shí)在控制臺(tái)中檢查網(wǎng)絡(luò)請(qǐng)求時(shí)，在請(qǐng)求過(guò)程中就會(huì)有接口pending的狀態(tài)顯示，此時(shí)表示請(qǐng)求進(jìn)行中，而resolved表示請(qǐng)求完成，即對(duì)應(yīng)著狀態(tài)碼為200，狀態(tài)不為4的請(qǐng)求狀態(tài)，rejected表示請(qǐng)求被拒絕，可能是因?yàn)榫W(wǎng)絡(luò)問(wèn)題，或者其他的錯(cuò)誤導(dǎo)致。
4. 特點(diǎn)：1. 是一個(gè)封閉的容器，它的狀態(tài)變化只會(huì)根據(jù)自己的請(qǐng)求而變化，不受外部因素影響 2. 一旦promise的狀態(tài)發(fā)生改變，就不會(huì)再變化 對(duì)比普通的事件來(lái)說(shuō)，如果一旦錯(cuò)過(guò)事件，再去監(jiān)聽(tīng)，就得不到結(jié)果了，比如監(jiān)聽(tīng)點(diǎn)擊事件，如果我們?cè)邳c(diǎn)擊事件結(jié)束之后再去監(jiān)聽(tīng)，就無(wú)法找到對(duì)應(yīng)的e.target究竟對(duì)應(yīng)的內(nèi)容是什么，這說(shuō)明普通事件的結(jié)果并不會(huì)一直保存，但是promise的結(jié)果一旦改變，就會(huì)定性，一旦定性，就會(huì)保存，訪問(wèn)該結(jié)果時(shí)，始終能找到promise對(duì)應(yīng)的狀態(tài)以及結(jié)果。

基本用法嘗試
ES6 規(guī)定，Promise對(duì)象是一個(gè)構(gòu)造函數(shù)，用來(lái)生成Promise實(shí)例。
Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

實(shí)際調(diào)用時(shí)，寫(xiě)為promise.then(resolve).catch(reject)，在上面的promise異步操作成功時(shí)會(huì)觸發(fā)條件判斷里的resolve函數(shù)，并且操作結(jié)束之后resolve會(huì)將結(jié)果傳遞出來(lái)，所以可以在promise.then里面去設(shè)置resolve，此時(shí)就已經(jīng)是在promise之外去接收promise的處理結(jié)果了，這就說(shuō)明promise雖然是一個(gè)封閉的容器，內(nèi)部狀態(tài)不受外部影響，但是可以借助resolve和reject將promise返回的結(jié)果進(jìn)行處理以及向外部傳遞。

以上then與catch的寫(xiě)法為最佳實(shí)踐，所以之后不會(huì)使用then(resolve, reject)的回調(diào)函數(shù)形式。

promise新建之后就會(huì)立即執(zhí)行
new一個(gè)promise之后，即新建一個(gè)promise之后，就會(huì)立即執(zhí)行，執(zhí)行過(guò)程中，遇到同步任務(wù)，會(huì)先讓同步任務(wù)完成，然后再繼續(xù)promise相關(guān)的異步操作，比如then里面的resolve，catch里面的reject，示例如下：

let flag = 2;
    let promise = new Promise(function(resolve, reject) {
      console.log('Promise');
      if(flag === 1) {
        resolve();
      } else {
        reject();
      }
    });

    promise.then(function() {
      console.log('resolved.');
    }).catch(function() {
      console.log('rejected');
    });

    console.log('Hi!');

image.png

反思：不斷修改flag的值就會(huì)發(fā)現(xiàn)，無(wú)論怎么修改，只要一旦new完P(guān)romise之后，就會(huì)立即執(zhí)行，而非在then或者catch的時(shí)候才會(huì)執(zhí)行異步操作