解析大厂前端笔试真题

LINGLONG
2,557 阅读13分钟

关于该文章的说明

这是关于大厂面试题的整理，是一些个人觉得有价值的题和自己的错题。所以本文适合刷笔试题的朋友看。

高中的时候记得每门学科都会有错题本。前几天做题就想着什么时候把自己练习的错题整理到一起，玲珑觉得笔试题做的不在多，而是能够达到做一题会一类的效果。所以便有了这篇文章，文章也会随着做题的数量越来越长。

也希望能和其他朋友一起讨论前端的知识，一起进步，多学习点东西。

第一套：网易2020校招提前批

第五题

考点：数据结构中的排序

题目

解析

这道题考的是排序，那么我们就要知道每种排序的思想和特点。恰好直接插入排序符合题目说的要求。该排序有两层循环，第一层将这个数组完整遍历一遍控制趟数，第二层循环将准备插入的数与前面排好的数从后向前扫描比较大小。而希尔排序会考虑到分组。想进一步了解排序，可以看看我的article：juejin.cn/post/684490… 我们来一起看看。 😊

第四题

考点：js的隐式类型转换

题目：

在试图输出变量的时候会进行隐式转换，自动调用变量的tostring和valueof方法。

做题必备小知识

==和===的区别：

  • 出现==： 我们可以将===看作==的严格模式，当==的时候如果数据类型相同那么就会转换成===；如果数据类型不同那么会自动的进行一次类型转换，转换成相同的类型后进行比较。
  • 出现===：出现三个等号的时候，首先判断的是类型是否相等，如果不相等就会返回false

valueOf方法和toString方法默认调用toString方法

  • 这是为什么呢，我看的有些博客直接说默认调用toString并没有说明原理。其实是这样的，我们看下面的一个例子，虽然colors.valueOf()方法返回的还是一个数组，但是在alert输出的时候隐式调用了toString方法，所以结果是相同的。
  • 但是如果是数值运算优先调用valueOf()方法。
var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组  
alert(colors.toString()); // red,blue,green  
alert(colors.valueOf()); // red,blue,green  
alert(colors); // red,blue,green

解析

  • 第一次输出：arr==="";类型都不同，不会调用toString也不会调用valueOf。返回false
  • 第二次输出：arr=="";类型不同但是调用toSrting再进行比较。最后返回true
  • 第三次输出：arr===1；结果是false道理同第一次输出
  • 第四次输出：arr==1；结果是true，道理同第二次输出，两个方法不是都被重写，调用的是toString方法。
  • 第五次输出：arr == 2；结果是true，调用valueOf方法。
  • 第六次输出：类型都是同样的object，但是值不相同，所以返回的结果是false

第五题

考点：let特点，改变this指向

题目：

解析:

  • fun()是在全局window上调用，但是全局并没有a，使用let和const声明的变量不属于window对象，所以打印undefind
  • fun.aplly(obj)改变this指向，结果是1.
  • 值得一提的是第三个。fun.bind(obj1).apply(obj);先通过bind让this绑定到obj1，然后会返回一个新的函数并不执行；且这个新函数确定了this和形参，无法再改变。因而后面的apply相当于失效。结果是2。
  • 第四个new fun()考察new的过程
    • 1.生成一个新对象
    • 2.获得构造函数链接到原型
    • 3.绑定this执行构造函数
    • 4.返回新对象 这个题目里面构造函数没有a属性，返回undefined。

第十题

考点：flex布局计算

题目

解析:

flex-grow: 定义项目放大比例
flex-shrink：定义项目缩小比例
flex-basis：定义了分配多余空间之前，项目占据主轴的空间。

我们看到父元素的宽度是200px，左右分配空间之前的宽度和100px+50px=150px；所以我们的左右盒子应该放大和是50px。根据放大比例是3:2；所以左边盒子50px+30px=80px，右盒子120px。宽度比2:3。

第二套：2020网易校招正式批

第8题

考点：箭头函数没有this

题目：

解析：

箭头函数不绑定this，箭头函数不绑定自己的this关键字，如果在箭头函数中使用this，那么this将会指向箭头函数定义位置的this。 我们看下面的一个例子

function fn (){
    console.log(this);
    return ()=> {
        console.log(this);
    }
}
const obj = {name:'zhangshan'};
const resFn = fn.call(obj);
resFn();

const resFn = fn.call(obj);让fn的this绑定到obj上；执行resFn()函数就是执行返回的箭头函数，打印的this是fn的this，也就是obj。

