前端开发工程师面试题集锦（一）

今天主要分享一些前端开发高频面试题，也会提供一些答案参考，后续会慢慢更新更多的
1.行内元素和块级元素有哪些？区别是什么？
答：
行内元素：与其他行内元素并排，不能设置宽高，例a img span
块级元素：独占一行，可以设置宽高，例如div p h1-h6 ul
行内元素转为块级元素使用display：block
块级元素转为行内元素使用display:inline;
2.前端存储方式有哪些？区别是什么？
答：
cookies：是html5标准前本地存储的主要方式，优点是兼容性好，但是大小只有4K；
localStorage:HTML5加入的以键值对方式存储，操作方便，永久性存储；
sessionStorage：会话级的存储，页面关闭后就会被清理；
3.CSS选择器有哪些？优先级是怎样的？
答：
1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 5.群组选择器 5.父子选择器 6.后代选择器
优先级：!important>内联>id>类>元素
4.谈谈CSS盒模型？
答：
盒模型就是在对一个文档进行布局的时候，浏览器的渲染引擎会根据标准把所有的元素表示为一个个矩形的盒子，然后用CSS决定这些盒子的大小，位置以及属性；
盒模型分为标准盒模型和IE盒模型；
在标准模型中元素宽度由margin、border、padding、width组成，但是在使用标准盒模型的时候，设定好宽高后整个元素的宽高会受到边距边框的影响，可能会造成布局混乱，所以我在开发过程中用的比较多的是IE盒模型，其中元素宽度就等于margin加上width，所以，设定好宽高之后，不管内部padding和border怎么设置，整个元素宽高是不变的；
5.谈谈对BFC的理解？
答：
BFC我的理解就是一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离；
作用是：1.防止margin发生重叠；2.防止元素发生塌陷
1.防止margin发生重叠方法：外层元素padding代替，内层元素设置绝对定位；内层元素加float：left或者display：inline-block；
防止元素发生塌陷方法：给父元素末尾加一个空元素，并设置成清除浮动；给父元素添加overflow：auto；让父元素也浮动；
6.有哪些方式可以隐藏页面元素？
答：
opacity:0 ：本质上是将元素的透明度将为0，就看起来隐藏了但是依然占据空间且可以交互
visibility:hidden : 与上⼀个⽅法类似的效果，占据空间，但是不可以交互了
overflow:hidden : 这个只隐藏元素溢出的部分，但是占据空间且不可交互
display:none : 这个是彻底隐藏了元素，元素从⽂档流中消失，既不占据空间也不交互，也不影响布局
z-index:-9999 : 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
transform: scale(0,0) : 平⾯变换，将元素缩放为0，但是依然占据空间，但不可交互；
7.positon属性有哪些？
答：
static: 正常⽂档流定位，此时 top, right, bottom, left 和 z-index 属性⽆效，块级元素从上往下纵向排布，⾏级元素 从左向右排列。
relative：相对定位，此时的『相对』是相对于正常⽂档流的位置。
absolute：相对于最近的⾮ static 定位祖先元素的偏移，来确定元素位置，⽐如⼀个绝对定位元素它的⽗级、和祖 ⽗级元素都为relative，它会相对他的⽗级⽽产⽣偏移。
fixed：指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如那 种回到顶部的按钮⼀般都是⽤此定位⽅式。
sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应⽤中的近似效果就是IOS通讯录滚动的时候的 『顶屁股』。
8.JavaScript数据类型有哪些？
答：
JavaScript一共有8种数据类型，其中有7种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值）和BigInt（es10新增）；
1种引用数据类型——Object（Object本质上是由一组无序的名值对组成的）。里面包含 function、Array、Date等。JavaScript不支持任何创建自定义类型的机制，而所有值最终都将是上述 8 种数据类型之一。
原始数据类型：直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。
引用数据类型：同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
9.JS中数据类型的判断
答：typeof，instanceof，constructor，Object.prototype.toString.call()
10.undefined和null区别？
答：
首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。
undefined 代表的含义是未定义，
null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。
当我们对两种类型使用 typeof 进行判断的时候，Null 类型化会返回 “object”，这是一个历史遗留的问题。当我们使用双等号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false。
11.对this的理解
答：
普通函数中：指向window
事件函数中：指向事件源
构造函数中：指向实例对象
具体对象中：指向当前对象
箭头函数：指向定义时上下文所在的对象，而不是使用时的
12.什么是闭包？
指有权访问另一个函数作用域内变量的函数；
主要是为了解决全局变量污染和局部变量不可重用的问题；
13.原型链的理解？
答：
当从一个对象那里调取属性或方法时，如果该对象自身不存在这样的属性或 者方法，就会去关联的prototype那里寻找。如果prototype没有，就会去prototype关联的前辈prototype那里寻找，如果没有，依次向上寻找。依次类推，知道prototype…prototype为undefined。从而形成了所谓的“原型链”；
14.var、let、const的区别？
答：
（1）var声明变量存在变量提升，let和const不存在变量提升:
（2）let和const声明形成块作用域；
（3）同一作用域下let和const不能声明同名变量，而var可以；
15.Ajax
答：
我对 ajax 的理解是，它是一种异步通信的方法，通过 js 脚本向服务器发起 http 通信，然后根据服务器返回的数据，更新网页的相应部分，而不用刷新整个页面的一种方法。
16.面向对象的理解
答：
在我理解,面向对象是向现实世界模型的自然延伸，这是一种“万物皆对象”的编程思想。在现实生活中的任何物体都可以归为一类事物，而每一个个体都是一类事物的实例。面向对象的编程是以对象为中心，以消息为驱动，所以程序=对象+消息。
面向对象有三大特性，封装、继承和多态。
（1）封装就是将一类事物的属性和行为抽象成一个类，使其属性私有化，行为公开化，提高了数据的隐秘性的同时，使代码模块化。这样做使得代码的复用性更高。
（2）继承则是进一步将一类事物共有的属性和行为抽象成一个父类，而每一个子类是一个特殊的父类–有父类的行为和属性，也有自己特有的行为和属性。这样做扩展了已存在的代码块，进一步提高了代码的复用性。
（3）多态的一大作用就是为了解耦–为了解除父子类继承的耦合度。很多的设计模式都是基于面向对象的多态性设计的。
17.HTTP状态码有哪些？
答：
2XX 成功
200 OK，表示从客户端发来的请求在服务器端被正确处理 201 Created 请求已经被实现，⽽且有⼀个新的资源已经依据请求的需要⽽建⽴
202 Accepted 请求已接受，但是还没执⾏，不保证完成请求 204 No content，表示请求成功，但响应报⽂不含实体的主体部分
206 Partial Content，进⾏范围请求
3XX 重定向
301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL 303 see other，表示资源存在着另⼀个 URL，应使⽤ GET ⽅法丁⾹获取资源
304 not modified，表示服务器允许访问资源，但因发⽣请求未满⾜条件的情况
307 temporary redirect，临时重定向，和302含义相同
4XX 客户端错误
400 bad request，请求报⽂存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源
408 Request timeout, 客户端请求超时
409 Confict, 请求的资源可能引起冲突
5XX 服务器错误
500 internal sever error，表示服务器端在执⾏请求时发⽣了错误
501 Not Implemented 请求超出服务器能⼒范围，例如服务器不⽀持当前请求所需要的某个功能，或者请求是服务 器不⽀持的某个⽅法
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，⽆法处理请求
505 http version not supported 服务器不⽀持，或者拒绝⽀持在请求中使⽤的 HTTP 版本