因為ES6語法的普及體現(xiàn)了它的重要性再加上想要在溫習一下ES6語法，不僅發(fā)現(xiàn)還有很多需要學習的地方，同時發(fā)現(xiàn)最新的提案例有這么幾個特別牛逼（sao）的操作，同時提案已經(jīng)進入了Stage3階段了。
分別是可選鏈、雙問號、管道語法

1.更多用法細節(jié)請了解---參考地址

2. 想學習ES6語法的朋友可以點此連接 ECMAScript 6 入門

3.更多提案

可選鏈

在開發(fā)的時候通常會遇到這種情況，為了嚴謹我們的代碼是這樣的

var nickName = user.name && user.nickname;
var value=  patient ? patient.value: undefine

再或者做判斷

if (a && a.b && a.b.c) {
  // Todo
}

當有了新語法以上可寫成下面這樣

var nickName = user.name?.nickname;
var value=  patient.value? .value
if (a?.b?.c) {
// Todo
}

如果想在項目中使用此語法，需要babel7轉(zhuǎn)譯，插件選擇@babel/plugin-proposal-optional-chaining

雙問號

但在實際使用中，還是會有些不便，比如

const result = response?.settings?.n || 100

你的本意是如果 response 或者 response.settings 或者 response.settings.n 不存在（值為 null 或者 undefined）時，result 默認為 100。
但是上面代碼在 n 為 0 的時候，也會讓 result 變成 100，你實際上希望此時 result 為 0。
于是代碼寫成這樣

const result = response?.settings?.n === undefined ? 100 : response?.settings?.n
或封裝一下
const result = fetch(response?.settings?.n, 100)

所以雙問號語法就來解決這個問題簡化代碼：

const result = response?.settings?.n ?? 100
?? 的意思是，如果 ?? 左邊的值是 null 或者 undefined，那么就返回右邊的值。

管道運算符

有時也會遇到這個場景，一個參數(shù)，不斷經(jīng)過函數(shù)處理，結(jié)果又被當作參數(shù)傳給下個函數(shù)，代碼可能是這樣的：

const result = foo(bar(baz('hello world')))

管道給人的感覺就是一條流水線，從上到下，參數(shù)輸入，結(jié)果輸出，所以語法也很簡潔：??

const result = 'hello world' |> baz |> bar |>foo

想在項目中使用同樣需要babel7，并使用@babel/plugin-proposal-pipeline-operator插件，

"plugin": [
  [
    "@babel/plugin-proposal-pipeline-operator",
    {
      "proposal": "minimal"
    }
  ]
]

注意，在配置.babelrc時需要指定proposal參數(shù)，更多參數(shù)請了解https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator
如果函數(shù)還需要別的參數(shù)，那么可以這么寫：

const result = 'hello world' |> baz |> (str => baz(str, 'other args')) |> foo

但是如此就看著不簡潔了，所以有個備選方案：使用#代表上個結(jié)果值，即：

const result = 'hello world' |> baz |> baz(#, 'other args')) |> foo

更新

1、如果對你有幫助的話，記得給個贊賞加關注，鼓勵一下。