【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' ]

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python入门:常用模块—jsonpickle模块

什么叫序列化&#xff1f; 序列化是指把内存里的数据类型转变成字符串&#xff0c;以使其能存储到硬盘或通过网络传输到远程&#xff0c;因为硬盘或网络传输时只能接受bytes 为什么要序列化&#xff1f; 你打游戏过程中&#xff0c;打累了&#xff0c;停下来&#xff0c;关掉…

随想录刷题笔记 —二叉树篇6 513找树左下角的值 112路径总和 106中序后序构造二叉树

513找树左下角的值 找出该二叉树的 最底层 最左边 节点的值 解法一&#xff1a;队列——层次遍历 class Solution {public int findBottomLeftValue(TreeNode root) {Queue<TreeNode> treeNodes new LinkedList<>();treeNodes.offer(root);int count 1;int re…

贪心算法之合并区间

“任世界多宽广&#xff0c;停泊在这港口~” 区间问题&#xff0c;涉及到最多的就是 取交集 和 并集的概念。我们使用C排序算法后&#xff0c;其默认规则就是按照 “左排序”进行的。因而&#xff0c;我们实质上注意的是每一个区间的 右端点&#xff0c;根据题目要求&#xff…

蓝桥杯:C++模运算、快速幂

模运算 模运算是大数运算中的常用操作。如果一个数太大&#xff0c;无法直接输出&#xff0c;或者不需要直接输出&#xff0c;则可以对它取模&#xff0c;缩小数值再输出。取模可以防止溢出&#xff0c;这是常见的操作。 模是英文mod的音译&#xff0c;取模实际上是求余。 取…

表达式 副作用 序列点

