当前位置:首页 > JavaScript

js实现数组扁平化输出

2026-04-05 02:31:00JavaScript

方法一:使用 Array.prototype.flat()

ES2019 引入的 flat() 方法可以直接将嵌套数组扁平化。默认情况下,flat() 只会扁平化一层,可以通过传入参数指定深度,或使用 Infinity 完全扁平化。

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

方法二:递归实现

通过递归遍历数组,将嵌套的数组逐层展开。适用于不支持 flat() 的老版本浏览器或需要自定义处理的情况。

js实现数组扁平化输出

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

const nestedArray = [1, [2, [3, [4]], 5]];
console.log(flattenArray(nestedArray)); // 输出: [1, 2, 3, 4, 5]

方法三:使用 reduce 实现

结合 Array.prototype.reduce 和递归,可以更简洁地实现扁平化。

function flattenArray(arr) {
  return arr.reduce((acc, item) => 
    acc.concat(Array.isArray(item) ? flattenArray(item) : item), []);
}

const nestedArray = [1, [2, [3, [4]], 5]];
console.log(flattenArray(nestedArray)); // 输出: [1, 2, 3, 4, 5]

方法四:利用 toStringsplit

如果数组仅包含数字或字符串,可以先将数组转换为字符串,再通过 split 分割为扁平数组。注意此方法会将所有元素转为字符串。

js实现数组扁平化输出

const nestedArray = [1, [2, [3, [4]], 5]];
const flattened = nestedArray.toString().split(',').map(Number);
console.log(flattened); // 输出: [1, 2, 3, 4, 5]

方法五:使用 Generator 函数

通过生成器函数逐层展开嵌套数组,适合处理大规模数据或需要惰性计算的场景。

function* flattenGenerator(arr) {
  for (const item of arr) {
    if (Array.isArray(item)) {
      yield* flattenGenerator(item);
    } else {
      yield item;
    }
  }
}

const nestedArray = [1, [2, [3, [4]], 5]];
const flattened = [...flattenGenerator(nestedArray)];
console.log(flattened); // 输出: [1, 2, 3, 4, 5]

方法六:堆栈迭代实现

非递归的堆栈实现方式,避免递归可能导致的调用栈溢出问题,适合处理深层嵌套数组。

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

const nestedArray = [1, [2, [3, [4]], 5]];
console.log(flattenArray(nestedArray)); // 输出: [1, 2, 3, 4, 5]

注意事项

  1. 数据类型一致性:递归或迭代方法可能因数据类型复杂(如对象、null)需要额外处理。
  2. 性能差异flat() 是原生方法,性能通常最优;递归在大数据量时可能栈溢出。
  3. 浏览器兼容性flat() 需 ES2019+ 环境,旧环境需使用 polyfill 或替代方案。

标签: 数组扁平化
分享给朋友:

相关文章

vue实现嵌套数组

vue实现嵌套数组

Vue 中实现嵌套数组的常见方法 在 Vue 中处理嵌套数组时,通常会结合 v-for 指令和响应式数据管理。以下是几种典型场景的实现方式: 基本嵌套渲染 使用多层 v-for 渲染嵌套数组结构:…

vue实现数组双向绑定

vue实现数组双向绑定

实现数组双向绑定的方法 在Vue中,实现数组的双向绑定通常需要结合v-model指令或自定义事件处理。以下是几种常见的方法: 使用v-model绑定数组 Vue的v-model指令默认支持表单元素的…

react如何定义一哥数组

react如何定义一哥数组

定义数组的方法 在React中,可以通过多种方式定义和使用数组。以下是常见的几种方法: 使用useState钩子定义状态数组 import { useState } from 'react';…

react中如何判断数组长度

react中如何判断数组长度

判断数组长度的基本方法 在React中,可以通过JavaScript原生的length属性直接获取数组的长度。无论数组是存储在组件的state、props还是其他变量中,都可以使用相同的方式判断。…

js数组升序排序实现

js数组升序排序实现

使用 sort() 方法实现升序排序 JavaScript 数组的 sort() 方法默认按 Unicode 码点排序,对数字数组需传入比较函数。比较函数返回 a - b 时实现升序排列: cons…

js导入数组实现柱状图

js导入数组实现柱状图

使用Chart.js库绘制柱状图 安装Chart.js库 npm install chart.js 导入Chart.js和数组数据 import { Chart } from 'chart.js/…