Javascript报错：管道元素中“,”后缺少表达式

在使用管道操作符（|）进行多组数据处理时，JS会经常出现管道元素中“,”后缺少表达式的错误提示。这个错误很常见，但是解决方法却很简单。

错误提示

先来看一下这个错误的具体提示：

Uncaught SyntaxError: Unexpected token ',' at line x column y

这个错误提示告诉我们，在某行代码的某一列位置，有一个意外的逗号。

解决方法

这个错误的解决方法很简单：检查你的代码，并检查逗号后面是否跟着一个表达式。

让我们看几个例子：

示例 1 - 逗号后跟了换行符

以下示例中，我们使用管道操作符对一个数组进行了两次映射，但是出现了管道元素中“,”后缺少表达式的错误提示：

const arr = [1, 2, 3];

const result = arr
  .map(x => x * 2)
  .map(x =>
    x + 1,
  );

这个错误的原因在于，我们在第二次映射的入参中，逗号后面有一个换行符，既不是表达式也不是语句块。所以，我们需要把它移动到逗号前面，使其成为一个表达式：

const arr = [1, 2, 3];

const result = arr
  .map(x => x * 2)
  .map(x => x + 1);

示例 2 - 表达式缺少

以下示例中，我们使用管道操作符对一个字符串进行了两次处理，但是出现了管道元素中“,”后缺少表达式的错误提示：

const str = 'hello';

const result = str
  .toUpperCase()
  .replace('O', );

这里出错的原因是，我们在replace方法的入参中没有指定替换成什么字符或字符串。

为了修复这个问题，我们需要在逗号后面添加一个字符或字符串，或者直接删除这个逗号：

const str = 'hello';

const result = str
  .toUpperCase()
  .replace('O', 'o');

结论

管道元素中“,”后缺少表达式的错误提示经常出现在管道操作符使用不当的情况下。只需要仔细检查你的代码，确保在逗号后面跟着一个表达式即可解决这个问题。