【JavaScript】不用flat怎么扁平化数组

你想在不使用数组的flat()方法的前提下实现数组扁平化,核心是通过递归或迭代的方式,逐层遍历数组中的元素,把嵌套的子数组 “拆解” 成一维数组。我会给你几种实用且易懂的实现方式,覆盖不同场景需求。

方法 1:递归实现(最易理解,适合新手)

递归的核心思路是:遍历数组的每一个元素,如果元素是数组,就继续递归处理这个子数组;如果不是数组,就直接加入结果数组。

// 递归实现数组扁平化(可指定扁平化深度,默认完全扁平化) function flattenArray(arr, depth = Infinity) { // 存储最终扁平化结果 const result = []; // 遍历原数组的每一个元素 arr.forEach(item => { // 判断:如果当前元素是数组,且还没达到指定扁平化深度 if (Array.isArray(item) && depth > 0) { // 递归处理子数组,深度减1 result.push(...flattenArray(item, depth - 1)); } else { // 非数组元素直接加入结果 result.push(item); } }); return result; } // 测试用例 const nestedArr = [1, [2, [3, [4, 5]], 6], 7]; // 完全扁平化 console.log(flattenArray(nestedArr)); // [1, 2, 3, 4, 5, 6, 7] // 只扁平化1层 console.log(flattenArray(nestedArr, 1)); // [1, 2, [3, [4, 5]], 6, 7]

关键解释

  • Array.isArray(item):判断元素是否为数组,这是扁平化的核心判断条件;
  • depth 参数:控制扁平化深度,和flat(depth)的参数逻辑一致,默认Infinity表示完全扁平化;
  • 扩展运算符...:把递归返回的子数组元素逐个推入结果数组,避免嵌套。

方法 2:迭代实现(循环 + 栈,避免递归栈溢出)

如果数组嵌套层级极深(比如几十层),递归可能会触发栈溢出错误,这时用迭代(循环)+ 栈的方式更稳健。

// 迭代实现数组扁平化(完全扁平化) function flattenArrayIterative(arr) { // 用栈存储待处理的元素,先把原数组浅拷贝入栈 const stack = [...arr]; const result = []; // 只要栈不为空,就继续处理 while (stack.length) { // 弹出栈顶元素 const item = stack.pop(); if (Array.isArray(item)) { // 如果是数组,把元素重新推入栈(注意顺序:pop是从末尾取,所以要反向推入保持原顺序) stack.push(...item); } else { // 非数组元素加入结果 result.push(item); } } // 因为pop是从后往前取,结果需要反转恢复原顺序 return result.reverse(); } // 测试用例 const nestedArr = [1, [2, [3, 4], 5]]; console.log(flattenArrayIterative(nestedArr)); // [1, 2, 3, 4, 5]

关键解释

  • 栈(stack)的特性是 “后进先出”,所以最后需要reverse()恢复原数组顺序;
  • 迭代方式没有递归的栈深度限制,适合处理超深嵌套的数组。

方法 3:利用 reduce 简化递归(简洁写法)

reduce 可以替代手动遍历和结果数组的声明,让代码更简洁,核心逻辑和递归法一致。

// reduce实现扁平化 function flattenArrayReduce(arr, depth = Infinity) { return arr.reduce((acc, item) => { if (Array.isArray(item) && depth > 0) { // 递归处理子数组,合并到累计结果中 return acc.concat(flattenArrayReduce(item, depth - 1)); } else { // 非数组元素直接合并 return acc.concat(item); } }, []); // 初始值为空数组 } // 测试用例 const nestedArr = [1, [2, [3]], 4]; console.log(flattenArrayReduce(nestedArr)); // [1, 2, 3, 4]

关键解释

  • reduceacc(累计值)就是最终的扁平化数组;
  • concat 方法可以把数组或单个元素合并到数组中,替代push(...)更简洁。

总结

不用flat()实现数组扁平化的核心要点:

  1. 核心逻辑:遍历数组元素,判断是否为数组,是则拆解层级,否则直接保留;
  2. 实现方式
    • 递归(forEach/reduce):代码易读,适合常规嵌套深度的数组;
    • 迭代(栈):无栈溢出风险,适合超深嵌套的数组;
  3. 扩展点:通过depth参数可模拟flat(depth)的 “指定深度扁平化” 功能,适配不同需求。

