在 JavaScript 中，数组的循环是经常用到的一个操作。大多数情况下，开发者会使用 forEach 循环来遍历数组。然而，如果你想写出更加高效、简洁的代码，使用 ES10 的一些新功能将会非常有帮助。
ES10 的新功能
ES10 主要为 JavaScript 添加了两个新的方法，以便在数组上执行更方便的操作。
1. flat() 方法
ES10 引入了一个新的 Array 扁平化方法 flat()。它可以将嵌套的数组“拉平”，使其成为单一的一维数组。
const nested = [1, 2, [3, 4, [5, 6]]]; const flattened = nested.flat(2); console.log(flattened); // 输出 [1, 2, 3, 4, 5, 6]
在上述例子中，我们使用了 flat() 方法，并传入参数 2，它告诉编译器我们将嵌套数组“拉平”至最多嵌套两层。
2. flatMap() 方法
ES10 还加入了 flatMap()，这是一个同时提供 map 和 flat 功能的组合方法。我们可以使用它来遍历并操作嵌套的数组。
const numbers = [1, 2, 3]; const doubled = numbers.flatMap(x => [x, x * 2]); console.log(doubled); // 输出 [1, 2, 2, 4, 3, 6]
在上述例子中，我们首先遍历数组并对每个元素进行操作，即返回元素自身和自身的两倍。然后，我们再将这个数组“拉平”，得到一个简单的一维数组。
在前端开发中，我们经常使用 forEach 来循环遍历数组。然而，使用 ES10 的新功能可以大大简化我们已有的代码。
1. 优化过的 forEach 循环
我们可以使用 flat() 方法对数组进行“拉平”，并在 forEach 循环中使用来优化代码。
const nested = [1, 2, [3, 4, [5, 6]]]; const flattened = nested.flat(2); flattened.forEach(item => console.log(item)); // 输出 1, 2, 3, 4, 5, 6
在上述例子中，我们使用了 flat() 方法将嵌套数组“拉平”，并使用 forEach 循环进行了遍历。这样，我们可以更加高效地处理这个数组。
2. 使用 flatMap() 和 Object.entries() 优化对象循环
在 JavaScript 中，我们也可以循环遍历对象的属性。通常情况下，我们会使用 for...in 或者 Object.keys() 等方法进行遍历。然而，在 ES10 中，使用 flatMap() 和 Object.entries() 方法可以更加简便地完成这个任务。
-- -------------------- ---- ------- ----- -------- - - -- -------- -- -------- -- ----------- ----- ----- ------- -- --------------------------------------- ------- -- - ---------------- ------- --- -- -- --- ------- --- ------- --- ----------- ----- ----- -------
在上述例子中，我们使用了 Object.entries() 方法获取对象中的所有属性及其值，然后使用 flatMap() 进行数组处理。flatMap() 方法将数组中的所有元素与指定的函数进行映射，并返回一个新数组。由于我们只想打印数组元素（而非创建新的数组），因此我们直接在 flatMap() 函数中引入打印函数。
总结
在本文中，我们介绍了 ES10 中的两个新方法 flat() 和 flatMap()，并探讨了如何使用它们来优化 forEach 循环和对象遍历的代码。虽然这些方法使用起来可能有些不熟悉，但掌握它们可以帮助你写出更加优秀、高效的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c404448841e9894a97ff1