JavaScript 数组之flat和flatMap

    在 JavaScript 中，flat() 和 flatMap() 都是数组的方法，它们可以用来处理嵌套数组，但它们的功能有所不同。

1、flat

用途

   flat() 方法用于创建一个新数组，该新数组将原始数组中的所有子数组连接到指定深度的层级。这对于简化多维数组非常有用。

array.flat([depth])

array: 要展平的原始数组。
depth (可选): 指定展平的最大深度。默认值为 1

onst arr = [1, 2, [3, 4, [5, 6]], 7];
const flattened = arr.flat(2); // 展平两层
console.log(flattened); // 输出: [1, 2, 3, 4, [5, 6], 7]

const fullyFlattened = arr.flat(Infinity); // 完全展平
console.log(fullyFlattened); // 输出: [1, 2, 3, 4, 5, 6, 7]

使用场景

• 当你需要将多维数组简化为单个一维数组时。
• 当你需要处理嵌套的数据结构，例如 JSON 数据，并希望简化数据访问

2. flatMap()

用途

       flatMap() 方法首先映射然后展平数组。它允许你对每个元素应用一个转换函数，然后将结果展平到一层。这使得它非常适合于在转换数组的同时保持数据的一致性。

示例

array.flatMap(callback[, thisArg])

callback: 一个回调函数，它为每个元素调用并返回新的元素。
thisArg (可选): 执行回调时使用的 this 值。

const numbers = [1, 2, 3];
const doubledAndFlattened = numbers.flatMap(x => [x * 2]);
console.log(doubledAndFlattened); // 输出: [2, 4, 6]

const nestedNumbers = [1, [2, 3], 4];
const flattened = nestedNumbers.flatMap(x => Array.isArray(x) ? x : [x]);
console.log(flattened); // 输出: [1, 2, 3, 4]

比如我有一个数组 name 以顿号分割和 count也以对号分割  两条变成6条

  
let arr = [
    { name: "张三、李四", num: 10000, count: "上天、入地" },
    { name: "王五", num: 20000, count: "下海、游泳" },
  ];

结果

[
    { name: "张三", num: 10000, count: "上天" },
    { name: "张三", num: 10000, count: "入地" },
    { name: "李四", num: 10000, count: "上天" },
    { name: "李四", num: 10000, count: "入地" },
    { name: "王五", num: 20000, count: "下海" },
    { name: "王五", num: 20000, count: "游泳" }
]

// 分割名称和计数字段
  let splitData = arr.flatMap((item) => {
    let names = item.name.split("、");
    let counts = item.count.split("、");

    return counts.flatMap((count) => {
      return names.map((name) => ({
        name,
        num: item.num,
        count,
      }));
    });
  });

  console.log(splitData);