JavaScript模式匹配的未来

免费体验 Gpt4 plus 与 AI作图神器,我们出的钱 体验地址:体验

今天,揭开一个令人兴奋的功能的面纱,这个功能通常在 Elixir 这样的函数式编程语言中看到,现在被提议用于 JavaScript ------模式匹配

"你好,JavaScript!"

动手试试。这里有一个超基础的函数叫做 greet,它接受一个带有'ID'和'role'的用户,并根据用户角色返回问候语。听起来简单吗?

javascript 复制代码
function greet({id, role}) {
    if (role == 'user'){
        return `Hello User ${id}`;
    }
    if (role == 'admin'){
        return `Hello Admin ${id}`;
    }
    if (role == 'owner'){
        return `Hello Owner ${id}`;
    }
    throw `Invalid role: ${role}`;
}

这很像一个 switch 语句,但我们很难说这完全准确------它笨拙,充斥着讨厌的if 语句,对于一个未定义的角色还有一个错误陷阱。

javascript 复制代码
function greet({id, role}) {
    switch (role){
        case 'user':
            return `Hello User ${id}`;
        case 'admin':
            return `Hello Admin ${id}`;
        case 'owner':
            return `Hello Owner ${id}`;
        default:
            throw `Invalid role: ${role}`;
    }
}

switch 还可以,但这里我们遇到了一个问题--如果不使用一些奇怪的黑客手段,例如在 true 上进行切换,它就无法完成足够的工作。

简化复杂性的模式匹配艺术

模式匹配 可以结束这种复杂性。想象一个你有一个 when 子句可以救我们摆脱这种冗长的迷宫的世界。

简单地说,模式匹配允许我们检查一个输入是否符合一个模式或一个特定的类型。

在继续之前,需求注意的------现在看的是一个提议。所以,这可能还不是最终的语法。

css 复制代码
let greet = match (input) {
  when { role: "user" }: `Hello User ${input.id}`,
  when { role: "admin" }: `Hello Admin ${input.id}`,
  when { role: "owner" }: `Hello Owner ${input.id}`,
  _: throw `Invalid role: ${input.role}`,
}

在这里,match函数接受输入,when子句检查 input 中的角色是否匹配指定的角色 - user, admin, owner

这样更清晰,不是吗?不再有 ifswitch clutter - 只有一个简洁而干净的表达式。这不仅允许更易读和可维护的代码,而且为基于输入属性的更简单的"行内"决策铺平了道路,使条件、行为和结果非常容易同时阅读。

这会改变JavaScript的未来吗?

我真的相信模式匹配可以极大地改善JavaScript的未来。通过直接从Elixir这样的其他语言中获取关键的想法,并与JavaScript的强大灵活性结合,我们肯定可以为"JavaScript之家"增加一个顶石。

但是,我希望看到我们最喜欢的语言走得更远,尤其是当模式匹配与函数定义结合使用时。这可能会让我们走出舒适区,但一旦你开始探索它,你就会意识到它所拥有的力量和它带来的简单性。

python 复制代码
def greet(%{role: "user", id: id}), do: `Hello User #{id}`
def greet(%{role: "admin", id: id}), do: `Hello Admin #{id}`
def greet(%{role: "owner", id: id}), do: `Hello Owner #{id}`
def greet(%{role: _}), do: throw `Invalid role`

在这个 Elixir 代码示例中,我们根据输入重新定义了函数三次。除了它给予的直接清晰性外,解剖这一点,我们注意到它做了两件事------它修剪了句法复杂性,显著减少了理解代码所需的心智负担。

希望有一天JavaScript能够实现这种基于模式的函数重载,相信这将带来一些最好的编程体验。就JavaScript的未来而言,作者认为模式匹配是最令人兴奋的前景之一。

交流

首发于公众号 大迁世界,欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问?我来回答

本文 GitHub github.com/qq449245884... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

相关推荐
全栈前端老曹4 分钟前
【MongoDB】深入研究副本集与高可用性——Replica Set 架构、故障转移、读写分离
前端·javascript·数据库·mongodb·架构·nosql·副本集
NCDS程序员34 分钟前
v-model: /v-model/ :(v-bind)三者核心区别
前端·javascript·vue.js
小杨同学呀呀呀呀1 小时前
Ant Design Vue <a-timeline>时间轴组件失效解决方案
前端·javascript·vue.js·typescript·anti-design-vue
qq_532453531 小时前
使用 Three.js 构建沉浸式全景图AR
开发语言·javascript·ar
Mr Xu_10 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠10 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
sleeppingfrog10 小时前
zebra通过zpl语言实现中文打印(二)
javascript
未来之窗软件服务11 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
baidu_2474386111 小时前
Android ViewModel定时任务
android·开发语言·javascript
VT.馒头12 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript