JS数组扁平化的巧妙处理方案

2024-01-08 06:01:33

前言
当我们在处理树形结构的数据，或者多层嵌套的数组时，如果想拿到数组项的某个字段值，操作起来将会很麻烦。这个时候就需要我们将数组扁平化之后，通过map方法就可以直接拿到想要的内容。

过程

基本扁平化

最基本的方法是使用Array.prototype.flat()方法，它可以将多维数组扁平化为一维数组。

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

递归扁平化

对于更复杂的情况，我们可以使用递归来实现扁平化。这是一个深度优先的算法，它会遍历数组的每一个元素，如果元素是一个数组，则递归地将其扁平化，否则将其添加到最终结果中。

function flatten(arr) {
  let result = [];

  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];

    if (Array.isArray(element)) {
      result = result.concat(flatten(element));
    } else {
      result.push(element);
    }
  }

  return result;
}

const arr = [[1, 2, 3], [4, 5, 6], [7, 8, [9, 10]]];
const flattenedArr = flatten(arr);
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

使用库

还有一些库可以帮助我们实现数组扁平化，比如lodash.flatten()方法。

const _ = require('lodash');

const arr = [[1, 2, 3], [4, 5, 6], [7, 8, [9, 10]]];
const flattenedArr = _.flatten(arr);
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]