用flat（）和flatmap（）在JavaScript中平坦的阵列
#javascript #初学者 #编程 #arrays

介绍

啊，嵌套阵列，JavaScript世界的Matryoshka娃娃。它们无处不在，将数据层隐藏在数据层中。值得庆幸的是，2019年Ecmascript推出了两种新方法，即Flat（）和FlatMap（），它们更容易使用多维阵列。在本文中，我们将探讨如何使用这些方法有效地平移阵列。让我们开始！

了解Flat（）和FlatMap（）

在JavaScript中，处理嵌套阵列是一项常见且经常具有挑战性的任务。为了简化使用多维阵列的过程，我们提到Ecmascript 2019引入了两种强大的方法：flat()和flatMap()。 flat()方法旨在将嵌套阵列弄平到指定的深度级别，从而创建一个新的单层阵列。另一方面，flatMap()结合了map()和flat()的功能。它首先将映射函数应用于数组的每个元素，然后将结果数组弄平至1。深度为1。通过利用这两种方法，开发人员可以有效地操纵和处理嵌套数组，从而产生更清洁和更可读的代码。

使用flat（）

flat()方法用于通过将输入数组递归到指定的深度来创建新数组。

语法：

array.flat([depth]);

参数：

  • depth（可选）：深度级别指定输入阵列应扁平的深度。默认值为1。

示例：

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

const flattenedArray = nestedArray.flat();
console.log(flattenedArray); // Output: [1, 2, [3, [4]], 5]

默认情况下，flat()方法仅将输入阵列弄平至一个深度。要将阵列弄平到特定的深度，您可以将所需的深度作为一个参数传递：

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

const flattenedArray = nestedArray.flat(2);
console.log(flattenedArray); // Output: [1, 2, 3, [4], 5]

要完全弄平阵列，您可以将无穷大作为深度传递：

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

const flattenedArray = nestedArray.flat(Infinity);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5]

现实世界示例：汇总API响应

软件开发中flat()的常见用例是处理来自多个API端点的数据。通常，来自不同来源的数据可能以嵌套数组的形式出现，这些数组需要合并为一个数组以进行进一步处理或显示。

假设我们有一个博客平台，我们想汇总几位作者的最新博客文章。我们从不同的API端点获取博客文章数据，每个响应都返回一系列博客文章。要结合这些数组并创建一个博客文章，我们可以使用flat()。

这是一个示例：

// Simulated API responses containing arrays of blog posts from different authors
const author1Posts = [
  { title: 'JavaScript Best Practices', date: '2023-01-10' },
  { title: 'React vs. Vue', date: '2023-01-15' },
];

const author2Posts = [
  { title: 'Getting Started with Node.js', date: '2023-01-05' },
  { title: 'Express.js for Beginners', date: '2023-01-20' },
];

const author3Posts = [
  { title: 'Demystifying CSS Grid', date: '2023-01-12' },
  { title: 'Responsive Design Techniques', date: '2023-01-18' },
];

// Combine the arrays using flat()
const allPosts = [author1Posts, author2Posts, author3Posts].flat();

console.log(allPosts);

/* Output: [
  { title: 'JavaScript Best Practices', date: '2023-01-10' },
  { title: 'React vs. Vue', date: '2023-01-15' },
  { title: 'Getting Started with Node.js', date: '2023-01-05' },
  { title: 'Express.js for Beginners', date: '2023-01-20' },
  { title: 'Demystifying CSS Grid', date: '2023-01-12' },
  { title: 'Responsive Design Techniques', date: '2023-01-18' }
] */

在此示例中，我们使用flat()将来自不同作者的博客文章组合到一个平坦的阵列中。这使我们可以轻松地处理并在平台上显示汇总的博客文章。

当然，在现实世界中，您将使用fetch()或axios等技术从实际API端点获取数据，但是此示例演示了如何有效地使用flat()将嵌套数组组合到单个数组中，以进一步将处理。

使用flatmap（）

flatMap()方法结合了map()和flat()的功能。它首先使用映射函数映射每个元素，然后将结果数组弄平至1的深度。当您要在一个步骤中处理和弄平元素时，flatMap()方法特别有用。

>

语法：

array.flatMap(mappingFunction);

参数：

  • mappingFunction：产生新数组元素的函数，进行三个参数：当前元素的值，当前元素的索引和数组正在遍历。

示例：

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

const flattenedArray = array.flatMap((value) => [value, value * 2]);
console.log(flattenedArray); // Output: [1, 2, 2, 4, 3, 6, 4, 8]

在此示例中，flatMap()方法处理输入数组的每个元素，并返回包含原始值和双倍值的新数组。默认情况下，所得的阵列被扁平。

现实世界示例：搜索自动完成建议

flatMap()的一种常见用例是在搜索自动完成功能中，我们需要根据用户的输入来生成建议的搜索术语列表。这通常涉及处理和组合来自多个来源的数据，例如流行的搜索词，用户搜索历史记录和相关搜索词。

假设我们有一个电子商务网站，并希望为我们的搜索栏提供自动完整的建议。我们有三个不同的数据源：

  1. 流行搜索词
  2. 用户的搜索历史记录
  3. 基于用户的输入的相关搜索词

我们需要处理每个数据源，生成一系列建议，然后将最终数组弄平以显示建议。

这是我们如何使用flatMap()实现这一目标的一个示例：

const popularSearchTerms = ['laptops', 'smartphones', 'headphones'];
const userSearchHistory = ['tablets', 'smartwatches'];
const relatedSearchTerms = ['laptop accessories', 'smartphone cases'];

// Function to process search terms and generate suggestions
const processSearchTerms = (term) => {
  // In a real-world scenario, more complex logic would be applied to generate suggestions
  // For this example, we'll simply return the term and its plural form
  return [term, `${term}s`];
};

// Combine and process search terms using flatMap()
const searchSuggestions = [
  ...popularSearchTerms,
  ...userSearchHistory,
  ...relatedSearchTerms,
].flatMap(processSearchTerms);

console.log(searchSuggestions);

// Output: [
//   'laptops', 'laptopss', 'smartphones', 'smartphoness', 'headphones', 'headphoness',
//   'tablets', 'tabletss', 'smartwatches', 'smartwatchess',
//   'laptop accessories', 'laptop accessoriess', 'smartphone cases', 'smartphone casess'
// ]

在此示例中，我们使用flatMap()从组合数组中处理每个搜索词，并生成一系列建议。最终的searchSuggestions阵列被扁平，使其适合在搜索栏中显示自动完整建议。

当然，这是一个简单的示例，在现实情况下，处理逻辑将更加复杂，并且生成的建议将更加相关。但是，它证明了如何有效地使用flatMap()来处理和将来自多个源的数据结合到扁平的阵列中。

结论

，你有！我们的新朋友flat()和flatMap()证明自己是JavaScript阵列操纵的动态二人组。这些方法是在JavaScript中使用嵌套数组的强大工具。它们使您可以将阵列弄平到指定的深度，并同时简化映射和平坦的过程。通过理解和使用这些方法，您可以在使用多维数组时编写更清洁，更有效的代码。愉快的编码！