在 ECMAScript 2019 中，新增了两个数组方法：flat 和 flatMap。这些新方法可以使代码更简洁，更易于阅读和编写。本文将介绍这两个方法，并提供示例代码和指导。
flat
在 JavaScript 中，嵌套数组是很常见的。有时候我们需要将嵌套的数组展开，以便进行迭代或其他操作。ES2019 中的 flat 方法可以很好地解决这个问题。
flat 方法可以将嵌套数组展平成一个新数组。它接受一个整数参数 depth，它表示需要展开的嵌套层数。如果没有提供该参数，则默认为 1。
以下是一个展示 flat 方法的示例代码：
----- ----------- - --- -- --- -- --- ----- ----- -------------- - -------------------- ---------------------------- -- --- -- -- -- -- --
在这个示例中，我们有一个嵌套的数组，其中包含三个元素。第一个和第二个元素是单个数字，第三个元素是另一个嵌套的数组。我们调用 flat 方法并传入参数 2，以便展开嵌套数组中的所有元素。结果是一个新数组，其中包含所有元素（包括嵌套数组中的元素）。
请注意，当我们不想展开所有嵌套层级时，我们可以传递 flat 方法一个不同的数值参数。例如：
----- ----------- - --- -- --- -- --- ----- ----- -------------- - ------------------- ---------------------------- -- --- -- -- -- --- ---
在这个示例中，我们没有传递参数给 flat 方法，因此默认展开了一层。因此，嵌套数组中的第三个元素仍然是数组。
需要注意的是，如果嵌套太深，还是会报错。例如：
----- ----------- - --- -- --- -- --- -- --- -- -------- ----- -------------- - --------------------------- ---------------------------- -- --- -- -- -- -- -- -- -- --
在这个示例中，我们将 depth 参数设置为 Infinity，以便展开所有深度。这样的话，即便有很多层数，也能展开所有的嵌套数组。
flatMap
在某些情况下，我们需要同时展开和映射数组。ES2019 中的 flatMap 方法可以很好地解决这个问题。
flatMap 方法允许我们在映射数组的同时展开它。它接受一个回调函数，该函数使用各个元素进行映射，并返回一个新数组。然后，flatMap 方法将这个新数组展开，返回单个新数组。
以下是一个展示 flatMap 方法的示例代码：
----- ------- - --- -- --- ----- -------------- - ------------------- -- -- - ---- ---------------------------- -- --- -- --
在这个示例中，我们有一个包含三个数字的数组。我们调用 flatMap 方法，并给其传递了一个回调函数，该函数将每个数字都乘以 2 并返回一个新数组。最后返回的是一个新的扁平化数组，其中包含了全部的新元素。
需要注意的是，flat 方法会将返回的新数组展开成一个新的扁平数组。这些新数组的值通常不是数字，但也不能被期望类比。所以，当您使用 flatMap 时，请确保您的回调函数返回的是一个数组。
----- ------- - -- ----- ------- ---- -- -- - ----- -------- ---- -- --- ----- -------- - ------------------------ -- ------------------- ---- ---------------------- -- -------- --------
在这个示例中，我们有一个包含两个对象的数组，每个对象都包含两个键 (name 和 age) 和对应的值。我们调用 flatMap 并传递一个回调函数，该函数将给定对象的 name 键拆分成数组并返回。flatMap 会自动展开这些新数组，并返回扁平化的结果。
总结
在 ECMAScript 2019 中，引入了两个新的数组方法：flat 和 flatMap。这些方法可以使代码更简洁，更易于阅读和编写。flat 方法可以将嵌套数组展开，而 flatMap 方法可以在映射数组的同时展开它。通过在您的代码中正确地使用这些方法，您可以使代码更加清晰、稳健和易于维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b1b08b48841e9894e0c58b