然后·回到我们这个题，也是一样的道理，三次都指向共同的父亲的this，也就是箭头函数定义位置的this。三次返回的结果都是foo.

第三套：小米校招前端笔试题1

第五题

考点：js中的加号含义

题目

解析

我们先来复习一下js中的六大数据类型，undefined、null、string、number、booleam五种基本类型和引用类型object，除基本类型的都是引用类型例如array、function等。

然后加号最终会存在两种类型转换： 1、当加号两边存在符串的时候按照字符串处理拼接成字符串 2.当没有字符串就当数字处理。所以这个李牧两次都应看成字符串的拼接。

第12题

考点：二叉树遍历

题目

解析：

根据前序遍历和中序遍历的特点，c为根节点，所以BAFE是c的左子树，剩余结点是c的右子树。然后我们可以画出如下图所示的二叉树，再后续遍历先遍历左子树，再遍历右子树，最后根节点。结果是bfeahgdc

第13题

考点：数组二分查找

题目

解析：待解决

第四套：小米校招前端（2）

整体说明

这套面试题与第一套有很多相同的知识点，但是做完发现很有几个不该错的地方都错了，没有一点题感，不够仔细。不知是不是流感的原因，总之做题要每一个字仔仔细细看清楚并思考。

第1题

考点：栈的基本操作

题目

解析

第10题

考点：git操作

题目

解析

一、Git本地常用操作指令
1、创建git库

git init  #在当前目录中生成一个.git 目录（含有.git目录的目录即是git仓库）

2、注册git用户

--->用于在团队合作开发中，表明代码作者。

git config --global user.name XXX  #用户名

git config --global user.email XXX   #用户邮箱

git config --list  #查看用户信息

注：加--global，全局设置。

3、向git库添加修改

git add [path］ #会把对应目录或文件，添加到stage状态
git add .  #会把当前所有的untrack files和changed but not updated添加到stage状态

实际上是为修改内容添加index索引。

4、向版本库提交修改

git commit –m “XXXX”     #提交修改,添加注释

注：git 提示： 未有add红色字体，未有commit绿色字体，已提交则worktree是干净的

5、查看当前代码库的状态

git status

6、查看版本信息

--->实际是查看修改提交信息

git log

git log --graph  #以图形化（节点）展示当前git库的提交信息。

7、查看指定版本信息

git show sdjf974654dd….  #(show后面为每次提交系统自动生成的一串哈希值)

git show sdji97 #一般只使用版本号的前几个字符即可

8、撤销修改

git reset
（1）撤销整体修改
git reset --hard  #回到原来编辑的地方,改动会丢失。（同样适用于团队对于其他人
的修改恢复）

git reset --hard sdv143kvf…... #可回到指定的版本#(hard后面为每次提交系统自
动生成的一串哈希值)
     git reset [path] 会改变path指定的文件或目录的stage状态，到非stage状态。
     git reset 会将所有stage的文件状态，都改变成非stage状态。

（2）撤销某次修改
    回退1个change的写法就是git reset HEAD^，
    2个为HEAD^^，
    3个为HEAD~3，以此类推。

9、向远端库推送修改（提交修改）

git push origin 分支名

10、暂存修改

git stash可以把当前的改动（stage和unstage，但不包括untrack的文件）暂存。

然后通过git stash list查看。

并通过git stash apply重新取出来。但apply之前要保证worktree是干净的。

二、Git团队开发常用操作指令

1、获取远端库项目

git  clone/pull

2、团队开发的基本流程（多分支合并一个分支）

git add .   #添加改动的文件
git commit  #（提交至本地）
git pull --rebase  #（将服务器项目与本地项目合并）
git push    #（将本地项目上传至远端库）
（在提交前要git pull --rebase 一下，确保当前的本地的代码为最新。）

三、Git 分支管理

1、建立分支
git branch AAA   #建立分支AAA

2、分支切换
git checkout AAA   #从当前分支切换到AAA分支 (若AAA分支不存在，则自动新建)

3、将分支与主枝master合并
git checkout master   #（首先切换回主枝）
git merge AAA    #（将分支AAA与主枝合并）

注：git merge：默认情况下，Git执行"快进式合并"（fast-farward merge），会直接将Master分支指向Develop分支。
使用--no-ff参数后，会执行正常合并，在Master分支上生成一个新节点。为了保证版本演进的清晰（保持提交曲线为直线），建议采用这种方法。

4、当前分支查看
git branch    #默认有master（也称为主枝）
git branch -r  #查看远端库分支
git branch –a  #查看当前所有分支（包括本地分支和远端库分支）

