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

news2024/11/26 22:17:07

专题缘由

该专题主要是讲解我们在面试的时候碰到一些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.coloradmin.cn/o/1448903.html

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

相关文章

MySQL数据库⑩_视图+MySQL用户管理(增删查改)

目录 1. 视图的概念和规则限制 2. 视图的基本使用 2.1 创建视图 2.2 修改视图影响基表 2.3 修改基表影响视图 2.4 删除视图 3. MySQL用户管理 3.1 用户信息 3.2 创建用户 3.3 修改用户密码 3.4 删除用户 4. 用户权限 4.1 MySQL权限 4.2 给用户授权 4.3 回收权限…

imazing怎么连接苹果手机

imazing怎么连接苹果手机 要连接苹果手机&#xff0c;您可以选择使用数据线或无线网络&#xff08;Wi-Fi&#xff09;两种方式。以下是具体的步骤&#xff1a; 使用数据线连接&#xff1a; 准备工具&#xff1a;确保您的Mac或Windows电脑已经安装了iMazing软件&#xff0c;并且…

谷歌浏览器安装扩展程序axure-chrome-extension

注&#xff1a; 文末附扩展附件&#xff1a;axure-chrome-extension_v0.7.0.crx 1、安装扩展程序axure-chrome-extension 找到axure-chrome-extension.crx&#xff0c;把axure-chrome-extension.crx后缀改为zip&#xff0c;然后解压&#xff0c;得到一个文件夹 2、打开谷歌浏览…

OJ_奇怪的餐厅

题干 鲁大师和他的朋友经常去一家奇怪的餐厅&#xff0c;为什么说奇怪呢&#xff0c;一是餐厅提供的菜品比较奇怪&#xff0c;二是餐厅的付费规则比较奇怪&#xff0c;每个人有不同的折扣上限&#xff08;单人从总结里折算的最高金额&#xff09;&#xff0c;超过折扣上限的部…

蓝桥杯嵌入式第12届真题(完成) STM32G431

蓝桥杯嵌入式第12届真题(完成) STM32G431 题目 程序 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body**************************…

RK3568平台开发系列讲解(实验篇)杂项设备驱动实验

🚀返回专栏总目录 文章目录 一、什么是杂项设备驱动二、杂项设备的注册和卸载三、杂项设备驱动实验代码沉淀、分享、成长,让自己和他人都能有所收获!😄 一、什么是杂项设备驱动 在 Linux 中,把无法归类的五花八门的设备定义成杂项设备。相较于字符设备,杂项设备有以下两…

网络原理(3)--以太网协议,DNS

&#x1f495;"Echo"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;网络原理(3)–以太网协议,DNS 在网络原理(2)中介绍了网络层中的一个重要的协议–ip协议,网络层关注的通信时的起点和终点,而数据链路层更加"底层"一些,关注的是传输过程…

【数据结构】图

文章目录 图1.图的两种存储结构2.图的两种遍历方式3.最小生成树的两种算法&#xff08;无向连通图一定有最小生成树&#xff09;4.单源最短路径的两种算法5.多源最短路径 图 1.图的两种存储结构 1. 图这种数据结构相信大家都不陌生&#xff0c;实际上图就是另一种多叉树&…

Vue项目-创建

Vue项目-创建 创建一个工程化的Vue项目&#xff0c;执行命令&#xff1a;npm init vuelatest 第一次执行npm init vuelatest命令&#xff0c;会出现以下提示&#xff0c;输入y即可安装create-vue最新版本。 随后create-vue脚手架会给出项目的众多选项 根据提示输入命令 cd…

全面理解JVM虚拟机

为什么要学JVM&#xff1f; ​ 首先&#xff1a;面试需要。面试题层出不穷&#xff0c;难道每次面试都靠背几百上千条面试八股&#xff1f; ​ 其次&#xff1a;基础决定上层建筑。自己写的代码都不知道是怎么回事&#xff0c;怎么可能写出靠谱的系统&#xff1f; ​ 然后&a…

