当前位置:首页 > JavaScript

js flat 实现

2026-02-01 17:37:08JavaScript

实现数组扁平化的方法

在 JavaScript 中,数组扁平化是指将多维数组转换为一维数组的过程。以下是几种常见的实现方法。

使用递归实现

通过递归遍历数组的每个元素,如果元素是数组则继续递归,否则将元素添加到结果数组中。

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

const nestedArray = [1, [2, [3, [4]], 5]];
console.log(flatten(nestedArray)); // [1, 2, 3, 4, 5]

使用 reduce 实现

利用 reduce 方法遍历数组,递归处理嵌套数组。

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

const nestedArray = [1, [2, [3, [4]], 5]];
console.log(flatten(nestedArray)); // [1, 2, 3, 4, 5]

使用 ES6 flat 方法

ES6 提供了 flat 方法,可以指定扁平化的深度。默认深度为 1,使用 Infinity 可以完全扁平化。

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

使用栈实现

通过栈结构迭代处理数组元素,非数组元素直接压入结果,数组元素则展开后继续处理。

function flatten(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(flatten(nestedArray)); // [1, 2, 3, 4, 5]

使用生成器实现

通过生成器函数递归遍历数组,生成扁平化后的序列。

js flat 实现

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

const nestedArray = [1, [2, [3, [4]], 5]];
console.log([...flatten(nestedArray)]); // [1, 2, 3, 4, 5]

以上方法各有优缺点,可以根据具体场景选择最适合的实现方式。递归和 reduce 方法简洁但可能受调用栈限制,flat 方法最直接但需要现代浏览器或环境支持,栈和生成器方法适合处理大规模数据。

标签: jsflat
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…

js实现求导

js实现求导

实现数值求导的方法 在JavaScript中实现求导通常采用数值方法,因为JavaScript不是符号计算语言。以下是常见的数值微分方法: 中心差分法 中心差分法提供较高精度的导数近似: func…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…