JS 高阶函数进化历程：从 ES5 的 map()/filter() 到 ES8 的 flatMap()

JS 高阶函数进化历程：从 ES5 的 map()/filter() 到 ES8 的 flatMap()

随着前端技术的不断发展，JS 高阶函数也在不断进化。在 ES5 中，map() 和 filter() 是我们经常使用的高阶函数，它们可以帮助我们快速处理数组中的数据。而在 ES8 中，新增了 flatMap() 函数，它更加强大，可以更方便地处理多维数组。本文将详细介绍 JS 高阶函数的进化历程，以及它们对前端开发的指导意义。

ES5 的 map() 和 filter()

map() 和 filter() 是 ES5 中最常用的高阶函数之一。它们都是对数组进行操作的函数。

map() 函数可以将数组中的每个元素都执行一次回调函数，并返回一个新的数组。这个新数组的每个元素都是回调函数的返回值。例如：

const arr = [1, 2, 3];
const newArr = arr.map((item) => item * 2);
console.log(newArr); // [2, 4, 6]

filter() 函数可以根据条件过滤数组中的元素，并返回一个新的数组。例如：

const arr = [1, 2, 3];
const newArr = arr.filter((item) => item > 1);
console.log(newArr); // [2, 3]

这两个函数在日常开发中非常实用，可以帮助我们快速处理数组中的数据。但是，它们只能处理一维数组，对于多维数组的处理就比较麻烦了。

ES8 的 flatMap()

在 ES8 中，新增了 flatMap() 函数，它更加强大，可以更方便地处理多维数组。

flatMap() 函数的作用与 map() 类似，也是对数组中的每个元素执行一次回调函数，并返回一个新的数组。不同的是，flatMap() 函数会将回调函数的返回值压平成一个新的数组。例如：

const arr = [[1, 2], [3, 4], [5, 6]];
const newArr = arr.flatMap((item) => item.map((i) => i * 2));
console.log(newArr); // [2, 4, 6, 8, 10, 12]

在上面的例子中，我们使用了 flatMap() 函数对多维数组进行了操作。首先，我们将每个子数组中的元素都乘以 2，然后使用 flatMap() 函数将所有的元素压平成一个新的数组。这样，我们就可以方便地处理多维数组了。

除了可以处理多维数组之外，flatMap() 函数还可以帮助我们简化代码。例如，如果我们需要对一个数组中的元素进行操作，并将操作结果组成一个新的数组，可以使用 map() 函数和 flatten() 函数来实现：

const arr = [1, 2, 3];
const newArr = arr.map((item) => [item * 2]).flatten();
console.log(newArr); // [2, 4, 6]

但是，使用 flatMap() 函数可以更加简洁：

const arr = [1, 2, 3];
const newArr = arr.flatMap((item) => item * 2);
console.log(newArr); // [2, 4, 6]

这样，我们就可以使用更少的代码完成同样的操作。

总结

JS 高阶函数是前端开发中非常实用的工具，它们可以帮助我们快速处理数组中的数据。在 ES5 中，map() 和 filter() 是我们经常使用的高阶函数。但是，它们只能处理一维数组，对于多维数组的处理就比较麻烦了。在 ES8 中，新增了 flatMap() 函数，它更加强大，可以更方便地处理多维数组。除了可以处理多维数组之外，flatMap() 函数还可以帮助我们简化代码。因此，在日常开发中，我们应该多加利用高阶函数，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6610b51dd10417a222156754