2024年前端最新解析大厂前端笔试真题，超详细，一看就懂！（一）(1)，前端大厂面试题

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

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题

---

考点：数组二分查找

题目

解析：

待解决

最后

=============================================================

前端学习是一条漫长的道路，我们要学习的东西不仅仅只有表面的 技术，还要深入底层，弄明白下面的原理，只有这样，我们才能够提高自己的竞争力，在当今这个竞争激烈的世界里立足。

千里之行始于足下，愿你我共勉。

金三银四快到了，送给大家一个小福利，下面是我在工作之余整理的一些面试题，包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、react等等。

HTML 篇

• 图片中 title 和 alt 区别？

• Html5 有哪些新特性、移除了哪些元素

• 浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢

• 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• canvas在标签上设置宽高 和在style中设置宽高有什么区别

• 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

CSS 篇

• CSS中link与@import的区别：

• position的absolute与fixed共同点与不同点：

• BFC 有什么用

• 清除浮动的几种方式

• Css3 新增伪类 - 伪元素

• IE盒子模型 、W3C盒子模型

• display:inline-block 什么时候不会显示间隙？

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】