当前位置:首页 > JavaScript

js实现flat

2026-04-07 01:35:21JavaScript

实现数组扁平化的方法

使用递归方法

递归遍历数组的每个元素,判断是否为数组类型。如果是数组则继续递归,否则将元素加入结果数组。

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

使用迭代方法

通过循环和栈结构实现非递归的扁平化操作,适合处理深层嵌套数组。

js实现flat

function flattenIterative(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();
}

使用ES2019的flat方法

现代JavaScript提供了原生扁平化方法,可通过参数指定展开深度。

js实现flat

// 展开一层
arr.flat(); 

// 完全展开
arr.flat(Infinity);

使用Generator实现

通过生成器函数逐步产生扁平化结果,适合处理超大数组。

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

const result = [...flattenGenerator(nestedArray)];

性能优化版本

针对特定场景优化的实现,使用循环代替递归避免堆栈溢出。

function flattenOptimal(arr) {
  let result = [];
  let queue = [arr];
  let current;

  while (queue.length) {
    current = queue.shift();
    if (Array.isArray(current)) {
      queue.unshift(...current);
    } else {
      result.push(current);
    }
  }

  return result;
}

每种方法适用于不同场景:递归写法简洁但可能堆栈溢出,迭代方法性能稳定但代码稍复杂,原生API最简洁但需要考虑浏览器兼容性。

标签: jsflat
分享给朋友:

相关文章

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js实现轮播

js实现轮播

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

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现拷贝

js实现拷贝

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

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…