当前位置:首页 > 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 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

jquery js

jquery js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够更高…