前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决 Unexpected lexical declaration in case block 的问题

解决 Unexpected lexical declaration in case block 的问题

作者头像
腾讯IVWEB团队
发布2020-06-24 16:13:12
33.2K1
发布2020-06-24 16:13:12
举报

使用新版的 es-lint 的时候扫描旧的项目,发现报了

Unexpected lexical declaration in case block(no-case-declarations)

这么一个错误提示

当时很奇怪,就去查了一下文档,发现中文文档中解释比较简单

该规则禁止词法声明 (let、const、function 和 class) 出现在 case或default 子句中。

https://cn.eslint.org/docs/rules/no-case-declarations

几番实验后,其实归根结底是代码作用域的问题:

代码语言:javascript
复制
switch (2) {
  case 1:
    function f () {console.log('Wanna a girl friend !')}
    break
  case 2:
    f() // 会输出:Wanna a girl friend !
    break
}
代码语言:javascript
复制
switch (1) {
  case 1:
    let foo = 1
    break
  case 2:
    let foo = 2
    console.log(foo) // 会报错:Uncaught SyntaxError: Identifier 'foo' has already been declared
    break
}

如上实验可知,就算switch 逻辑没有走到 case 1 的代码块,由于作用域提升,会导致case 1 影响到case 2

所以,eslint 会对这种情况做校验,现在必须 使用花括号将代码块确定具体的作用域

代码语言:javascript
复制
switch (1) {
  case 1: {
    // do something
    break
  }
}

从而限制上述问题的发生

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档