【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.hqwc.cn/news/472206.html

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

相关文章

【C++】---类和对象(上)入门

一、类的定义 1.那么众所周知&#xff0c;C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解的步骤&#xff0c;通过函数的调用来逐步解决问题 2.而C是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事情拆分成不同的对象&#xff0c;靠对象之间交…

压缩PDF的大小-Adobe Acrobat Pro

经常遇到上传的pdf太大&#xff0c;无法成功上传。 今天找到一个方法&#xff1a; 打开Adobe Acrobat Pro软件 → 文件 → 另存为其他&#xff08;H&#xff09;... →缩小大小的PDF 版本选择 4.0 最低的版本。 文件由9M变为1.5M。

第三百四十八回

文章目录 1. 概念介绍2. 使用方法2.1 List2.2 Map2.3 Set 3. 示例代码4. 内容总结 我们在上一章回中介绍了"convert包"相关的内容&#xff0c;本章回中将介绍collection.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的内容是col…

PLC_博图系列☞FBD

PLC_博图系列☞FBD 文章目录 PLC_博图系列☞FBD背景介绍FBD优势局限性 FBD 元素 关键字&#xff1a; PLC、 西门子、 博图、 Siemens 、 FBD 背景介绍 这是一篇关于PLC编程的文章&#xff0c;特别是关于西门子的博图软件。我并不是专业的PLC编程人员&#xff0c;也不懂电路…

anomalib1.0学习纪实

回顾&#xff1a;细分、纵深、高端、上游、积累、极致。 回顾&#xff1a;产品化&#xff0c;资本化&#xff0c;规模化&#xff0c;大干快上&#xff0c;小农思维必死无疑。 春节在深圳新地中央&#xff0c;学习anomalib1.0。 一、安装&#xff1a; 1、常规安装 采用的是…

Netty Review - 底层零拷贝源码解析

文章目录 Pre概述源码解析入口索引AbstractNioByteChannel.NioByteUnsafe#readallocHandle.allocate(allocator) 小结传统的零拷贝 Pre Netty Review - 直接内存的应用及源码分析 概述 Netty 的零拷贝技术是通过优化数据传输过程中的数据复制操作&#xff0c;以降低系统的开销…

租赁香港服务器多少钱一个月?24元

阿里云香港服务器2核1G、30M带宽、40GB ESSD系统盘优惠价格24元/月&#xff0c;288元一年&#xff0c;每月流量1024GB&#xff0c;多配置可选&#xff0c;官方优惠活动入口 https://t.aliyun.com/U/bLynLC 阿里云服务器网aliyunfuwuqi.com分享阿里云香港服务器优惠活动、详细配…

嵌入式Qt Qt中的字符串类

一.Qt中的字符串类 QString vs string&#xff1a; QString在Qt库中几乎是无所不在的 所有的Qt图形用户组件都依赖于QString 实验1 &#xff1a;QString 初体验 #include <QDebug> void Sample_1() {QString s "add";s.append(" "); // &q…

Python 异常处理及程序调试

Python 是一门功能强大而又易于学习的编程语言&#xff0c;它提供了丰富的工具和库来帮助开发者编写高效、稳定的程序。然而&#xff0c;在编写复杂的应用程序时&#xff0c;错误和异常是难以避免的。本文将介绍 Python 中的异常处理机制以及程序调试技巧&#xff0c;帮助读者提…

开什么店最稳定轻松?适合一个人开的实体店推荐

在创业的道路上&#xff0c;很多人都希望找到一种稳定轻松的开店方式。 作为一名资深的鲜奶吧创业者&#xff0c;我将分享我的经验和见解&#xff0c;希望能给那些想开实体店的朋友们一些启示&#xff01;&#xff01; 我开鲜奶吧已经有 5 年时间了&#xff0c;目前经营的是鲜…

Chat with RTX 安装

1、Chat With RTX 介绍 Chat With RTX 是一个 Demo&#xff0c;用来将您自己的资料&#xff08;文档、笔记、视频或其他数据&#xff09;与大语言模型建立连接&#xff0c;从而令 LLM 更具个性化。利用检索增强生成 (RAG)、TensorRT-LLM 和 RTX 加速&#xff0c;您可以与自定义…

Java实现河南软件客服系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统管理人员2.2 业务操作人员 三、系统展示四、核心代码4.1 查询客户4.2 新增客户跟进情况4.3 查询客户历史4.4 新增服务派单4.5 新增客户服务费 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的河…