JavaScript 手撕大厂面试题数组扁平化以及增加版本 plus

前言

现在的前端面试手撕题是一个必要环节,有点时候八股回答的不错但是手撕题没写出来就会让面试官印象分大减,很可能就挂了...

概念

数组的扁平化 其实就是将一个多层嵌套的数组转换为只有一层的数组

比如: [1, [2, [3, [4, 5]]]] => [1,2,3,4,5,6]

题目

一、实现一个 flat() easy 难度

javascript 复制代码
function myFlat(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(myFlat(arr[i]));
      // res = [...res, ...myFlat(arr[i])] 这样写也可以
    } else {
      result.push(arr[i])
    }
  }
  return result
}

二、用递归实现 medium 难度

javascript 复制代码
const flat = arr => {
  let res = []
  let rStack = [...arr]
  while (rStack.length) {
    let top = rStack.shift()
    if (Array.isArray(top)) {
      rStack.unshift(...top)
    } else {
      res.push(top)
    }
  }
  return res
}

三、控制扁平化的深度 medium 难度

depth 为展平的深度 比如 1 就是将整体深度减一

javascript 复制代码
const myFlat = (arr, depth) => {
  let result = []
  for (const element of arr) {
    if (Array.isArray(element) && depth > 0) {
      result = [...result, ...myFlat(element, depth - 1)]
    } else {
      result.push(element)
    }
  }
  return result
}

四、计算嵌套数组的深度 medium 难度
类似层序遍历!

javascript 复制代码
const getDepth = arr => {
  const queue = [...arr]
  let depth = 1
  while (queue.length > 0) {
    const curLen = queue.length
    for (let i = 0; i < curLen; i++) {
      const cur = queue.shift()
      if (Array.isArray(cur)) {
        queue.push(...cur)
      }
    }
    depth++
  }
  return depth - 1
}

五、递归控制扁平化的深度 hard 难度

javascript 复制代码
function flattenArrayWithDepth(arr, depth) {
  const flattenedArray = [];
  const queue = [{ array: arr, remainingDepth: depth }];
  while (queue.length > 0) {
    const { array, remainingDepth } = queue.shift();
    for (const item of array) {
      if (Array.isArray(item) && remainingDepth > 0) {
        queue.push({ array: item, remainingDepth: remainingDepth - 1 });
      } else {
        flattenedArray.push(item);
      }
    }
  }
  return flattenedArray;
}
相关推荐
熊猫钓鱼>_>几秒前
深入理解Java堆栈:从原理到面试实战
java·开发语言·面试·职场和发展·面向对象·堆栈·oop
RFCEO几秒前
学习前端编程:DOM 树、CSSOM 树、渲染树详解
前端·学习·渲染树·dom 树·cssom 树·浏览器的渲染流程·回流/重绘
笨蛋不要掉眼泪3 分钟前
Redis主从复制:原理、配置与实战演示
前端·redis·bootstrap·html
孞㐑¥3 分钟前
算法—哈希表
开发语言·c++·经验分享·笔记·算法
骆驼爱记录5 分钟前
Word通配符技巧:高效文档处理指南
开发语言·c#·自动化·word·excel·wps·新人首发
bigdata-rookie6 分钟前
Starrocks 数据模型
java·前端·javascript
白帽子凯哥哥8 分钟前
网络安全Web基础完全指南:从小白到入门安全测试
前端·sql·web安全·信息安全·渗透测试·漏洞
RFCEO14 分钟前
前端编程 课程十四、:CSS核心基础2:选择器优先级 + 伪类选择器(解决冲突+交互效果)
前端·css·交互·css选择器优先级判断规则详解·css important使用·css链接伪类lvha顺序·实现悬浮交互效果
web打印社区16 分钟前
前端实现浏览器预览打印:从原生方案到专业工具
前端·javascript·vue.js·electron
yuezhilangniao19 分钟前
# 告别乱码:用FastAPI特性与Next.js打造类型安全的API通信
javascript·安全·fastapi