TypeScript 中 Optional Chaining 和 Nullish Coalescing

Optional Chaining 解決的問題是重複且無心義的判空，之因此說無心義，是對業務來講它不是必需的，但不判空，程序直接就掛了，好比：git

let x = foo.bar.baz();

這裏的訪問鏈路上 foo bar baz 任何一個爲 undefined，程序就中止工做。github

使用 Optional Chaining 修改後：json

let x = foo?.bar.baz();

這裏 ?. 的句法就是 Optional Chaining，在 TypeScript 3.7 中實現，目前 tc39 提案中處於 Stage 4 階段。數組

Optional Chaining 在這裏表示，若是 foo 是 null 或 undefined，整個語句不繼續日後執行，直接返回 undefined。async

做用範圍

須要注意的是，這裏只對 foo 進行了保障，若是後續的 bar，baz 爲空的話，代碼仍然報錯。?. 只做用於左邊的對象。fetch

因此能夠這樣來修正：ui

let x = foo?.bar?.baz();

這樣能夠保障 foo bar 爲空的狀況下不報錯。這體現了 optional property accesses 的功能。url

Opptoinal call

對於方法也一樣適用。spa

async function makeRequest(url: string, log?: (msg: string) => void) {
  log?.(`Request started at ${new Date().toISOString()}`);
  // roughly equivalent to
  //   if (log != null) {
  //       log(`Request started at ${new Date().toISOString()}`);
  //   }

  const result = (await fetch(url)).json();

  log?.(`Request finished at at ${new Date().toISOString()}`);

  return result;
}

Optional element access

數組也是對象，只不是特殊的對象，經過數字索引做爲屬性來訪問。因此 Optional Chaining 也可做用於數組元素的訪問，此時就體現了 optional element access 的功能，請看來自官方文檔中的示例：鄭州婦科醫院哪裏好 http://www.zztjfkyy.com/.net

/**
 * Get the first element of the array if we have an array.
 * Otherwise return undefined.
 */
function tryGetFirstElement<T>(arr?: T[]) {
  return arr?.[0];
  // equivalent to
  //   return (arr === null || arr === undefined) ?
  //       undefined :
  //       arr[0];
}

和 `&&` 的差異

雖然說 Optional Chaining 取代了以下經過 && 來實現的判空操做：

// Before
if (foo && foo.bar && foo.bar.baz) {
  // ...
}

但 Optional Chaining 和 && 仍是有區別，後者利用 JavaScript 中的短路機制，遇到假值時中斷執行。而前者只會在被斷定對象爲 null 或 undefined 時纔會中斷執行。

請看以下示例：鄭州看婦科醫院哪家好 http://www.zztongjifk.com/

const a: any = 0;
console.log(a?.blah);
console.log(a && a.blah);

const b: any = false;
console.log(b?.blah);
console.log(b && b.blah);

const c: any = "";
console.log(c?.blah);
console.log(c && c.blah);

輸出：

undefined
0
undefined
false
undefined

能夠看到，經過 Optional Chaining 控制的部分所有輸出 undefined，由於這裏被斷定對象並非 null 或 undefined，因此語句會日後執行，嘗試訪問 blah，拿到的值是 undefined，最後輸出。

而經過 && 進行斷定的語句，由於被斷定對象是假值，中斷執行並返回當前對象。

Nullish Coalescing

Nullish Coalescing 經過 ?? 操做符，爲 null 或 undefined 的值提供默認值。

好比：

let x = foo ?? bar();

上面的表達式等價於若是 foo 是 null 或 undefined，則調用 bar()。

一樣地，他取代了以前經過 || 操做符達到的默認值效果，但後者一樣是經過判斷布爾真值達到的，而 Nullish Coalescing 只判斷 null 或 undefined。

好比：鄭州婦科醫院哪家好 http://www.zzyytj.com/

function initializeAudio() {
  let volume = localStorage.volume || 0.5;

  // ...
}