5、删除分支
git branch –d  AAA   #删除分支AAA

6、切下远端库A分支到本地库A分支

git checkout -b  A origin/A  （若本地A分支不存在，则自动新建）

注：上面只是一些基本的操作命令，更多的命令可通过帮助文档查询。
         帮助文档的使用：
man git-<需查询的指令>      #（git后面有“-”）
    如commit的查询为  man git-commit

第20题

考点let关键字

题目

解析

  • var关键字可以重新定义,重新赋值，let关键字不可以重新定义，可以重新赋值。
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';
  var varTest = 'varTest changed.';
  let letTest = 'letTest changed.'; //直接报错：SyntaxError: Identifier 
  console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
  console.log(letTest);
  • let关键字存在暂时性死区，如果在块级作用域中使用了let命令，声明的变量就绑定了这个区域，不再受外部的影响。
  • 在showName这个函数中，let声明在console的后面，最后运行的结果会报错。
  • 下面的这个例子删掉let命令后就不会报错
  • 下图是一些例子

第24题

考点：number类型的属性

题目：

解析：

输出的结果一个true，一个false。考的是对number上的属性的理解。在最小值这个属性中，MIN_VALUE 属性是 JavaScript 中可表示的最小的数（接近 0 ，但不是负数）。它的近似值为 5 x 10-324。这是官方文档给出得解释。

第26题

考点：行级元素设置宽高

题目

解析

链接：https://www.nowcoder.com/questionTerminal/0a08a4592b17408081f6072522317af3
来源：牛客网

行级元素（内联元素）
feature：1.内容决定所站位置 
2.不可以通过css改变宽高 
代码：display：inline 
代表元素：span strong em a del

块级元素
feature：1.独占一行 
2.可以通过css改变宽高 
代码：display：block 
代表元素：div p ul li ol form address

行级块元素
feature：1.内容决定所站位置 
2.可以通过css改变宽高 
代码：display：inline-block 
代表元素：img

display各个属性

可以查阅官方文档
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

行级元素转块级元素的总结

  • display：block/table
  • position: absolute/flex
  • float:

5百度校招

考点正则表达式

题目

解析

这道题的考点是转义字符，‘\\\’会被转义成三个反斜杠，‘\\\\’转义成四个斜杠。就是用三个\去匹配四个,然后匹配到的三个\变成了三个/,还有没被替换的\。结果就是/\

金山办公2

题目

请列举几个HTML5语义化标签，并说说语义化有什么优点？

解析

什么是语义化标签，语义化标签就是用跟好的方式去表达标签里的内容，比如标题标签可以用div加样式实现，也可以用语义化标签h1,等写一个标题。

  • css层面：能够更减少css样式使用，不用css也能书写书样式效果

  • html层面：优化了html的结构

  • 页面加载：通常html标签减少页面加载更快

  • 搜索引擎层面：seo提升搜索引擎优化，和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

  • 团队合作层面：代码结构化可读性增强，利于团队合作开发。遵循W3C标准的团队都遵循这个标准，可以减少差异化。

<header></header>头部

<nav></nav>导航栏

<section></section>区块（有语义化的div）

<main></main>主要区域

<artical></artical>主要内容

<aside></aside>侧边栏

<footer></footer>底部

题目：

请列举几种除了px外的CSS度量单位并解释其含义

绝对长度单位

px，in，cm，mm

相对长度单位

em，rem，ex，ch

基于视口的长度单位

vw/vh 和vmax/vmin 可参考好文

题目

简述cookie/session记住登录状态机制原理。

题目

网页中接收事件的顺序（事件流）有哪些？它们之间的区别是什么？

  • 事件冒泡
  • 事件捕获
  • DOM事件流：事件捕获，事件绑定，事件冒泡
  • DOM1事件流
  • DOM2事件流
  • 事件委托：利用事件冒泡原理，假如ul下有一百个li我们不用在100个li上添加绑定事件，直接在ul添加事件冒泡到ul的时候就会触发这个事件 参考好文

题目

position的属性： absolute绝对定位 relative相对定位 fixed固定定位 sticky粘性定位 static默认值，没有定位 inherit继承父系 initial设置该属性为默认值

文章的结尾

看到文章的结尾就结尾了？答案是三个字：不可能！玲珑没有找到满意的offer会一直记录下去。大家看到这儿也辛苦啦，玲珑改错也花了时间，希望能够给我一个小小的赞，你看完留下的痕迹对我来说是莫大的鼓励！！！

欲知后事如何，请听下回分解

未完待续...

avatar
文章
阅读
粉丝