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 方法是按照对象自身属性的枚举顺序来返回值的。然而，如果对象属性的顺序是由属性添加顺序而非属性键名决定的，则这两个方法的返回值可能是无序的。例如：
const obj = { c: 1, b: 2, a: 3 }
console.log(Object.values(obj)) // [ 1, 2, 3 ]
console.log(Object.entries(obj)) // [ [ 'c', 1 ], [ 'b', 2 ], [ 'a', 3 ] ]上述代码中，Object.values 方法和 Object.entries 方法的返回值并没有按照属性键名的字母顺序来进行排序。这在一些场景下可能会导致程序出现预期之外的结果。
为了避免这个问题，我们可以先将对象的属性键名按照字母序进行排序，再使用 Object.values 或 Object.entries 方法。示例如下：
const obj = { c: 1, b: 2, a: 3 }
const sortedKeys = Object.keys(obj).sort()
console.log(sortedKeys) // [ 'a', 'b', 'c' ]
console.log(sortedKeys.map(key => obj[key])) // [ 3, 2, 1 ]
console.log(Object.entries(obj).sort(([k1], [k2]) => k1.localeCompare(k2))) // [ [ 'a', 3 ], [ 'b', 2 ], [ 'c', 1 ] ]3. 字符串填充方法的误用
ES8 引入了字符串填充的新方法 padStart 和 padEnd，可以用来在字符串的开头或结尾填充指定的字符以达到一定长度。例如：
const str = 'Lione' console.log(str.padStart(7, 'J').padEnd(10, 'A')) // JLioneAAAJ
然而，在使用这两个方法时需要注意，如果目标长度小于等于原始字符串长度，则不会进行填充。例如：
const str = 'Lione' console.log(str.padStart(5, 'J')) // Lione
上述代码中，目标长度为 5，等于原始字符串长度 5，因此不需要填充。这种情况下，使用字符串填充方法是没有任何作用的，需要我们在逻辑处理中加以考虑。
总结
ES8 中的新特性和语法糖为我们开发带来了很多便利，但也可能会带来一些问题。本文列举了三个在 ES8 中可能会遇到的坑，并给出了相关的解决方案。在实际开发中，我们需要对 ES8 中的新特性和语法糖有所了解，并加以运用和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6456480e968c7c53b097ce1a