2019前端面试题（持续更新）

woshicixide 发布于2019-08-30 15:56 / 2305人阅读

摘要：是什么是异步编程的一种解决方案所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件通常是一个异步操作的结果。

最近也在准备换工作了，然后收集了一些我觉得今年面试会遇到常见的问题。

如果有机会，记得也帮忙分享我一下。
2019的行情确实很糟糕。看到这么多人收藏点赞。我的内心也是哇凉哇凉的。
我也给一些除了面试题之外的经验吧

我相信不景气也是相对的，提升自我也是必要的。我说说我最近在准备些什么。

首先优化自己的博客。有技术博客的求职者，必定会给面试官筛选简历时一个很好的印象

针对你想求职的企业规模，乘着这段时间，深入的了解一些源码。如中型企业大多都偏爱vue。我最近也在研究其中的源码。

更高bigger的，可以在研究框架源码中，得出一些经验，写一套自己框架。目前我也正在准备。

还有自己的npm的组件包。

1，讲讲浅拷贝、深拷贝之间的区别

核心：引用类型和非引用类型的拷贝结果是不同的

浅拷贝只是拷贝基本类型的数据，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，因此存在父对象被篡改的可能，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存

//简单的浅拷贝
var a = 1;
var b = a;//赋值
console.log(b) //1
a = 2;//改变a的值
console.log(b) //1

如果要实现深拷贝，用什么方法来实现

JSON.parse() + JSON.stringify()（缺点：只能处理可以被枚举的属性）；
for in 循环递归遍历；

深拷贝就是能够实现真正意义上的数组和对象的拷贝。递归调用"浅拷贝"。（深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象）

如果你想要实现支持setter和getter特性的拷贝，该怎么实现？

Object.defineproperties （定义属性）、Object.getOwnPropertyDescriptors（es2017，获取对象的多个属性）、Object.getOwnPropertyDescriptor（老一点，获取对象的单个属性的属性），但babel可以解决。

2、原型链的prototype和__proto__的区别；

prototype 在 new 示例后会被转为 __proto__

__proto__是非标准化的；

所有东西的原型链向上延伸到原型链的顶端，是什么；

Object.prototype.__proto__，结果是null.

Function本身就是函数，
Function.__proto__
是标准的内置对象Function.prototype，
Function.prototype.__proto__
是标准的内置对象Object.prototype

3、如果想实现继承，说几种你知道的方法？

原型链继承、构造继承、实例继承、拷贝继承、组合继承、寄生组合继承

原型链继承

3、var、let、const的区别；

var 会变量提升；

let 声明的变量只在它所在的代码块有效；

const 声明后不能再修改其指向的目标，假如const 指向的是一个对象/数组，那么虽然不能更改指向目标，但是可以更改对象和数组内部的值；

进阶一：说到变量提升，class 声明一个类时，存在变量提升么？为什么？

不存在。因为要方便类的继承，先声明子类再声明父类；

进阶二：const 声明一个对象，如何让对象内部的属性的值也无法改变？

使用Object.freeze()锁死（es5新增特性）；

对数组等引用类型的值，还是能修改的；

进阶三：全局作用域？函数作用域？块级作用域？作用域链？

js有哪些基本数据类型？

Boolean、Null、Undefined、Number、String、Object；

Symbol（es6新增）

进阶：es6新增的原型数据类型Symbol，特点是什么；

表示独一无二的值；

声明时不能使用new Symbol()，而是 Symbol()；

声明时可以加参数，用于描述；

作为key时不能被遍历；

进阶2：如何声明两个相等的Symbol变量？

使用Symbol.for，参数相同时；

let a = Symbol.for("a");
let b = Symbol.for("a");
a === b; // true

#### Promise是什么？

* 是异步编程的一种解决方案；
* 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

一般什么时候使用？

* 处理异步请求时使用，比如ajax请求；

有哪些状态？

* 状态有pending、resolved、rejected；

怎么捕获他的错误？

* 最后写catch；
* then里面第二个参数可以捕获；

如果内部抛错，但是没有被捕获，这个没被捕获的错误接下来会发生什么事情？

* 冒泡；

能不能被try catch捕获？为什么？

* 不能，因为是异步编程。

能不能被window.onerror捕获？

* 不能

new Promise((resolve,reject)=>throw new Error("a")).then(fn1).then(fn2,fn3).catch(fn4) 这个函数，会执行哪些函数
* fn3，没了

4,从输入URL到浏览器显示页面发生了什么。（特别注意）

这题可以了解一下，尽管面试时候造飞船，真的干活可能还是拧螺丝。

1.在浏览器中输入url（解析IP地址）

2.应用层DNS解析域名

3.应用层客户端发送HTTP请求

4.传输层TCP传输报文(3次握手)

5.网络层IP协议查询MAC地址

6.数据到达数据链路层

7.服务器接收数据

8.服务器响应请求

9.服务器返回相应文件

二、页面渲染：现代浏览器渲染页面的过程是这样的：解析HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

在浏览器还没接收到完整的HTML文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

5、async、await 的使用场景是什么？

连续的异步请求，下一步的异步请求依赖于前一步的异步请求结果；
进阶一：假如有A、B、C三个异步请求，异步请求C依赖于异步请求A和B的结果（即A和B完成后再发起C），那么你会如何实现它？

Promise.all()；
设置状态分别标记A和B，A、B完成后会去修改自己的完成标记，然后检查所有的状态标记，假如都是完成状态，然后去执行异步请求C。

