Vue 使用 array.flatMap()例子

在Vue中，.flatMap() 是 JavaScript ES6 提供的一个数组实例方法，它可以将数组中的每个元素应用一个映射函数，然后将所有映射结果放入一个新的扁平化数组中返回。在Vue中，你可以在计算属性、方法或任何处理数组的地方使用它。

以下是一个 .flatMap() 方法的基本使用示例：

<template>
  <div>
    <ul>
      <li v-for="item in transformedItems">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalItems: [
        { id: 1, children: [2, 3, 4] },
        { id: 5, children: [6, 7] },
      ],
    };
  },
  computed: {
    transformedItems() {
      // 使用 flatMap 进行扁平化映射
      return this.originalItems.flatMap(item => [
        item.id,
        ...item.children.map(childId => `child_${childId}`),
      ]);
    },
  },
};
</script>

在这个例子中，我们有一个包含对象的数组，每个对象都有一个id和一个子项数组。我们使用 .flatMap() 来扁平化地映射这个数组，将每个元素的id和其子项转换为新格式后合并到一个单一的新数组中。

注意，.flatMap() 方法并不会对原始数组做任何修改，而是返回一个新的数组。此外，它要求映射函数返回的是一个数组，这样就可以自动将所有返回的数组合并成一个单一的扁平数组。