【JavaScript】面试手写题精讲之数组(上)

专题缘由

该专题主要是讲解我们在面试的时候碰到一些JS的手写题, 确实这种手写题还是比较恶心的。有些时候好不容易把题目写出来了,突然面试官冷不丁来一句有没有更优的解法,直接让我们僵在原地。为了解决兄弟们的这些困扰,这个专题于是就诞生啦。我们会将一些常见的不是最优解的答案作为对比,方便大家更好理解。

正文

这篇上主要讲的是常考的数组常见题。之后会中下两篇分别讲下数组排序以及数组原型链相关的考题。

数组去重(难度:🌟)

先来一个简单的,对,就是数组去重。给定一个数组,去除掉数组中重复的数据。
有些年轻小伙子不讲武德,刚毕业,20来岁,上来就用两层For循环开开心心地写着,作为一个面试官,很多时候我想打断他, 但是又于心不忍,破坏他写代码时专注的气氛。最后,作为面试官我们来了一句

你觉得还有没有更好的解法呢?

非最优解

function unique(arr){            
  for(let i=0; i<arr.length; i++){
    for(let j=i+1; j<arr.length; j++){
      if(arr[i] === arr[j]){       
        arr.splice(j,1);
        j--;
      }
    }
  }
  return arr;
}

const arr = [1,1,'true','true',true,true,15,15,false,false];
console.log(unique(arr)) // [ 1, 'true', true, 15, false ]

最优解

我将最优解分为了两类,一类是ES5,一类是ES6的。因为有些浏览器版本还不支持ES6,所以要做个兼容。

ES5
使用filter实现

function unique(arr) {
  return arr.filter(function(item, index, array) {
    return arr.indexOf(item) === index
  })
}

const arr = [1,1,'true','true',true,true,15,15,false,false];
console.log(unique(arr)) // [ 1, 'true', true, 15, false ]

ES6
使用Set数据结构实现

const unique = arr => [...new Set(arr)]

const arr = [1,1,'true','true',true,true,15,15,false,false];
console.log(unique(arr)) // [ 1, 'true', true, 15, false ]

数组扁平化(难度:🌟🌟)

数组扁平化就是把多维数组转化成一维数组。举个🌰:
['a',['b',['c']]]经过数组扁平化后变为['a','b','c']
有很多年轻人见到这题后,就开始了长久的静坐,咳咳。当然也不乏有些天资聪颖之辈,上来就花了10秒钟解决了这个问题, 他们说ES6中有flat方法。

let arr = ['a',['b',['c']]];
console.log(arr.flat(2)); // [ 'a', 'b', 'c' ]

是的 flat方法确实能将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
正在这些年轻人洋洋得意的时候,面试官突然来了一句

小伙子,不好意思,我没把问题表述清楚,我希望的是你能把这个flat方法实现一下。

接下来便是长久的静默…
最优解

好像也没有什么非最优解,毕竟能做出来就很不错啦。

ES5
通过递归的方式将所有是数组的子元素进行遍历。

const flatten = (arr) => {
  let res = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      res = res.concat(flatten(arr[i]));
    } else {
      res.push(arr[i]);
    }
  }
  return res;
};

let arr = ['a',['b',['c']]];
console.log(flatten(arr)); // [ 'a', 'b', 'c' ]

ES6
这个做法颇为巧妙,通过while(arr.some((item) => Array.isArray(item)))这段代码,如果数组里还有内嵌数组,那么这个条件一直为真,会一直执行下去,知道所有的元素都不是数组为止才会推出循环。

