Question

下面的代码部分可以使用Vue CLI 2正确编译，但是在我的Nuxt项目中却不能：

// Populate row with times + total of times at the end of the row
let total = 0
['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'].forEach(day => {
  const temp = weekTimes.find(x => x.date === this[day])
  if (temp) {
    this[day + 'Time'] = temp.hours
    total += parseInt(temp.hours)
  } else {
    this[day + 'Time'] = ''
  }
})

第三行（['mon', 'tue'...）与以下编译错误相关联：

预期缩进12个空格，但发现10个意外换行符   在对象和[属性访问权限之间

意外使用逗号运算符

带有主体的箭头函数参数周围的预期括号   花括号

这仍然是有效的ES6代码，那么为什么编译器对此有问题？

Answer 1

省略分号的危险。

此：

let total = 0
['mon', 'tue'].forEach(day => {

将被视为：

let total = 0['mon', 'tue'].forEach(day => {

0[...]部分将被视为尝试访问值0上的属性。尝试在浏览器控制台中运行此示例：

0['toFixed'](2)

这只是通过传递参数2来调用值toFixed的{{1}}方法的方法。

错误的逗号运算符部分指的是0部分。尝试在控制台中输入以下内容：

'mon', 'tue'

尽管很少使用像这样的逗号运算符，但是您应该发现它的运算结果为最后一个值，因此在这种情况下为'mon', 'tue'。因此，使用我之前的示例，有点像这样：

'tue'

这里0['toString', 'toFixed'](2)被有效地忽略了，它像我之前的示例一样仅调用toString。 Linters会检查逗号的这种用法，因为它们几乎总是由错误解释的逗号引起的。就像您的情况一样，通常将其用作数组中的定界符，而不是逗号运算符。

回到您的代码，这：

toFixed

将尝试访问值为let total = 0 ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'].forEach(day => {的{{1}}的{{1}}属性。然后它将尝试在'sun'上调用0方法，这将引发错误。

因此，即使您的代码有效，也不会按预期运行。短毛猫正在发现这些错误，并试图帮助您解决它们。

最简单的解决方案是插入分号。

此警告：

箭头函数参数周围带有括号的期望括号

只是一条规则。它期望您将undefined写为forEach。从正确性的角度来看，代码没有什么错，它实际上只是强加了代码风格首选项的轻弹。

forEach（）调用无法编译

1 个答案: