前端经典面试题 不经典不要star!

前言

(以下内容为一个朋友所述)今天我想跟大家分享几个前端经典的面试题,为什么我突然想写这么一篇文章呢?今天我应公司要求去面试了下几位招聘者,然后又现场整不出几个难题,就搜了一下前端变态面试题! HAHA,前提我并不是一个变态,欺负人的面试官.只是我希望看看对方的逻辑能力!

从而又拿这些面试题进行了自我检测,发现还是有一些坑的~~~
接下与大家进行几道题的分析 分享 互勉!

正文

先把我挑选的几道,不一定最经典.但是会让你有学习的进步!列举一下

//第1题 ["1", "2", "3"].map(parseInt) //第2题 [ [3,2,1].reduce(Math.pow), [].reduce(Math.pow) ] //第3题 var ary = [0,1,2]; ary[10] = 10; ary.filter(function(x) { return x === undefined;}); //第4题 [typeof null, null instanceof Object] //第5题 function sidEffecting(ary) { ary[0] = ary[2]; } function bar(a,b,c) { c = 10 sidEffecting(arguments); return a b c; } bar(1,1,1) //第六题 var END = Math.pow(2, 53); var START = END - 100; var count = 0; for (var i = START; i <= END; i ) { count ; } console.log(count); 

读者思考时间

大家努力思考,努力!==============================================

接下来一道一道咱们去慢慢解析

第一题:

["1", "2", "3"].map(parseInt) 

这道题知识点包括:

  1. Array/map
  2. Number/parseInt
  3. JavaScript parseInt

按照上面知识点来串一下这道题!

首先, map接受两个参数, 一个回调函数 callback, 一个回调函数的this值 其中回调函数接受三个参数 currentValue, index, arrary; 而题目中, map只传入了回调函数--parseInt. 其次, parseInt 只接受两个两个参数 string, radix(基数). 本题理解来说也就是key与 index 所以本题即问 parseInt('1', 0); parseInt('2', 1); parseInt('3', 2); 首先后两者参数不合法. 所以答案是 [1, NaN, NaN] 如果研究理解了 parseInt(3, 8) parseInt(3, 2) //下方评论该题答案 别作弊哦! parseInt(3, 0) 

第二题:

[ [3,2,1].reduce(Math.pow), [].reduce(Math.pow) ]

这道题知识点:

  • Array/Reduce

穿插知识点来一次这道题!

arr.reduce(callback[, initialValue])reduce接受两个参数, 一个回调, 一个初始值.回调函数接受四个参数 previousValue, currentValue, currentIndex, array 需要注意的是 If the array is empty and no initialValue was provided, TypeError would be thrown. 所以第二个表达式会报异常. 第一个表达式等价于 Math.pow(3, 2) => 9; Math.pow(9, 1) =>9 

答案 

an
 
error

第三题:

var ary = [0,1,2]; ary[10] = 10; ary.filter(function(x) { return x === undefined;}); 答案是 []

知识点是:

  • 稀疏数组

我们来看一下 Array.prototype.filter 的 polyfill:

