JavaScript ES8 对象函数 flat() 和 flatMap() 的使用全面介绍-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript ES8 中，对象函数 flat() 和 flatMap() 可以让数组的操作变得更加方便。本文将会深入介绍这两个函数的使用方法和指导意义，并给出详细的示例代码以供参考。

flat()函数介绍

数组函数 flat() 是用于将嵌套数组打平并且创建一个新的数组。这个新数组不包括嵌套数组，只包含它们的元素。flat() 接受一个可选的参数 depth，用于指定嵌套数组打平的深度。如果 depth 没有指定，那么默认值是 1。

以下是 flat() 函数的语法格式：

arr.flat([depth])

其中，arr 是要处理的数组，depth 是可选的参数，代表要打平的数组的深度。当深度没有指定时，默认值为 1。

举例来说，假设我们有这样一个嵌套数组：

const arr = [[1,2], [3,4, [5,6]]];

如果我们使用 flat() 函数处理这个数组，代码将会如下所示：

const flattenedArray = arr.flat();
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

以上代码将会输出一个新数组 [1, 2, 3, 4, 5, 6]，里面没有包含任何嵌套数组元素。

如果我们想要将这个嵌套数组打平到另外一个层次，那么可以使用第二个参数 depth：

const flattenedArray = arr.flat(2);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

这里我们使用了 arr.flat(2) 将数组打平两次，结果与之前相同。

数组函数 flatMap() 是 flat() 的变体，旨在在打平数组的同时对其元素应用函数。如果数组中的每个元素也是一个数组，那么 flatMap() 可以利用 map() 函数将其转换为一个单独的元素，并将结果插入新的数组中。

以下是 flatMap() 函数的语法格式：

arr.flatMap(callback[, thisArg])

其中，arr 是要处理的数组，callback 函数接受三个参数：原数组的值，该元素的索引和原始数组本身。可选的参数 thisArg 并不常用，但可以指定回调函数的 this 值。

举例来说，假设我们有这样一个数组：

const arr = [1, 2, 3, 4];

如果我们使用 flatMap() 函数和一个简单的函数，将数组中的每个元素调整为数组后打平，代码将会如下所示：

const adjustedArr = arr.flatMap(x => [x * 2]);
console.log(adjustedArr); // [2, 4, 6, 8]

这里我们使用了 [x * 2] 将分别计算并返回每个元素的乘积数组，即 [2]、 [4]、 [6] 和 [8]，然后使用 flatMap() 函数将其打平到新数组中。

使用 flat() 和 flatMap() 函数可以极大地简化数组操作，将嵌套数组打平并且应用函数变得更加容易。在以下情况下，使用这些函数特别有用：

以下是一些具体的使用实例：

const arr = [[1, 2], [3, 4, [5, 6]]];
const index = arr.flat().indexOf(5);
console.log(index); // 3

在这个例子中，通过使用 flat() 打平嵌套数组，我们可以直接搜索该数组中的值，而不必担心是否需要在嵌套的数组中查找。

const arr = [1, 2, 3, 4];
const newArr = arr.flatMap(x => [x, x + 1]);
console.log(newArr); // [1, 2, 2, 3, 3, 4, 4, 5]

在这个例子中，通过使用 flatMap() 函数，我们将每个元素都转换为包含当前元素值和其加一的新数组。然后，使用 flatMap() 打平新数组。

JavaScript ES8 的 flat() 和 flatMap() 函数可以大大简化数组操作，并使处理嵌套数组变得更加容易。通过这篇文章，你应该对这两个函数的使用方法有了一定的了解，并有了一些实用的示例。因此，快去实践并发挥你的创造力吧！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65af3eebadd4f0e0ff8a850a