解决在 ES9 中使用解构赋值时的错误用法

解构赋值是 ES6 中新增的特性之一，可以极大的提高开发效率并让代码更加简洁。在 ES9 中，解构赋值得到了更进一步的加强和应用，不过，如果使用不当会导致代码出现错误，甚至是难以排查的错误。本文将介绍在 ES9 中使用解构赋值时可能出现的错误，并给出解决方案和示例代码。

常见错误

在 ES9 中，我们经常会使用到对象的解构赋值，并且很多人都会使用以下的方式来获取对象中的值：

const { a, b, c } = obj;

如果对应的属性不存在或者是 undefined，会出现 TypeError 错误，如下代码：

const obj = { a: 1, b: 2 };
const { a, b, c } = obj;
console.log(c); // TypeError: Cannot destructure property 'c' of 'undefined' as it is undefined.

这个错误发生的原因是因为 {} 实际上是字符串字面量语法的一部分，这部分代码最终将会被解析为如下的代码：

var _a = obj.a,
    _b = obj.b,
    _c = obj.c;

这里 _c 是没有被定义的，因为在原始的 obj 对象中并没有 c 属性，所以这部分代码会抛出一个错误。

类似的，数组的解构也会有类似的错误：

const arr = [1, 2, 3];
const [a, b, c, d] = arr;
console.log(d); // TypeError: Cannot destructure property 'd' of 'undefined' as it is undefined.

解决方案

为了避免这个问题，我们可以对解构赋值的变量进行默认值的设置，如下示例所示：

const obj = { a: 1, b: 2 };
const { a, b, c = 3 } = obj;
console.log(c); // 3

这样，我们就能够在原有的语法下设置默认值，而不会出现不必要的 TypeError 错误。在数组的解构赋值中也是同样的道理：

const arr = [1, 2, 3];
const [a, b, c, d = 4] = arr;
console.log(d); // 4

深度学习

除了解构赋值中的默认值问题，ES9 中还有许多其他的新特性值得我们去学习和掌握。这里给出一些常用的特性和示例代码。

Promise.prototype.finally()

在 Promise 中，如果需要在 Promise 被解决或拒绝时进行一些统一的处理，我们一般会使用 .then() 或 .catch() 来解决。Promise.prototype.finally() 是 ES9 中新增的用于在 Promise 被完成时执行清理操作的方法。

-- -------------------- ---- -------
-------
  ----------- -- -
    -- -------
  --
  ------------ -- -
    -- -----
  --
  ----------- -- -
    -- ------ --------
  --

rest 张量

在数组中，我们可以使用 rest 张量来收集多余的元素。ES9 中，这个语法在对象解构中也得到了支持。如下示例所示：

const obj = { a: 1, b: 2, c: 3 };
const { a, ...rest } = obj;
console.log(rest); // { b: 2, c: 3 }

async/await

ES9 中，async 和 await 是异步编程的重要特性，可以用于充分利用 JavaScript 提供的异步执行模块，对代码进行更加高效的书写和优化。

async function foo() {
  try {
    const result = await fetch('http://...'); // 发送异步请求
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

指导意义

在 ES9 中，解构赋值得到了更加广泛的使用和应用，在编程中发挥着重要的作用。然而，如果使用不当，会导致代码出现错误，影响程序的正常运行。在解构赋值中，我们应该尽可能的设置默认值，避免不必要的 TypeError 错误。此外，我们还应该学习其他的 ES9 特性，充分利用这些特性来提高代码效率和质量。

结论

ES9 中的解构赋值是我们在编写 JavaScript 代码中常常用到的一种技术，但是如何正确的使用解构赋值对于代码能否正常运行至关重要。解决问题的方法是需要正确的设置默认值，以免出现不必要的 TypeError 错误。除此之外，我们还可以学习其他的 ES9 特性，充分利用这些特性来提高代码效率和质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674968d5a1ce0063545cce76