什么是延伸的错误？
在前端开发中，我们常常会遇到一些比较难以理解或者不易于查找的错误。其中有一种错误被称为“延伸的错误”（extended errors），指的是 JavaScript 在执行代码时，由于某些原因导致的意外行为或错误信息。
这些错误通常会出现在语法错误、ES6 的新特性使用不当等情况下，它们可能不会在编译时报错，而是在运行时才会暴露出来。
语法错误
在 JavaScript 中，语法错误（syntax errors）通常是由于代码中存在语法错误，导致 JavaScript 引擎无法正确解析代码而报错。例如，下面的代码就存在语法错误：
let x = [1, 2, 3]
x.forEach(item => {
console.log(item)
})这段代码中，forEach 后面应该跟着一个大括号，但是却少写了一个，所以会报出类似如下的错误：
SyntaxError: missing { before function body这种错误通常很容易被发现和修复。但是在某些情况下，语法错误可能不容易被发现，例如使用 ES6 的新特性时。
ES6 新特性的错误
在 ES6 中，有很多新的特性，比如箭头函数、let 和 const 声明、模板字符串等等。这些新特性让我们的代码更加简洁、易读。但是如果使用不当，也可能会导致延伸的错误。
一个常见的例子就是在使用箭头函数时，忘记了给参数加括号。例如下面的代码：
let x = [1, 2, 3] x.forEach(item => console.log(item))
这段代码中，箭头函数后面只有一个表达式，所以可以省略大括号和 return 关键字。但是如果我在参数上忘记了加括号，就会报出类似如下的错误：
SyntaxError: expected expression, got ')'
这个错误看起来很难理解，因为它并没有直接指出问题所在。但是仔细观察错误信息，我们可以发现是少了一个左括号。
除了语法错误之外，ES6 的新特性还会带来其他类型的错误，例如变量提升问题、作用域问题等等。所以，在使用 ES6 新特性时，一定要注意使用方式和限制条件，避免出现延伸的错误。
使用 Babel 解决 ES6 延伸错误
为了避免 ES6 的延伸错误，我们可以使用 Babel 进行转译。Babel 是一个 JavaScript 编译器，可以将 ES6 代码转译成 ES5 代码。这样就可以在不支持 ES6 的浏览器上运行代码，同时也可以避免一些延伸的错误。
我们可以使用 Babel CLI 来进行转译。首先需要安装 Babel CLI：
npm install --save-dev @babel/cli
然后创建一个 .babelrc 文件，配置需要转译的规则：
{
"presets": [
"@babel/preset-env"
]
}最后，在命令行中执行转译命令：
npx babel src --out-dir lib
这个命令会将 src 目录下的所有文件转译成 ES5 的代码，并输出到 lib 目录下。如果有延伸的错误，Babel 会抛出相应的错误信息方便我们调试和排查问题。
总结
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10675
