Array.prototype.flat 和 flatMap 的嵌套处理

在 JavaScript 的日常开发中，处理嵌套数组是一项常见任务。ES10 (ECMAScript 2019) 引入了两个非常实用的数组方法：Array.prototype.flat() 和 Array.prototype.flatMap()，它们极大地简化了嵌套数组的处理。本文将深入探讨这两个方法的用法、原理以及实际应用场景。

Array.prototype.flat()

基本用法

flat() 方法创建一个新数组，其中所有子数组元素递归地连接到指定深度。

javascript 复制代码

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

// 默认深度为1
console.log(nestedArray.flat()); // [1, 2, [3, [4]]]

// 指定深度为2
console.log(nestedArray.flat(2)); // [1, 2, 3, [4]]

// 使用Infinity展开所有嵌套数组
console.log(nestedArray.flat(Infinity)); // [1, 2, 3, 4]

参数说明

depth（可选）：指定要提取嵌套数组的结构深度，默认为1
如果传入Infinity，则会展开所有层级的嵌套数组
如果传入0或负数，则返回原数组的浅拷贝

实际应用

扁平化多维数组：

javascript 复制代码

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

处理API返回的嵌套数据：

javascript 复制代码

const apiResponse = {
  data: [
    { id: 1, items: ['a', 'b'] },
    { id: 2, items: ['c', 'd'] }
  ]
};

const allItems = apiResponse.data.flatMap(item => item.items);
console.log(allItems); // ['a', 'b', 'c', 'd']

Array.prototype.flatMap()

基本用法

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它相当于map()后跟深度为1的flat()，但效率更高。

javascript 复制代码

const arr = [1, 2, 3];

// 使用map + flat
console.log(arr.map(x => [x * 2]).flat()); // [2, 4, 6]

// 使用flatMap
console.log.flatMap(x => [x * 2]); // [2, 4, 6]

与map的区别

javascript 复制代码

const sentences = ["Hello world", "Goodbye moon"];

// 使用map会得到嵌套数组
console.log(sentences.map(x => x.split(' '))); // [["Hello", "world"], ["Goodbye", "moon"]]

// 使用flatMap会得到扁平化后的数组
console.log(sentences.flatMap(x => x.split(' '))); // ["Hello", "world", "Goodbye", "moon"]

实际应用

过滤并映射数组：

javascript 复制代码

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

// 只保留偶数并乘以2
const result = numbers.flatMap(n => n % 2 === 0 ? [n * 2] : []);
console.log(result); // [4, 8]

处理嵌套数据结构：

javascript 复制代码

const books = [
  { title: "Book 1", tags: ["fiction", "adventure"] },
  { title: "Book 2", tags: ["non-fiction", "history"] }
];

const allTags = books.flatMap(book => book.tags);
console.log(allTags); // ["fiction", "adventure", "non-fiction", "history"]

性能考虑

虽然flatMap()可以替代map().flat()的组合，但flatMap()通常性能更好，因为它避免了创建中间数组。在处理大型数据集时，这种性能差异可能会变得明显。

浏览器兼容性

ES10特性在现代浏览器中得到了广泛支持，但对于旧版浏览器，可能需要使用Babel等工具进行转译，或者提供polyfill：

javascript 复制代码

// 简单的flat polyfill
if (!Array.prototype.flat) {
  Array.prototype.flat = function(depth = 1) {
    return this.reduce((acc, val) => {
      return acc.concat(
        depth > 1 && Array.isArray(val) ? val.flat(depth - 1) : val
      );
    }, []);
  };
}

// 简单的flatMap polyfill
if (!Array.prototype.flatMap) {
  Array.prototype.flatMap = function(callback, thisArg) {
    return this.map(callback, thisArg).flat(1);
  };
}

结论

ES10引入的flat()和flatMap()方法为JavaScript开发者提供了更简洁、更直观的方式来处理嵌套数组结构。它们不仅使代码更加清晰易读，还能提高开发效率。在日常开发中，合理使用这些方法可以显著简化数组操作逻辑，特别是在处理复杂数据结构时。

随着JavaScript语言的不断发展，掌握这些新特性将帮助开发者编写更现代化、更高效的代码。