在前端开发中，错误处理和调试是非常重要的一环。经常会遇到各种错误，如语法错误、运行时错误等等。这些错误会导致程序崩溃或者出现异常情况，影响用户体验或者导致数据丢失。因此，如何正确地处理错误和调试问题，是前端开发中不可忽视的一部分。
ES12（也称为 ES2021）是 JavaScript 的最新版本，其中包含了许多新的特性和功能，其中就包括了一些有助于错误处理和调试的新特性。本文将介绍这些新特性，并且通过示例代码来演示如何利用这些新特性来解决问题。
1. Optional Chaining
Optional Chaining 是 ES12 中新增的一项特性，它允许我们在访问对象属性或者调用函数时，可以避免因为对象不存在或者函数返回值为 undefined 而导致的错误。例如，我们要获取一个对象的属性值，但是这个对象可能不存在，我们使用 Optional Chaining 可以避免出现 TypeError 的错误。
-- -------------------- ---- ------- ----- ---- - - ----- -------- -------- - ----- ----------- ------- -------- ----- - - ----- ---- - ------------------- -- ---------- ----- ------- - ---------------------- -- ---------展开代码
在上面的代码中，我们使用 Optional Chaining 来获取 user 对象的 address 属性中的 city 和 country 属性。如果 address 或者 city/country 不存在，那么返回值就是 undefined，而不会抛出 TypeError 的错误。
2. Nullish Coalescing
Nullish Coalescing 是另一个 ES12 中新增的特性，它可以用来处理变量为 null 或 undefined 的情况。在以往的代码中，我们通常使用逻辑或运算符（||）来判断变量是否为 null 或 undefined，并且给变量赋予一个默认值。但是逻辑或运算符有一个缺点，就是如果变量的值为 false 或者 0，也会被判断为 null 或 undefined。Nullish Coalescing 可以避免这个问题。
const value = null ?? 'default value' // 'default value' const num = 0 ?? 1 // 0 const str = '' ?? 'default string' // ''
在上面的代码中，我们使用 Nullish Coalescing 来判断变量是否为 null 或 undefined，并给变量赋予一个默认值。如果变量的值为 null 或 undefined，那么返回默认值；否则返回变量的实际值。例如，对于 value 变量，null 被判断为 nullish，因此返回默认值 'default value'。
3. Error Stack Trace
在开发过程中，我们经常会遇到错误，但是很难知道错误的具体位置和原因。ES12 中新增的 Error Stack Trace 特性可以帮助我们更好地定位错误。当我们抛出一个 Error 类型的异常时，可以通过 Error 对象的 stack 属性来获取错误的堆栈信息。
-- -------------------- ---- ------- -------- ----- - ----- - -------- ----- - ----- --- ---------------- ---- -------- - --- - ----- - ----- ------- - -------------------------- -展开代码
在上面的代码中，我们定义了两个函数 foo 和 bar，bar 函数抛出了一个 Error 类型的异常。在 try-catch 块中，我们调用 foo 函数，当 bar 函数抛出异常时，我们通过 console.error 打印 error.stack 属性来获取错误的堆栈信息。执行上面的代码，我们可以看到如下的输出：
Error: Something went wrong! at bar (<anonymous>:6:9) at foo (<anonymous>:2:3) at <anonymous>:9:3
从上面的输出中，我们可以看到错误发生在 bar 函数的第 6 行，调用栈依次为 foo 和 匿名函数。
4. GlobalThis
在前端开发中，我们经常需要在浏览器环境和 Node.js 环境中切换。不同的环境中，全局对象的名称不同，例如在浏览器中是 window，在 Node.js 中是 global。ES12 中新增的 GlobalThis 特性可以帮助我们在不同的环境中获取全局对象。
const globalObject = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : {} console.log(globalObject)
在上面的代码中，我们使用 GlobalThis 来获取全局对象。如果 globalThis 存在，那么使用 globalThis；否则如果 window 存在，那么使用 window；否则返回一个空对象。执行上面的代码，我们可以看到如下的输出：
Window { ... } // 浏览器环境下的全局对象
5. Debugging with Visual Studio Code
Visual Studio Code 是一个非常流行的代码编辑器，它内置了许多调试工具，可以帮助我们更方便地调试 JavaScript 代码。在 VS Code 中，我们可以使用调试面板（Debug Panel）来设置断点、单步执行代码、查看变量值等等。
要在 VS Code 中进行调试，需要先配置 launch.json 文件。在 launch.json 文件中，我们可以设置调试器的类型、入口文件、参数等等。例如，下面是一个简单的 launch.json 配置文件：
-- -------------------- ---- ------- - ---------- -------- ----------------- - - ------- ------- ---------- --------- ------- ------ --------- ---------- ----------------------------- - - -展开代码
在上面的配置中，我们使用 Node.js 调试器来调试 JavaScript 代码。通过设置 program 属性来指定入口文件，然后在 VS Code 中启动调试模式，就可以开始调试代码了。
结语
本文介绍了 ES12 中的一些新特性和功能，包括 Optional Chaining、Nullish Coalescing、Error Stack Trace、GlobalThis 等等。这些新特性可以帮助我们更好地处理错误和调试问题，提高代码的可靠性和可维护性。同时，我们还介绍了如何在 VS Code 中进行调试，希望本文对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678b22e8881faa801fa49987