这些方法都能兼容所有主流浏览器,且逻辑清晰,新手可以先从递归法入手理解,再根据实际场景选择迭代法或 reduce 写法。

Read more

【优选算法】双指针算法:专题二

【优选算法】双指针算法:专题二

目录 【611.有效三角形个数】 1、题目描述 2、实现核心及思路 解题步骤: 思路可视化: 代码实现: 【179.查找总价格为目标值的两个商品】 1、题目描述: 2、实现核心及思路: 代码实现: 【15.三数之和】 1、题目描述: 2、实现核心及思路: 解题步骤: 思路可视化: 代码实现: 【18.四数之和】 1、题目描述: 编辑2、实现核心即思路: 解题步骤: 代码实现: 【611.有效三角形个数】 1、题目描述 2、实现核心及思路 构成三角形的条件:设三角形三边长分别为a(最长边),b(最短边),c。 则有 a + b >

By Ne0inhk

MinIO介绍(分布式对象存储系统 object storage)传统文件名和目录结构,大文件存储为主,Amazon S3(AWS S3)替代方案(MinIO和SeaweedFS区别)mc命令行

https://sealos.run/docs/guides/object-storage 文章目录 * MinIO:轻量、高性能的开源对象存储,打造你的私有云存储基石 * 🌟 什么是 MinIO? * 🔑 为什么开发者爱它?五大核心优势 * ✅ 100% S3 兼容,无缝迁移 * ⚡ 极致性能,为高并发而生 * 🛡️ 企业级可靠性与安全 * 🐳 云原生友好,部署如呼吸般简单 * 🌍 活跃生态与全球社区 * 🚀 典型应用场景 * 💡 一个小实践:用 mc 上传你的第一张图片 * ❓ 常见疑问解答 * 🌱 结语:简单,是终极的复杂 * MinIO vs SeaweedFS:核心差异解析 * 🏗️ 架构设计差异 * 📦 小文件处理能力 * 🔌 API与接口支持 * 🔄 数据存储策略 * 🌐 扩展性与部署 * ☁️ 云集成能力 * 📜 开源协议 * 🎯 适用场景推荐 * 💡 总结 MinIO:轻量、高性

By Ne0inhk
Flutter 三方库 image_compare 鸿蒙图像治理算法域双向适配解析:突破千万级相册视觉感知哈希运算指纹比对墙,大体量空间冗余清扫提供高精雷达矩阵-适配鸿蒙 HarmonyOS ohos

Flutter 三方库 image_compare 鸿蒙图像治理算法域双向适配解析:突破千万级相册视觉感知哈希运算指纹比对墙,大体量空间冗余清扫提供高精雷达矩阵-适配鸿蒙 HarmonyOS ohos

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 image_compare 鸿蒙图像治理算法域双向适配解析:突破千万级相册视觉感知哈希运算指纹比对墙,为大体量空间冗余清扫提供高精雷达矩阵 前言 在 OpenHarmony 应用的内容社交或相册管理开发中,由于重复下载或连拍,用户的磁盘空间极易被重复图像挤占。image_compare 为 Flutter 开发者提供了一套高性能、专注于图像指纹算法的对比方案。本文将介绍如何在鸿蒙端打造极致的视觉资产治理底座。 一、原理解析 / 概念介绍 1.1 基础原理/概念介绍 image_compare 的核心逻辑是基于 感知哈希(Perceptual Hashing, pHash)与颜色直方图空间映射 (Visual-Entropy Map)。它并非简单的逐像素二进制对比,而是通过将图像进行灰度化、离散余弦变换(DCT)降噪,提取反映图像“骨架结构”的

By Ne0inhk
【数据结构与算法】环与相遇:链表带环问题的底层逻辑与工程实现

【数据结构与算法】环与相遇:链表带环问题的底层逻辑与工程实现

🔥小龙报:个人主页 🎬作者简介:C++研发,嵌入式,机器人等方向学习者 ❄️个人专栏:《C语言》《【初阶】数据结构与算法》 ✨ 永远相信美好的事情即将发生 文章目录 * 前言 * 一、带环链表 * 1.1题目 * 1.2 算法原理 * 1.3 代码 * 1.4 数学证明 * 1.4.1 为什么带环slow与fast必定能相遇? * 1.4.2 fast一定只能走2步吗?可以是2步甚至更多吗? * 1.4.2.1 以3步为例 * 1.4.3结论 * 二、环形链表(寻找相遇点) * 2.1 题目

By Ne0inhk