ES提案:可选链、双问号和管道语法

简介: ES提案:可选链、双问号和管道语法

因为ES6语法的普及体现了它的重要性再加上想要在温习一下ES6语法,不仅发现还有很多需要学习的地方,同时发现最新的提案例有这么几个特别牛逼(sao)的操作,同时提案已经进入了Stage3阶段了。
分别是可选链双问号管道语法

1.更多用法细节请了解---参考地址

2. 想学习ES6语法的朋友可以点此连接 ECMAScript 6 入门

3.更多提案

可选链

在开发的时候通常会遇到这种情况,为了严谨我们的代码是这样的

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转译,插件选择@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,那么就返回右边的值。

管道运算符

有时也会遇到这个场景,一个参数,不断经过函数处理,结果又被当作参数传给下个函数,代码可能是这样的:

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参数,更多参数请了解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

更新

1、如果对你有帮助的话,记得给个赞赏加关注,鼓励一下。

相关文章
|
4月前
|
算法
条件运算符与条件if的姻缘,打擂台算法和大小写字母转换,if逻辑避坑
条件运算符与条件if的姻缘,打擂台算法和大小写字母转换,if逻辑避坑
44 1
|
8月前
|
安全 Kotlin
Kotlin中的安全导航操作符?.、空合并运算符?:以及let函数的实践与理解
Kotlin中的安全导航操作符?.、空合并运算符?:以及let函数的实践与理解
|
9月前
|
前端开发 JavaScript
前端 JS 经典:双等号运算符的运算和转换规则
前端 JS 经典:双等号运算符的运算和转换规则
64 0
|
9月前
|
存储 程序员 编译器
【新手解答5】深入探索 C 语言:宏中的文本、标识符和字符串 + 递归运算、条件语句、循环 + `switch-case` 与多项条件和枚举的差别
【新手解答5】深入探索 C 语言:宏中的文本、标识符和字符串 + 递归运算、条件语句、循环 + `switch-case` 与多项条件和枚举的差别
98 0
|
前端开发 API
用ES6中的reduce高阶函数组装查询表单分隔字符数据
上古时代,我们为了遍历都是用for循环,直到es6的出现,给我们带来了一系列好用的新特性,map、filter、find、findIndex、some、every...各个都是好手,使用这些高阶函数能极大的方便我们快速处理数据
44 0
使项目支持es6新语法可选链“?.“以及双问号“??“
使项目支持es6新语法可选链“?.“以及双问号“??“
261 0
|
前端开发
前端学习案例4-正则概述-字符组的简写
前端学习案例4-正则概述-字符组的简写
78 0
前端学习案例4-正则概述-字符组的简写
|
存储 JavaScript 前端开发
Java细节:单等于号、双等于号、三等于号(js中才有)的作用及双等于号和equals(源码)的区别
Java细节:单等于号、双等于号、三等于号(js中才有)的作用及双等于号和equals(源码)的区别
349 0
|
C语言
【C语言】【逻辑非】双感叹号的用法
【C语言】【逻辑非】双感叹号的用法
240 0
ES6新特性:函数优化(传参、箭头函数、简写)
ES6新特性:函数优化(传参、箭头函数、简写)
204 0
ES6新特性:函数优化(传参、箭头函数、简写)