当前位置:首页 > JavaScript

js实现flat

2026-03-15 08:06:24JavaScript

实现数组扁平化的方法

使用递归方法实现数组扁平化。递归遍历数组中的每个元素,如果元素是数组则继续递归,否则将元素添加到结果数组中。

js实现flat

function flat(arr, depth = 1) {
  let result = [];
  arr.forEach(item => {
    if (Array.isArray(item) && depth > 0) {
      result.push(...flat(item, depth - 1));
    } else {
      result.push(item);
    }
  });
  return result;
}

使用reduce实现扁平化

通过reduce方法遍历数组,将非数组元素直接添加到结果中,数组元素则递归处理。

js实现flat

function flat(arr, depth = 1) {
  return depth > 0
    ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flat(val, depth - 1) : val), [])
    : arr.slice();
}

使用堆栈实现非递归扁平化

通过堆栈结构实现非递归的扁平化处理,适合处理深度较大的数组。

function flat(arr, depth = 1) {
  const stack = arr.map(item => ({ item, depth }));
  const result = [];
  while (stack.length) {
    const { item, depth } = stack.pop();
    if (Array.isArray(item) && depth > 0) {
      stack.push(...item.map(subItem => ({ item: subItem, depth: depth - 1 })));
    } else {
      result.push(item);
    }
  }
  return result.reverse();
}

使用Generator实现惰性扁平化

通过Generator函数实现按需扁平化,适合处理大规模数据。

function* flatGenerator(arr, depth = 1) {
  for (const item of arr) {
    if (Array.isArray(item) && depth > 0) {
      yield* flatGenerator(item, depth - 1);
    } else {
      yield item;
    }
  }
}

function flat(arr, depth = 1) {
  return [...flatGenerator(arr, depth)];
}

注意事项

每种实现方式都有其适用场景。递归方法简洁但可能有调用栈限制,reduce方法函数式风格明显,堆栈方法适合深度大的结构,Generator方法适合流式处理。根据实际需求选择合适的方法。

标签: jsflat
分享给朋友:

相关文章

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('image…

js实现验证

js实现验证

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

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点可…

js实现百叶窗

js实现百叶窗

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

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…