循环处理是前端开发中经常会用到的操作，而在 ES2021 中，有一些新的语法和方法可以让我们更加方便、高效地进行循环处理。在本文中，我们将介绍一些 ES2021 的新功能，以及如何使用最佳实践进行循环处理。
for...of 循环
ES6 中引入了 for...of 循环语句，可以遍历可迭代对象中的值。ES2021 将其语法进行了扩展，现在我们可以在 for...of 循环中使用 await 关键字，也就是说我们可以在异步循环中通过 for...of 来遍历 Promise，这大大简化了异步操作的处理。
示例代码：
-- -------------------- ---- -------
----- -------- ----------- -
----- -------- - -------------------- ------------------- --------------------
--- ----- ------ ------- -- --------- -
----------------- ---------
-
-
------------ -- - - -在上面的代码中，asyncLoop 函数中的 for await (const promise of promises) 就是一个异步循环，它可以依次遍历 promises 数组中的 Promise，等待 each Promise 执行结束后，打印其结果。
for...in 循环
for...in 循环可以遍历对象的属性，但是遍历顺序是不固定的，并且会将继承的属性也遍历出来，因此在某些情况下会出现不可预期的结果。为了规避这些问题，我们应该避免使用 for...in 循环。
相较于 for...in，ES2021 中引入了 Object.keys() 和 Object.values() 方法，可以分别获取对象的键和值，这样我们就可以更加高效、稳定地遍历对象了。
示例代码：
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- - -- -- ----- --- --- ------ --- -- ----------------- - ----------------- - -- ----- ----- --- ------ ----- -- ------------------- - ------------------- -
在上面的代码中，我们使用了 Object.keys() 和 Object.values() 方法来分别遍历 obj 对象的键和值。
Array.flatMap() 方法
在循环处理数组时，我们有时候需要对数组进行扁平化处理，以便得到我们需要的数据。ES2021 中新增的 Array.flatMap() 方法可以帮助我们快速实现扁平化数组，并对扁平化后的数组进行操作。
示例代码：
const arr = [[1, 2], [3, 4], [5, 6]]; const flattenArr = arr.flatMap((item) => item); console.log(flattenArr); // [1, 2, 3, 4, 5, 6]
在上面的代码中，使用 Array.flatMap() 方法将二维数组 arr 扁平化为一维数组，并将其赋值给 flattenArr 变量。
最佳实践
在开发过程中，我们应该尽量避免使用 for...in 循环，而是使用 Object.keys() 和 Object.values() 方法进行对象属性的遍历。对于数组的循环处理，我们可以使用 for...of 循环语句，Array.forEach() 方法，或 Array.map() 方法来进行操作。另外，在需要进行数组扁平化处理时，我们可以使用 Array.flatMap() 方法来简化操作。
总结
ES2021 中新增的语法和方法可以帮助我们更加高效、便捷地进行循环处理，不仅提高了代码的可读性和稳定性，还可以大大减少不必要的代码量和时间成本。在撰写前端代码时，我们应该遵循最佳实践，以便更好地优化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64799a05968c7c53b0596fe2