语句分类 标号语句(标签&#xff0c;常与goto配合使用)复合语句(块)表达式语句(赋值表达式语句、函数表达式语句等)选择语句迭代语句(循环)跳转语句(return,break,continue) 其中复合语句(块)可视为单个语句。因此while和for循环之后加的是单个语句(简单语句、复合语句、空语…

树莓派:使用mdadm为重要数据做RAID 1保护

树莓派作为个人服务器可玩性还是有点的。说到服务器&#xff0c;在企业的生成环境中为了保护数据&#xff0c;基本上都会用到RAID技术。比如&#xff0c;服务器两块小容量但高性能的盘做个RAID-1按装操作系统&#xff0c;余下的大容量中性能磁盘做个RAID-5或者RAID-6存放数据。…

网络原理(HTTP篇)

网络原理HTTP 前言HTTPHTTP的工作流程抓包工具抓取HTTP报文HTTP报文格式 请求报文具体细节首行URLURL的基本格式URL encode 方法 报头(header)HostContent-Length 和 Content-TypeUser-Agent&#xff08;UA&#xff09;RefererCookie&#xff08;重要&#xff09; 前言 如图&a…

HAL/LL/STD STM32 U8g2库 +I2C SSD1306/sh1106 WouoUI磁贴案例

HAL/LL/STD STM32 U8g2库 I2C SSD1306/sh1106 WouoUI磁贴案例 &#x1f4cd;基于STM32F103C8T6 LL库驱动版本&#xff1a;https://gitee.com/chcsx/platform-test/tree/master/MDK-ARM&#x1f3ac;视频演示&#xff1a; WouoUI移植磁贴案例&#xff0c;新增确认弹窗 &#x1f…

Unity中关于ScrollRect组件完整解决方案(ScrollRect中元素自动排版+ScrollRect中元素自动定位到Viewport可见范围内)

一、元素自动排版功能 1、首先要往我们的unity项目中导入两个脚本文件&#xff0c;脚本文件名称分别是UIScrollEventListener和CZScrollRect&#xff0c;这两个脚本文件代码如下所示。 1-1、介绍UIScrollEventListener脚本写法。 using System.Collections; using System.Co…

Ubuntu 20.04 安装RVM

RVM是管理Ruby版本的工具,使用RVM可以在单机上方便地管理多个Ruby版本。 下载安装脚本 首先使下载安装脚本 wget https://raw.githubusercontent.com/rvm/rvm/master/binscripts/rvm-installer 如果出现了 Connection refused 的情况, 可以考虑执行以下命令修改dns,再执…

【自然语言处理】seq2seq模型—机器翻译

清华大学驭风计划课程链接 学堂在线 - 精品在线课程学习平台 (xuetangx.com) 代码和报告均为本人自己实现&#xff08;实验满分&#xff09;&#xff0c;只展示主要任务实验结果&#xff0c;如果需要详细的实验报告或者代码可以私聊博主 有任何疑问或者问题&#xff0c;也欢…

算法学习(七)枚举

枚举 1. 概念 枚举算法是我们在日常中使用到的最多的一个算法&#xff0c;它的核心思想就是:枚举所有的可能。 枚举法的本质就是从所有候选答案中去搜索正确的解,使用该算法需要满足两个条件&#xff1a; (1)可预先确定候选答案的数量&#xff1b; (2)候选答案的范围在求解之…

Linux网络编程——守护进程

文章目录 1. 前台 & 后台进程2. Linux进程之间的关系3. 守护进程 本章Gitee仓库&#xff1a;守护进程 1. 前台 & 后台进程 在Linux系统登陆的时候&#xff0c;它会给我们形成一次会话&#xff0c;会话在系统里面会创建一个bash进程&#xff0c;这个bash就会给用户提供…

Java 抽象容器类源码剖析

总体介绍 抽象容器类接口和具体容器类的关系如图所示&#xff0c;顶层包括Collection、List、Set、Queue、Deque和Map6个抽象容器类。 AbstractCollection&#xff1a;实现了Collection接口&#xff0c;被抽象类AbstractList、AbstractSet、AbstractQueue继承&#xff0c;Arra…

Vue-Router 官网速通

前言&#xff1a;参考Vue Router&#xff0c;本文档例子使用 vue3 语法。 一&#xff1a;介绍 1. 什么是 Vue Router 是 Vue.js 的官方路由。功能包括&#xff1a;1. 路由映射。2. 动态路由。3. 路由配置。4. 路由参数。5. 过渡效果。6. 导航控制。7. CSS 类链接。8. HTML5 模…

7.1 Qt 中输入行与按钮

目录 前言&#xff1a; 技能&#xff1a; 内容&#xff1a; 参考&#xff1a; 前言&#xff1a; line edit 与pushbotton的一点联动 当输入行有内容时&#xff0c;按钮才能使用&#xff0c;并能读出输入行的内容 技能&#xff1a; pushButton->setEnabled(false) 按钮不…

166基于matlab的通过峭度指标与互相关系数筛选IMF进行SVD分解去噪

基于matlab的通过峭度指标与互相关系数筛选IMF进行SVD分解去噪&#xff0c;分辨虚假imf&#xff0c;提取最大峭度imf图。输出去噪前后时域及其包络谱结果。程序已调通&#xff0c;可直接运行。 166 matlab SVD去噪 IMF筛选 包络谱 (xiaohongshu.com)

Android安卓架构MVC、MVP、MVVM模式的概念与区别

目录 MVC框架 MVP框架 MVVM框架 MVVM与MVP区别 MVVM与MVC区别 MVC、MVP、MVVM模式哪个要好一些 MVC&#xff08;Model-View-Controller&#xff09;、MVP&#xff08;Model-View-Presenter&#xff09;、MVVM&#xff08;Model-View-ViewModel&#xff09;是三种常见的软…

Json格式文件

1.把Java对象转换成Json格式 1.1.导入依赖 这里推荐一个插件Jackson&#xff0c;其提供的类可以让Java的类转换成Jason格式文件 <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><vers…

Camtasia2023破解版下载

Camtasia2023破解版是一款简单好用的屏幕录像软件&#xff0c;它结屏幕录制和录制视频编辑等功能于一身&#xff0c;不管是用来创建视频教程还是相关教学视频或者操作演示等都是不二的选择&#xff0c;软件支持录制全屏或者部分区域进行选择录制&#xff0c;可录制网络摄像头、…