前端面试（二）

1、问：js的数据类型　　答：原始值有undefined, boolean, string, number, symbol 引用值有object，function

2、问：React当中 this.props 更改属性会报错，但是将 this.props 赋值给另外一个变量，更改该变量不会报错，为什么？　　答：不知道（之前真的没了解过这个问题TT...

事后补充：组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。（还是没明白面试官的问题...

3、问：js当中的宏任务和微任务　　答：宏任务是setTimeout、setInterval，微任务是promise，事件处理这些（之前没有具体了解过这个概念T T, 面试官表示我说错了）

事后补充：

以下是宏任务1

1) 执行同步语句...

2) 遇到setTimeOut，放到异步任务(宏任务2）

3) 遇到new promise，执行promise的内容也就是resolve，但它的then是微任务，所以丢到微任务栈

4) 执行同步语句...

5) 到这里第一遍宏任务执行完了，继续执行剩下的所有微任务，then, 执行完之后开始检查渲染，然后GUI线程接管渲染

6) 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取，也就是seTimeOut ...）

简单来说就是执行一个宏任务，然后扫完该宏任务产生的微任务，把产生的宏任务放到下次循环，依此类推

资料来源：https://zhuanlan.zhihu.com/p/78113300

 

4、问：你知道事件冒泡吗？怎么阻止事件冒泡呢？　　答：事件冒泡就是譬如说页面有一个按钮，当点击这个按钮，则click事件会从按钮一直冒泡到父组件和祖先组件当中，事件冒泡当中一个preventPropogate属性可以阻止冒泡，具体我忘了 （看过就忘T T

事后补充：stopPropagation() 方法用于立即阻止事件流在 DOM 结构中传播，取消后续的事件捕获或冒泡。例如，直接添加到按钮的事件处理程序中调用stopPropagation(), 可以阻止document.body上注册的事件处理程序执行。

 

5、问：说一下你对axios 的了解 　　答：axios 可以异步请求后台，axios的函数调用是一个promise，可以通过后续处理程序处理response （不确定面试官问的是 axios还是 ajax，电话面试有时候不太能听清面试官的问题T T...)

6、问：通过axios 在不同的组件中怎么发送同样的内容给后台　　答：cookie可以在请求头部添加同样的内容发送给后台，但是axios 我不清楚，只知道它的基本用法（事后想想，也许我可以回答先存储字段一个公共模块当中，需要的人/组件就引入读取和使用...唉~）

事后补充：（学习中...难道是利用interceptor ？

 

7、问：promise, async  await 是怎样实现同步的　　答：我只知道await 有一个等待的机制，我只知道用法，具体底层原理没有了解过（T T, 事后反应过来了，感觉应该答，当程序执行到await 的时候会将当前函数执行放到任务队列当中，当promise resolve或者reject之后，await取到值之后才会重新进入执行状态。之前看过这个过程的TT)

事后补充：await 关键字暂停执行，并向消息队列中添加一个任务，当同步任务执行完之后，从消息队列中取出await的任务继续执行。

 

8、问：怎么实现一个按钮从一个地方拖拽到另一个地方　　答：DOM 原生有一个组件拖拽功能，具体实现我忘了（ T T...

事后补充：HTML5 规范中标准化了拖放功能，关于拖放最有意思的可能就是可以跨窗格、跨浏览器容器、有时候甚至可以跨应用程序拖动元素。浏览器对拖放的支持可以让我们实现这些功能。

1）在某个元素被拖放时，会（按顺序）触发以下事件：

dragstart

drag

dragend

2）在把元素拖动到一个有效的放置目标上时，会依次触发以下事件：

dragenter

dragover

dragleave 或 drop

3）通过event.preventDefault() 覆盖 dragenter 和 dragover 事件的默认行为，可以把任何元素转换为有效的放置目标。

4）HTML5 在所有HTML元素上规定了一个dragable属性，表示元素是否可以拖动，默认图片和链接的dragable=true, 其他元素的dragable=false;

5）dataTransfer对象用于从被拖动元素向放置目标传递字符串参数

 

9、问：flex 怎么实现一个子组件是本身的大小，另外两个子组件收缩　　答：flex有收缩，扩张，和开始的基本大小，三个属性，具体我忘了（没办法，看了就忘 T T...

事后补充：

.first-child { flex-basis: auto, width: xxx, height: xxx } auto的意思是这个项目可以从对应的属性（width和height）那里获得主尺寸——如果设置了相应属性的话。如果没有设置主尺寸，那么该项目就根据其内容确定大小。

.other-child { flex: 1 0 0% } flex这个简写属性一次性设置 flex-grow, flex-shrink, flex-basis 属性。 

 

10、问：css 当中 position：absolute 和 relative的区别　　答：当标签设置为relative 的时候，该标签仍然是在文档流当中，如果设置定位left, right, top, bottom则是相对于该标签原本的位置进行偏移的；当标签设置为absolute 的时候，该标签脱离文档流，如果设置定位left, right, top, bottom则该标签是相对于非静态定位的父组件进行偏移的。

 

（之后面试官就没有问其他问题了，我感觉他已经放弃我了T T，不想再浪费时间...败！