if (!Array.prototype.filter) { Array.prototype.filter = function(fun/*, thisArg*/) {  'use strict'; if (this === void 0 || this === null) { throw new TypeError(); } var t = Object(this); var len = t.length >>> 0; if (typeof fun !== 'function') { throw new TypeError(); } var res = []; var thisArg = arguments.length >= 2 ? arguments[1] : void 0; for (var i = 0; i < len; i ) { if (i in t) { // 注意这里!!! var val = t[i]; if (fun.call(thisArg, val, i, t)) { res.push(val); } } } return res; }; }

我们看到在迭代这个数组的时候, 首先检查了这个索引值是不是数组的一个属性, 那么我们测试一下.

0 in ary; => true 3 in ary; => false 10 in ary; => true

也就是说 从 3 - 9 都是没有初始化的

bug 
!, 这些索引并不存在与数组中. 在 array 的函数调用的时候是会跳过这些坑的.

第四题:

[typeof null, null instanceof Object]

知识点:

  1. Operators/typeof
  2. Operators/instanceof

typeof 返回一个表示类型的字符串.

instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上.

这个题可以直接看链接... 因为 typeof null === 'object' 自语言之初就是这样....

typeof 的结果请看下表:

type         result
Undefined   "undefined" Null "object" Boolean "boolean" Number "number" String "string" Symbol "symbol" Host object Implementation-dependent Function "function" Object "object" 

所以答案 [object, false]

第五题:

function sidEffecting(ary) { ary[0] = ary[2]; } function bar(a,b,c) { c = 10 sidEffecting(arguments); return a b c; } bar(1,1,1) 

知识点:

  • Functions/arguments

首先 The arguments object is an Array-like object corresponding to the arguments passed to a function.

也就是说 arguments 是一个 object, c 就是 arguments[2], 所以对于 c 的修改就是对 arguments[2] 的修改.

所以答案是 21.

但是!!!!

当函数参数涉及到 any rest parameters, any default parameters or any destructured parameters 的时候, 这个 arguments 就不在是一个 mapped arguments object 了.....

请看:

function sidEffecting(ary) { ary[0] = ary[2]; } function bar(a,b,c=3) { c = 10 sidEffecting(arguments); return a b c; } bar(1,1,1)

答案是 12 !!!!

请慢慢体会!!

第六题:

咳咳咳!
细心的小伙伴发现了我第

6
题不是第
6
题而是第

其实这个是给你们留下一个思考的题 如果有疑问或者探讨请留言!

【我有一个前端学习交流QQ群:328058344 如果你在学习前端的过程中遇到什么问题,欢迎来我的QQ群提问,群里每天还会更新一些学习资源。禁止闲聊,非喜勿进。】

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

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

相关文章

Web前端开发学习误区,你掉进去了没?

从接触网站开发以来到现在&#xff0c;已经有五个年头了吧&#xff0c;今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时&#xff0c;勾起了在这网站开发道路上的一串串回忆&#xff0c;成功与喜悦、烦恼与纠结都历历在目&#xff0c;感慨颇多。 先从大家学…

spring mvc的工作原理

该文转载自&#xff1a;http://blog.csdn.net/u012191627/article/details/41943393 SpringMVC框架介绍 1) spring MVC属于SpringFrameWork的后续产品&#xff0c;已经融合在Spring Web Flow里面。 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的…

使用IntelliJ IDEA的原因

介绍 我经常遇到一个问题&#xff0c;为什么我使用Intellij来支持另一个IDE&#xff08;在本例中为Eclipse&#xff09;。 大多数时候&#xff0c;我会通过演示IntelliJ的某些功能并展示一切的集成程度来回答这个问题。 这让我开始思考使用它的真正原因是什么。 这篇文章将试图…

linux光标美化包,使用 [ powerlevel10k ] 美化你的WSL (Linux)

使用 [ powerlevel10k ] 美化你的WSL (Linux)使用 [ powerlevel10k ] 美化你的WSL (Linux)前言关于linux终端的美化&#xff0c;网上的教程有很多&#xff0c;但对于国内的用户来说&#xff0c;效果往往是这样的&#xff1a;教程中通过以下命令安装 oh-my-zshsh -c "$(cur…

HashMap实现原理分析

1 HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储&#xff0c;但这两者基本上是两个极端。 数组 数组存储区间是连续的&#xff0c;占用内存严重&#xff0c;故空间复杂的很大。但数组的二分查找时间复杂度小&#xff0c;为O(1)&#xff1b;数组的特点是&#xf…

opencv3.2.0在vs2015下安装与配置

准备工作 VS2015OpenCV 3.2.0OpenCV配置环境变量&#xff0c;path下添加\opencv\build\x64\vc14\bin&#xff0c;新设置的环境变量需要重启才能使用测试工程 新建VC控制台空项目修改平台为x64&#xff0c;这一步先做源文件中加入main.cpp&#xff0c;测试代码&#xff1a;#incl…

如何使用字节序列化双精度数组(二进制增量编码,用于低差单调浮点数据集)...

低延迟系统需要高性能的消息处理和传递。 由于在大多数情况下&#xff0c;数据必须通过有线传输或进行序列化才能保持持久性&#xff0c;因此编码和解码消息已成为处理管道的重要组成部分。 高性能数据编码的最佳结果通常涉及应用程序数据细节的知识。 本文介绍的技术是一个很好…

微信小程序 引入公共页面的几种情况

1、不带参数 首先在pages文件夹中新建一个template文件夹&#xff0c;文件夹中新建一个template.wxml文件&#xff0c;代码如下 <!--template.wxml--> <template name"msgItem"><view><text>This is template.wxml文件&#xff0c;我是一个…

易语言自定义数据类型转c,一步一步跟我学易语言之自定义数据类型

自定义数据类型什么是“自定义数据类型”&#xff1f;顾名思义&#xff0c;就是用户可以随时在程序中自行定义新的数据类型。自定义数据类型时需要设置数据类型的名称及其成员。数据类型成员各属性的设置方法等同于变量设置时相应属性的设置方法。双击“程序”中的“自定义数据…

Redis初步整理

1&#xff0c;Redis 简介 Redis 是完全开源免费的&#xff0c;遵守BSD协议&#xff0c;是一个高性能的key-value数据库。 Redis 与其他 key - value 缓存产品有以下三个特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保持在磁盘中&#xff0c;重启的时…

阶段十-物业项目

可能遇到的错误&#xff1a; 解决jdk17javax.xml.bind.DatatypeConverter错误 <!--解决jdk17javax.xml.bind.DatatypeConverter错误--><dependency><groupId>javax.xml.bind</groupId><artifactId>jaxb-api</artifactId><version>…

echarts中triggeron与trigger不能同时出现吗_好物|痛风、血糖高、虚不受补能吃它吗?你想知道的阿胶十问十答一锅出!...

最近百草君在整理粉丝留言的时候&#xff0c;发现关于阿胶四物膏的留言不少&#xff0c;并且有重复问题。百草君特意整理出来几个粉丝们特别关注的问题&#xff0c;给大家统一解答&#xff0c;顺序不分前后&#xff1a;Q1阿胶四物膏什么口感&#xff0c;甜不甜&#xff1f;阿胶…

【移动端 Web】怎么循序渐进地开发一个移动端页面

1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础&#xff0c;那么到底什么才是一个像素呢&#xff1f; 像素&#xff1a;一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念&#xff0c;实际上&#xff0c;Web 前端开发领域&…

带有Spring的JavaFX 2

我将从一个大胆的声明开始&#xff1a;我一直很喜欢Java Swing或applet。 在那里&#xff0c;我说了。 如果我进行一些自我分析&#xff0c;那么这种钦佩可能是在我入门Java时开始的。 Swing&#xff08;实际上&#xff09;是我使用Java所做的第一件事&#xff0c;它给出了一些…

c++ 分页展示_分合相宜 Excel透视报表生成分页和汇总报表

我们经常要利用Excel生成指定类型的报表&#xff0c;但是很多报表原始数据是混杂在一起&#xff0c;或者是分布在各个子表中。现在利用Excel透视报表的功能&#xff0c;我们可以快速将混杂的数据分离为分页报表&#xff0c;或者将独立子表整合为汇总报表。简单分页&#xff0c;…

【springBoot】之定制Banner

springboot启动时控制台打印图案如下: 1、假如我们不想看到这个图案 public static void main(String[] args) {SpringApplication applicationnew SpringApplication(Application.class);/*** OFF G关闭* CLOSED 后台控制台输出&#xff0c;默认就是这种* LOG 日志输出*/appli…

Web前端体系的脉络结构

Web前端技术由 html、css 和 javascript 三大部分构成&#xff0c;是一个庞大而复杂的技术体系&#xff0c;其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入&#xff0c;然后不断地接触和学习新的知识点&#xff0c;因此对于初学者很难理清楚整…

无法访问netflix服务_Choerodon 的微服务之路(三):服务注册与发现

本文是 Choerodon 的微服务之路系列推文第三篇。在上一篇《Choerodon的微服务之路&#xff08;二&#xff09;&#xff1a;微服务网关》中&#xff0c;介绍了Choerodon 在搭建微服务网关时考虑的一些问题以及两种常见的微服务网关模式&#xff0c;并且通过代码介绍了Choerodon …

excel中如何取消自动超链接?

最近做的表格有点多&#xff0c;年终述职也到了。总有一些地方生疏了&#xff0c;幸好还有点小印象。记录下来&#xff0c;以后可以回来看看。方法一 适合单个链接的取消 1输入网址后&#xff0c;按回车键确认&#xff0c;快捷键ctrlz&#xff0c;即可取消&#xff0c;这种不好…

大根堆的删除c语言,大根堆和小根堆的C语言实现

大根堆小根堆的实现&#xff1a;以PPT形式呈现大根堆构建的理论过程1、首先涉及到一个堆的调整&#xff0c;这也是算法的核心部分。假设树中&#xff0c;节点i的子树已经为两个大根堆。这两个子树再加上i节点的话&#xff0c;可能是大根堆也可能不是&#xff0c;因此需要对节点…