6、Promise是什么？

是异步编程的一种解决方案；
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
一般什么时候使用？

处理异步请求时使用，比如ajax请求；
有哪些状态？

状态有pending、resolved、rejected；
怎么捕获他的错误？

最后写catch；
then里面第二个参数可以捕获；
如果内部抛错，但是没有被捕获，这个没被捕获的错误接下来会发生什么事情？

冒泡；
能不能被try catch捕获？为什么？

不能，因为是异步编程。
能不能被window.onerror捕获？

不能
new Promise((resolve,reject)=>throw new Error("a")).then(fn1).then(fn2,fn3).catch(fn4) 这个函数，会执行哪些函数 * fn3，没了

7、数字计算：请问在js中，输入表达式 0.1 + 0.2 的结果是什么？

0.30000000000000004（能回答出来不是0.3，而是0.3后有若干个0和一个数字即可）

进阶一：为什么？

原因是浮点数和整数，在存储时的方法是不同的，因此相加的规则也是不同的；

进阶二：浮点数是怎么存储的（本问题比较难）（可以跳到进阶三，比本题简单）

而double类型就是双精度浮点数，这种指使用64位（8字节）来存储一个浮点数。

根据规定，这64位bit里，分为三部分：

第一部分(1bit)：

符号位，表示正负，正数为0，负数为1。

第二部分(11bit)：

阶码位，也可以称为指数位。

第三部分（52bit)

尾数位，即表示实际数字的。

假如正负符号的值为S，正数S为1，负数S为-1；
假如指数位表示的值为E（计算后），指数位表示的值为2的E次方；
假如尾数位表示的值为M，尾数位表示的值为M；

根据科学表示法，任何一个范围内的浮点数可以通过以下方法来表示：（别问我为啥，我没去谷歌……）

浮点数 = S * Math.pow(2,E) * M;

进阶三：我们在实际开发中，如果遇见了这种浮点数计算的情况，怎么处理比较合适？

8、移动端开发的时候，一般怎么实现自适应？

rem

vw和vh

媒体查询（bootstrap）；

进阶一：他们的特点分别是什么？或者说实现原理是什么？

rem 根据 html 的 font-size；

vw是浏览器窗口宽度，vh是高度；

媒体查询是根据浏览器窗口宽度或高度，进行响应式选择显示哪个css；

进阶二：弹出输入框会发生定位错误，fixed布局，怎么解决？

9、在我们将开发好的页面，进入线上环境的时候，肯定要最大化性能优化，那么我们常见的做法有哪些？

https://csspod.com/frontend-performance-best-practices/

gzip、雪碧图、减少http请求数、减少DNS请求、避免重定向、缓存ajax请求、延迟加载、预加载、减少DOM数、使用框架例如React的虚拟DOM树、减少DOM操作、使用CDN、减少 css 里 @import 写法、

10、图片使用雪碧图和 base64字符串你觉得哪个好？为什么？

雪碧图可以缓存；

base64可以减少请求数；

进阶一：如果你决定使用雪碧图/base64字符串，你会怎么做？

webpack 配 url-loader（base64）；

webpack 的雪碧图插件 webpack-spritesmith；

云服务器服务器托管面试题栈面试题笔试面试题面试题内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117481.html

2019前端面试题（持续更新）

摘要：是什么是异步编程的一种解决方案所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件通常是一个异步操作的结果。最近也在准备换工作了，然后收集了一些我觉得今年面试会遇到常见的问题。如果有机会，记得也帮忙分享我一下。2019的行情确实很糟糕。看到这么多人收藏点赞。我的内心也是哇凉哇凉的。我也给一些除了面试题之外的经验吧我相信不景气也是相对的，提升自我也是必要的。我说说我最近在准...

worldligang 2019-08-02 14:26 评论0 收藏0
2019前端面试题（持续更新）

摘要：是什么是异步编程的一种解决方案所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件通常是一个异步操作的结果。最近也在准备换工作了，然后收集了一些我觉得今年面试会遇到常见的问题。如果有机会，记得也帮忙分享我一下。2019的行情确实很糟糕。看到这么多人收藏点赞。我的内心也是哇凉哇凉的。我也给一些除了面试题之外的经验吧我相信不景气也是相对的，提升自我也是必要的。我说说我最近在准...

K_B_Z 2019-08-26 13:32 评论0 收藏0
2019前端面试题（持续更新）

摘要：是什么是异步编程的一种解决方案所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件通常是一个异步操作的结果。最近也在准备换工作了，然后收集了一些我觉得今年面试会遇到常见的问题。如果有机会，记得也帮忙分享我一下。2019的行情确实很糟糕。看到这么多人收藏点赞。我的内心也是哇凉哇凉的。我也给一些除了面试题之外的经验吧我相信不景气也是相对的，提升自我也是必要的。我说说我最近在准...

Little_XM 2019-08-05 18:12 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
LeetCode 攻略 - 2019 年 8 月上半月汇总（109 题攻略）

摘要：每天会折腾一道及以上题目，并将其解题思路记录成文章，发布到和微信公众号上。三汇总返回目录在月日月日这半个月中，做了汇总了数组知识点。或者拉到本文最下面，添加的微信等会根据题解以及留言内容，进行补充，并添加上提供题解的小伙伴的昵称和地址。 LeetCode 汇总 - 2019/08/15 Create by jsliang on 2019-08-12 19:39:34 Recently...

tracy 2019-08-26 10:49 评论0 收藏0