JS实现数组扁平化的 8 种方式

八种数组扁平化方法的使用场景和优缺点

以下是八种数组扁平化方法的使用场景和优缺点：

1. 使用递归：

• 使用场景：当需要对任意层级的嵌套数组进行扁平化时，递归是一种简单且通用的方法。
• 优点：简单易懂，适用于任意层级的嵌套数组。
• 缺点：可能存在性能问题，对于非常大的数组或多层嵌套的数组，递归可能导致堆栈溢出。

2. 使用 reduce 方法：

• 使用场景：当需要对数组进行一系列操作，并将结果累积到一个新数组时，reduce 方法是一种常用的选择。
• 优点：代码简洁，可以直接在 reduce 方法中处理扁平化逻辑。
• 缺点：对于非常大的数组或多层嵌套的数组，reduce 方法可能导致性能问题。

3. 使用扩展运算符：

• 使用场景：当需要快速将多层嵌套的数组扁平化为一维数组时，扩展运算符是一种简单且直观的方法。
• 优点：代码简洁，易于理解和使用。
• 缺点：对于非常大的数组或多层嵌套的数组，扩展运算符可能导致性能问题。

4. 使用 flat 方法（ES2019）：

• 使用场景：当在支持 ES2019 的环境中，可以使用 flat 方法来扁平化数组。
• 优点：代码简洁，使用内置方法，性能较好。
• 缺点：不适用于不支持 ES2019 的环境。

5. 使用 toString 和 split 方法：

• 使用场景：当需要将多层嵌套的数组转换为字符串，并使用字符串方法进行处理时，可以使用 toString 和 split 方法。
• 优点：简单易懂，适用于简单的扁平化需求。
• 缺点：对于包含对象或字符串元素的数组，可能会出现不符合预期的结果。

6. 使用正则表达式和 JSON 方法：

• 使用场景：当需要将数组转换为字符串，然后使用正则表达式和 JSON 方法进行处理时，可以使用该方法。
• 优点：适用于简单的扁平化需求。
• 缺点：对于包含对象或字符串元素的数组，可能会出现不符合预期的结果。

7. 使用堆栈：

• 使用场景：当需要手动控制数组元素的处理顺序时，可以使用堆栈方法。
• 优点：可以灵活控制处理顺序，适用于需要自定义处理逻辑的情况。
• 缺点：相对复杂，需要手动处理堆栈和结果数组。

8. 使用扩展运算符和递归：

• 使用场景：当需要结合扩展运算符和递归来处理多层嵌套的数组时，可以使用该方法。
• 优点：代码简洁，结合了扩展运算符和递归的优点。
• 缺点：对于非常大的数组或多层嵌套的数组，递归可能导致堆栈溢出。

根据具体的需求和代码环境，选择适合的方法来实现数组扁平化。考虑性能、代码复杂度和可读性等因素，选择最适合的方法进行实现。

具体实现

以下是实现数组扁平化的8种方式：

1. 使用递归：

function flatten(arr) {
  let result = [];
  arr.forEach(item => {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(item);
    }
  });
  return result;
}

2. 使用 reduce 方法：

function flatten(arr) {
  return arr.reduce((result, item) => {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(item);
    }
    return result;
  }, []);
}

3. 使用扩展运算符：

function flatten(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
}

4. 使用 flat 方法（ES2019）：

function flatten(arr) {
  return arr.flat(Infinity);
}

5. 使用 toString 和 split 方法：

function flatten(arr) {
  return arr.toString().split(',').map(item => +item);
}

6. 使用正则表达式和 JSON 方法：

function flatten(arr) {
  return JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');
}

7. 使用堆栈：

function flatten(arr) {
  const stack = [...arr];
  const result = [];
  while (stack.length) {
    const next = stack.pop();
    if (Array.isArray(next)) {
      stack.push(...next);
    } else {
      result.unshift(next);
    }
  }
  return result;
}

8. 使用扩展运算符和递归：

function flatten(arr) {
  return [].concat(...arr.map(item => Array.isArray(item) ? flatten(item) : item));
}

这些方法都可以将多层嵌套的数组扁平化为一维数组。具体使用哪种方法取决于你的需求和代码环境。

封装

以下是将八种方法封装为各自的函数，并进行调用的示例：

// 1. 使用递归
function flattenByRecursion(arr) {
  let result = [];
  
  function flattenHelper(arr) {
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        flattenHelper(arr[i]);
      } else {
        result.push(arr[i]);
      }
    }
  }
  
  flattenHelper(arr);
  return result;
}

// 2. 使用 reduce 方法
function flattenByReduce(arr) {
  return arr.reduce((acc, cur) => {
    return Array.isArray(cur) ? acc.concat(flattenByReduce(cur)) : acc.concat(cur);
  }, []);
}

// 3. 使用扩展运算符
function flattenBySpreadOperator(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
}

// 4. 使用 flat 方法（ES2019）
function flattenByFlat(arr) {
  return arr.flat(Infinity);
}

// 5. 使用 toString 和 split 方法
function flattenByToString(arr) {
  return arr.toString().split(",").map(item => +item);
}

// 6. 使用正则表达式和 JSON 方法
function flattenByRegexAndJSON(arr) {
  return JSON.parse("[" + JSON.stringify(arr).replace(/\[|\]/g, "") + "]");
}

// 7. 使用堆栈
function flattenByStack(arr) {
  let result = [];
  let stack = [...arr];
  
  while (stack.length) {
    let next = stack.pop();
    if (Array.isArray(next)) {
      stack.push(...next);
    } else {
      result.unshift(next);
    }
  }
  
  return result;
}

// 8. 使用扩展运算符和递归
function flattenBySpreadOperatorAndRecursion(arr) {
  return arr.reduce((acc, cur) => {
    return Array.isArray(cur) ? [...acc, ...flattenBySpreadOperatorAndRecursion(cur)] : [...acc, cur];
  }, []);
}

// 调用示例
let nestedArray = [1, [2, [3, 4], 5], 6, [7]];
console.log(flattenByRecursion(nestedArray));
console.log(flattenByReduce(nestedArray));
console.log(flattenBySpreadOperator(nestedArray));
console.log(flattenByFlat(nestedArray));
console.log(flattenByToString(nestedArray));
console.log(flattenByRegexAndJSON(nestedArray));
console.log(flattenByStack(nestedArray));
console.log(flattenBySpreadOperatorAndRecursion(nestedArray));

你可以根据需要选择其中的某个方法进行调用，或者根据具体的需求进行修改和优化。