为何动态变量名写法在IDE中报错但CodeSandbox可正常运行？

报错原因 #

你代码中使用的hostFile.[itemGroup]是不符合ECMAScript标准的非法语法，点运算符后不能直接跟随方括号，本地Node.js运行时严格遵循标准规范，因此直接抛出SyntaxError: Unexpected token '['错误。

CodeSandbox可正常运行的原因 #

CodeSandbox默认会给项目集成非标准语法兼容的转译配置，比如部分Babel插件会自动识别并转换这种混用的属性访问写法，或者你使用的CodeSandbox模板自带的运行时对这类错误语法做了兼容处理，因此不会触发报错。

修复方案 #

将所有hostFile.[itemGroup]替换为合法的动态属性访问写法hostFile[itemGroup]即可，还可同步优化判断逻辑提升运行效率：

sourceData.forEach(item => {
  item.itemGroups.forEach(itemGroup => {
    // 用hasOwnProperty直接判断属性是否存在，无需遍历所有key
    if (hostFile.hasOwnProperty(itemGroup)) {
      hostFile[itemGroup].add(item.name)
    } else {
      hostFile[itemGroup] = new Set()
      hostFile[itemGroup].add(item.name)
    }
  })
})

补充语法说明 #

JS中对象属性访问只有两种合法写法：

• 静态属性访问：对象.属性名，仅适用于属性名是固定的合法标识符场景
• 动态属性访问：对象[变量/表达式]，适用于属性名是动态变量、包含特殊字符的场景
  两种写法不能混用，对象.[属性]属于标准不支持的错误写法，仅在部分非官方转译环境中可被兼容。

内容的提问来源于stack exchange，提问作者Gerges Hana