ES8，也就是 ECMAScript 2017，是 JavaScript 的一次重要升级。它引入了许多新特性和语法糖，让开发变得更加高效和便捷。然而，这些新特性也可能会带来一些坑点，需要我们在实际开发中加以注意。
本文将列举几个在 ES8 中可能会遇到的坑，并提供相关解决方案。
1. 异步迭代器的错误处理
ES8 引入了异步迭代器（AsyncIterator）这一新特性，它可以让我们在异步操作中按顺序依次遍历数据。然而，要想在异步迭代中正确处理异常情况却并不简单。
考虑以下示例代码：
----- --------- ----------------- ---- -
--- ---- - - ------ - -- ---- ---- -
----- --- --------------- -- ------------------- ------
----- -
-
-
----- --------- ---------------- ---- -
--- ----- ------ --- -- ----------------- ----- -
-- ---- -- --- - -- -
----- --- ---------- --- -------
-
----- --- - -
-
-
------ ---------- -
--- -
--- ----- ------ --- -- ------------ --- -
----------------
-
- ----- ----- -
------------------
-
----上例中，我们定义了两个异步迭代器 asyncRange 和 halfRange。asyncRange 每秒钟输出一个数字，halfRange 在每个数字处都会判断是否达到了数据的一半，若达到则抛出错误。最后，我们在主程序中使用 halfRange 迭代器，并将异常情况捕捉到。
然而，不幸的是，在 ES8 中，异常情况可能不会像我们期望的那样被正确处理。具体来说，当在异步迭代器中抛出异常时，程序会在迭代器内部阻塞，而不会像同步代码那样直接抛出异常。这样就会导致 halfRange 迭代器中后续所有的异步操作都没有了执行机会，最终导致整个程序无法退出。
为了解决这个问题，我们需要手动处理异常情况。ES8 为 for await...of 提供了一个新语法 break，可以用来跳出循环并结束迭代器。因此，我们可以在捕捉到异常时显式调用 break 方法，让异步迭代器结束迭代：
----- --------- ---------------- ---- -
--- ----- ------ --- -- ----------------- ----- -
-- ---- -- --- - -- -
----- --- ---------- --- -------
-
----- --- - -
-- -------------- - ---- -
----- -- ---- -----------
-
-
-2. Object.values 和 Object.entries 方法的无序性
ES8 中 Object.values 和 Object.entries 方法是按照对象自身属性的枚举顺序来返回值的。然而，如果对象属性的顺序是由属性添加顺序而非属性键名决定的，则这两个方法的返回值可能是无序的。例如：
----- --- - - -- -- -- -- -- - - ------------------------------- -- - -- -- - - -------------------------------- -- - - ---- - -- - ---- - -- - ---- - - -
上述代码中，Object.values 方法和 Object.entries 方法的返回值并没有按照属性键名的字母顺序来进行排序。这在一些场景下可能会导致程序出现预期之外的结果。
为了避免这个问题，我们可以先将对象的属性键名按照字母序进行排序，再使用 Object.values 或 Object.entries 方法。示例如下：
----- --- - - -- -- -- -- -- - - ----- ---------- - ----------------------- ----------------------- -- - ---- ---- --- - ------------------------------ -- ---------- -- - -- -- - - ------------------------------------------- ----- -- ---------------------- -- - - ---- - -- - ---- - -- - ---- - - -
3. 字符串填充方法的误用
ES8 引入了字符串填充的新方法 padStart 和 padEnd，可以用来在字符串的开头或结尾填充指定的字符以达到一定长度。例如：
----- --- - ------- --------------------------- --------------- ----- -- ----------
然而，在使用这两个方法时需要注意，如果目标长度小于等于原始字符串长度，则不会进行填充。例如：
----- --- - ------- --------------------------- ----- -- -----
上述代码中，目标长度为 5，等于原始字符串长度 5，因此不需要填充。这种情况下，使用字符串填充方法是没有任何作用的，需要我们在逻辑处理中加以考虑。
总结
ES8 中的新特性和语法糖为我们开发带来了很多便利，但也可能会带来一些问题。本文列举了三个在 ES8 中可能会遇到的坑，并给出了相关的解决方案。在实际开发中，我们需要对 ES8 中的新特性和语法糖有所了解，并加以运用和处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6456480e968c7c53b097ce1a