2019前端面试题(持续更新)

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

如果有机会,记得也帮忙分享我一下。

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://segmentfault.com/a/1190000018426354
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