Github 2024-02-15 开源项目日报 Top9

根据Github Trendings的统计&#xff0c;今日(2024-02-15统计)共有9个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量TypeScript项目4Python项目2Solidity项目2Rust项目1JavaScript项目1Go项目1C项目1 Terraform: 以安全和可预测…

UniApp学习之旅:从入门到快速上手

随着移动互联网的迅猛发展&#xff0c;跨平台应用开发成为了开发者们的热门选择。UniApp&#xff0c;作为一款使用Vue.js开发所有前端应用的框架&#xff0c;因其简单、高效、易上手的特性&#xff0c;受到了广大开发者的青睐。本文将带你走进UniApp的世界&#xff0c;从基础学…

2024年,要特别注意这两个方位

家居风水对每个家庭都非常重要&#xff0c;可在无形中影响到人们的事业、财富以及健康运势。俗话说&#xff1a;“风水轮流转”&#xff0c;2024年为甲辰龙年&#xff0c;斗转星移、九宫飞星将改变宫位&#xff0c;新一年的磁场即将启动&#xff0c;方位的吉凶也会重新变动&…

MySQL主从环境,主库改端口后,从库如何操作?

主库&#xff1a;mysql-111 从库&#xff1a;mysql-112 主库由3306端口修改成3307后&#xff0c; 从库执行如下命令 mysql> stop slave; mysql> change master to master_port3307; mysql> CHANGE MASTER TO MASTER_HOST192.168.10.111,MASTER_USERbeifen,MASTER_PA…

MATLAB|基于改进二进制粒子群算法的含需求响应机组组合问题研究(含文献和源码)

目录 主要内容 模型研究 1.改进二进制粒子群算法&#xff08;BPSO&#xff09; 2.模型分析 结果一览 下载链接 主要内容 该程序复现《A Modified Binary PSO to solve the Thermal Unit Commitment Problem》&#xff0c;主要做的是一个考虑需求响应的机组组合…

Unity中使用WebSocket (ws://)的方法

WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直接可以创建持久性的连接&#xff0c;并进行双向数据传输。 WebSocket与http 其…

第10集《佛说四十二章经》

请大家打开讲议第十一面&#xff0c;第十九章、假真并观。 前面一章念等本空&#xff0c;说明大乘佛法的修学&#xff0c;身口意应安住在非空非有的中道实相。本章对中道实相的修学&#xff0c;再做明确的说明。修中道实相观要有空观与假观的观照&#xff0c;从空观中远离有相…

站在C/C++的肩膀速通Java面向对象

默认学过C或C&#xff0c;对变量、表达式、选择、循环都会。 运行特征 解释型语言&#xff08;JavaScript、Python等&#xff09; 源文件-(平台专属解释器)->解释器中执行编译型语言&#xff08;C、Go等&#xff09; 源文件-(平台编译器)->平台可执行文件Java 源文件-(…

腾讯云4核8G服务器3年600元?

腾讯云4核8G服务器3年600元&#xff1f;目前的价格是轻量应用服务器4核8G12M带宽一年446元、646元15个月&#xff0c;云服务器CVM标准型S5实例4核8G配置价格15个月1437.3元&#xff0c;5年6490.44元&#xff0c;标准型SA2服务器1444.8元一年&#xff0c;在txy.wiki可以查询详细…

4核16G服务器阿里云是怎么收费的?贵吗?

阿里云4核16G服务器优惠价格ECS云服务器经济型e实例26元1个月、149元半年、79元3个月&#xff0c;4核16G通用算力u1服务器、通用型g7、通用型g8i、AMD通用型g8a、性能增强通用型g8ae、高主频通用型hfg8i、AMD通用型g7a、内存型r7p等均提供4核16G配置。阿里云服务器网aliyunfuwu…