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、如果对你有帮助的话,记得给个赞赏加关注,鼓励一下。

相关文章
|
JSON 前端开发 JavaScript
JavaScript拷贝大作战:浅拷贝vs深拷贝
JavaScript拷贝大作战:浅拷贝vs深拷贝
294 0
|
前端开发 Java C++
三种实用ES6 数组内对象去重方法
三种实用ES6 数组内对象去重方法
931 0
|
Java 数据库连接 Maven
SSM框架整合:掌握Spring+Spring MVC+MyBatis的完美结合!
SSM框架整合:掌握Spring+Spring MVC+MyBatis的完美结合!
|
8月前
|
应用服务中间件 Go Android开发
通过外部链接启动 Flutter App(详细介绍及示例)
本文介绍了通过外部链接启动 Flutter App 的两种方式:`firebase_dynamic_links` 和 `app_links`。前者由 Firebase 提供,支持生成分享链接并自动处理未安装应用时的跳转(如跳转到应用商店),但已于2025年8月停止服务;后者则需开发者自行处理未安装应用时的重定向逻辑。文中详细说明了两者的配置步骤、代码实现及注意事项,推荐使用 `app_links` 进行新项目开发。
295 2
|
11月前
|
Java 测试技术 API
探索软件测试中的自动化框架选择####
在当今快节奏的软件开发周期中,自动化测试已成为确保产品质量与加速产品迭代的关键策略。本文深入剖析了自动化测试的核心价值,对比分析了市场上主流的自动化测试框架,旨在为项目团队提供选型时的考量因素及实践指南,助力高效构建适应未来变化的自动化测试体系。 ####
180 40
|
JavaScript 前端开发 API
vite中如何根据不同环境配置打包规则?一个if语句即可搞定!
【8月更文挑战第1天】vite中如何根据不同环境配置打包规则
773 5
vite中如何根据不同环境配置打包规则?一个if语句即可搞定!
|
Web App开发 iOS开发 容器
Vue3PDF预览(vue3-pdf-app)
`vue3-pdf-app` 插件提供了一个简单而强大的 PDF 预览解决方案。通过 `<a>` 标签即可快速预览 PDF 文件。为满足更复杂的定制需求,提供了 `PDFViewer.vue` 组件,基于 `vue3-pdf-app@1.0.3` 封装,支持多种功能如缩放、旋转、全屏预览、打印等,并可自定义主题颜色与语言。组件属性包括文件地址 (`src`)、预览容器尺寸 (`width`, `height`)、默认缩放规则 (`pageScale`) 和主题 (`theme`) 等。适用于多种浏览器,方便集成到项目中。
2527 2
Vue3PDF预览(vue3-pdf-app)
在Linux中,如何在Linux中查看当前路径?
在Linux中,如何在Linux中查看当前路径?
defineProps和defineEmits
本文介绍了Vue 3中的`defineProps`和`defineEmits`函数的用法,其中`defineProps`用于声明组件的属性(props),以便从父组件接收数据,而`defineEmits`用于定义组件可以触发的自定义事件,从而实现子组件向父组件传递数据的功能。
|
数据可视化 JavaScript
< elementUi 中 树状侧边栏,机构单位 - 岗位 字典 >
本文介绍了如何在Vue + ElementUI环境中,利用Tree组件和Dropdown下拉菜单实现组织单位、岗位的树状数据可视化展示及操作。案例展示了包含头部搜索、节点下拉菜单功能的树形控件,支持增删改查操作。同时,提供了效果截图。注意,案例中混合使用了Vue2和Vue3语法,可能存在潜在问题,仅作参考。
349 0
< elementUi 中 树状侧边栏,机构单位 - 岗位 字典 >