const flatten = (arr) => {
  while (arr.some((item) => Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
};

let arr = ["a", ["b", ["c"]]];
console.log(flatten(arr)); // [ 'a', 'b', 'c' ]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/388794.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络——12DNS

DNS DNS的必要性 IP地址标识主机、路由器但IP地址不好记忆&#xff0c;不便于人类用使用&#xff08;没有意义&#xff09;人类一般倾向于使用一些有意义的字符串来标识Internet上的设备存在着“字符串”——IP地址的转换的必要性人类用户提供要访问机器的“字符串”名称由DN…

Linux学习(三)shell编程

1.echo指令 用于将后面的字体内容回显到控制台&#xff0c;将后面的字体用单引号或双引号引起来都会忽略引号 2.expr数学运算 3.第一个shell脚本 一般shell脚本以.sh为后缀&#xff0c;通过sh命令来执行shell脚本。 4.shell脚本的命令行参数 $1 $2 $3 $4 $5 $6 $7 $8 $9 $0 &…

C语言学习day14:数组定义和使用

定义变量&#xff1a; 数据类型 变量 值 数组定义&#xff1a; 数据类型 数组名[元素个数]{值1,值2,值3} 代码&#xff1a; int main() {//定义变量//数据类型 变量 值//数组定义//数据类型 数组名[元素个数]{值1,值2,值3}//数组下标 数组名[小标]//数组下标是…

相机图像质量研究(16)常见问题总结:光学结构对成像的影响--IRCUT

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…

Unity基础 -- 更新中(2.15)

Unity基础 文章目录 Unity基础3D数学 -- 基础一些方法插值运算三角函数坐标系 3D数学 -- 向量理解常用函数线性插值 3D数学 -- 四元数看向四元数计算 延迟函数协同程序 3D数学 – 基础 一些方法 float value01 Mathf.PI; // Π int value03 Mathf.Abs(-2); // 绝对值 int v…

MySQL安装及环境配置

目录 下载安装检验安装是否成功配置环境变量 下载 MySQL下载链接 安装 点击安装包进行安装 选择Server only&#xff0c;点击Next 点击Execute 点击Next 提示我们需要进行一些配置&#xff0c;点击Next 输入管理员密码&#xff0c;点击Next 点击Execute&#xff0c;安装配…

【类与对象(1)】类的引入、访问及封装、定义、作用域、实例化、类大小的计算、this指针

1.类的引入 C兼容了C语言结构体的用法&#xff0c;但是同时又升级成了类。结构体中只能定义变量&#xff0c;类中不仅可以定义变量&#xff0c;还可以定义函数。 例如&#xff0c;数据结构中实现栈&#xff0c;结构体stack中只定义了变量&#xff0c;要实现的函数在结构体外定…

FastAI 之书(面向程序员的 FastAI)(一)

原文&#xff1a;www.bookstack.cn/read/th-fastai-book 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 序言 原文&#xff1a;www.bookstack.cn/read/th-fastai-book/README.md 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 在很短的时间内&#xff0c;深度…

建筑工程如何找答案? #职场发展#笔记#职场发展

这些软件以其强大的搜索引擎和智能化的算法&#xff0c;为广大大学生提供了便捷、高效的解题方式。下面&#xff0c;让我们一起来了解几款备受大学生欢迎的搜题软件吧&#xff01; 1.易解题 这是一个网站 是我在百度搜题&#xff0c;经常会出现的一个网站&#xff0c;它里面…

K8S集群实践之十:虚拟机部署阶段性总结

目录 1. 说明&#xff1a; 2. 安装准备 2.1 每个节点设置双网卡&#xff0c;一卡做网桥&#xff08;外部访问&#xff09;&#xff0c;一卡做NAT&#xff08;集群内网访问&#xff09; 2.2 准备一个可用的代理服务器 3. 由于虚拟机崩溃&#xff08;停电&#xff0c;宿主机…

Gemini 1.5 Pro揭秘:Google DeepMind新一代AI模型如何突破千万级别词汇限制?

Gemini 1.5 Pro 发布&#xff01; 这款模型凭借其超长的上下文处理能力脱颖而出&#xff0c;支持10M tokens。 它的多模态特性意味着&#xff0c;无论面对多么庞大复杂的内容&#xff0c;Gemini 1.5 Pro都能游刃有余地应对。 在AI的世界里&#xff0c;上下文的理解如同记忆的…

如何创建和填写 PDF 表单,简化您的文档工作流

阅读本文&#xff0c;了解如何在开源办公套件 ONLYOFFICE 中创建和填写 PDF 表单。 ONLYOFFICE表单发展小史 ONLYOFFICE 表单首个版本发布于2022年1月18日&#xff0c;是 ONLYOFFICE 版本 7.0 更新的一部分。 您可以使用 ONLYOFFICE 表单&#xff0c;创建各种类型的模板文档&a…

DS Wannabe之5-AM Project: DS 30day int prep day18

Q1. What is Levenshtein Algorithm? Levenshtein算法&#xff0c;也称为编辑距离算法&#xff0c;是一种量化两个字符串之间差异的方法。它通过计算将一个字符串转换成另一个字符串所需的最少单字符编辑操作次数来实现。这些编辑操作包括插入、删除和替换字符。Levenshtein距…

备战蓝桥杯---图论之最短路Bellman-Ford算法及优化

目录 上次我们讲到复杂度为&#xff08;nm)logm(m为边&#xff0c;n为点&#xff09;的迪杰斯特拉算法&#xff0c;其中有一个明显的不足就是它无法解决包含负权边的图。 于是我们引进Bellman-Ford算法。 核心&#xff1a;枚举所有的点&#xff0c;能松弛就松弛&#xff0c;直…

使用radial-gradient完成弧形凹陷的绘制

1、效果如下图 我在微信小程序中制作的 2、代码如下 <style>.header {position: relative;width: 200px;height: 200px;overflow: hidden;}.header .circle {--circleValue: 500px;position: absolute;bottom: 0;left: 50%;width: 100%;height: var(--circleValue);trans…

2024牛客寒假算法基础集训营2-c Tokitsukaze and Min-Max XOR

来源 题目 Tokitsukaze 有一个长度为 n 的序列 a1,a2,…,an和一个整数 k。 她想知道有多少种序列 b1,b2,…,bm满足&#xff1a; 其中 ⊕\oplus⊕ 为按位异或&#xff0c;具体参见 百度百科&#xff1a;异或 答案可能很大&#xff0c;请输出  mod1e97 后的结果。 输入描述…

【开源】SpringBoot框架开发食品生产管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 加工厂管理模块2.2 客户管理模块2.3 食品管理模块2.4 生产销售订单管理模块2.5 系统管理模块2.6 其他管理模块 三、系统展示四、核心代码4.1 查询食品4.2 查询加工厂4.3 新增生产订单4.4 新增销售订单4.5 查询客户 五、…

基于微信小程序的智能社区服务小程序,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

【STM32】OLED显示实验

目录 一、硬件介绍 1. STM32F03C8T6 2. OLED屏 二、STM32CubeMX配置 1. 实际接线 2. IIC配置 3. 其他配置 四、字模生成 1. 打开PCtoLCD2002.exe软件。选择字符模式。 2. 以16x16汉字取模为例&#xff0c;即字宽字高都为16. 3. 输入取模汉字。 4. 点击生成自模。 …

毕业设计vue+php幼儿园网站系统yl567

幼儿园网站系统。采用vscode集成IDE对幼儿园网站系统统进行开发,整合系统的各个模块。 拟开发的幼儿园网站系统通过测试,确保在最大负载的情况下稳定运转,各个模块工作正常,具有较高的可用性。系统整体界面简洁美观,用户使用简单,满足用户需要。在因特网发展迅猛的当今社会,幼儿…