在 ES9 中，新增了一个 Array.prototype.flatMap() 方法，它可以将数组中的每个元素进行转换，并将结果合并成一个新的数组。这个方法在处理数组数据时非常有用，本文将详细介绍如何正确使用它。
什么是 Array.prototype.flatMap() 方法？
Array.prototype.flatMap() 方法是一个用于数组对象的高阶函数。它接收一个回调函数，该函数将被应用于每个数组元素，并返回一个新的数组。与 Array.prototype.map() 不同的是，flatMap() 还可以将返回的数组扁平化为一个新的数组。
如何使用 Array.prototype.flatMap() 方法？
Array.prototype.flatMap() 方法的语法如下：
------------------------------------- ------- ---------- ---------
其中，callback 是一个回调函数，它可以接收三个参数：
- currentValue：当前数组元素的值。
- index：当前数组元素的索引。
- array：原始数组对象。
回调函数必须返回一个数组，该数组将被合并为一个新的数组。如果回调函数返回的是一个空数组，则会被忽略。
下面是一个使用 Array.prototype.flatMap() 方法的示例：
----- --- - --- -- -- --- ----- ------ - ------------------- -- ------ - ---- -------------------- -- --- -- -- --
在这个例子中，我们定义了一个数组 arr，它包含了四个数字。我们使用了 Array.prototype.flatMap() 方法，将每个元素乘以 2，并将结果合并成一个新的数组。
Array.prototype.flatMap() 方法的注意事项
使用 Array.prototype.flatMap() 方法时，需要注意一些细节：
1. 返回的数组不能是嵌套的
如果回调函数返回的是一个嵌套的数组，那么它们将被扁平化为一个新的数组。例如：
----- --- - --- -- -- --- ----- ------ - ------------------- -- ------- - ----- -------------------- -- --- -- -- --
在这个例子中，我们将每个元素乘以 2 并放入一个数组中。由于返回的是一个嵌套的数组，所以最终结果被扁平化为了一个新的数组。
2. 返回的数组可以是空的
如果回调函数返回的是一个空数组，那么它将被忽略。例如：
----- --- - --- -- -- --- ----- ------ - ------------------- -- ---- -------------------- -- --
在这个例子中，我们将每个元素映射到一个空数组中。由于返回的是一个空数组，所以最终结果也是一个空数组。
3. 回调函数中的 this 值
可以使用第二个参数来定义回调函数中的 this 值。例如：
----- --- - --- -- -- --- ----- --- - - ----------- - -- ----- ------ - -------------------- ------- - ------ ------ - ----------------- -- ----- -------------------- -- --- -- -- --
在这个例子中，我们定义了一个对象 obj，它有一个 multiplier 属性。我们使用了 Array.prototype.flatMap() 方法，并在回调函数中使用了 this.multiplier，将每个元素乘以 2。
总结
Array.prototype.flatMap() 方法是一个非常有用的数组高阶函数，它可以将数组中的每个元素进行转换，并将结果合并成一个新的数组。需要注意的是，返回的数组不能是嵌套的，可以是空的，还可以使用第二个参数来定义回调函数中的 this 值。在实际开发中，我们可以使用它来处理数组数据，提高代码的可读性和性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6582a17ed2f5e1655ddbf806