ES提案可选链和管道语法
两种处于提案状态的新语法：可选链(?.)和管道(|>)语法
1.可选链
我们会遇到以下场景，要拿到一个层级比较深的对象的属性值，又要考虑到值的存在问题，所以我们的代码可能是这样：
if(a && a.b && a.b.c){
// balabala
}
这样代码虽然严谨，但是看着不舒服。
使用可选链后：
if(a?.b?.c) {
// balabala
}
他会层层判断当前层的值是否存在，不存在则直接返回👍
如果想在项目中使用此语法，需要babel7转译，插件选择@babel/plugin-proposal-optional-chaining
2.管道运算符
有时也会遇到这个场景，一个参数，不断经过函数处理，结果又被当作参数传给下个函数，代码可能是这样的：
const result = foo(bar(baz('hello world')))
管道给人的感觉就是一条流水线，从上到下，参数输入，结果输出，所以语法也很简洁：👍
const result = 'hello world' |> baz |> bar |>foo
想在项目中使用同样需要babel7，并使用@babel/plugin-proposal-pipeline-operator插件，
"plugin": [
[
"@babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
]
]
注意，在配置.babelrc时需要制定proposal参数，目前只支持minimal，可关注https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator 查看最新进展
如果函数还需要别的参数，那么可以这么写：
const result = 'hello world' |> baz |> (str => baz(str, 'other args')) |> foo
但是如此就看着不简洁了，所以有个备选方案：使用#代表上个结果值，即：
const result = 'hello world' |> baz |> baz(#, 'other args')) |> foo
注意此种方式还未获得babel支持😥。
觉得作者写得不错？不妨轻击下方按钮~
