【前端】面试题6~10

一、说一说BFC

1、BFC的概念

2、BFC布局规则

3、BFC形成的条件

3、BFC解决能的问题

4、BFC的其他

5、总结

二、说一说Vuex是什么，每个属性是干嘛的，如何使用？

1、Vuex是什么

2、Vuex 的属性

3、使用方法

4、简单总结

三、说一说JavaScript有几种方法判断变量的类型？

四、说一说样式优先级的规则是什么？

1、样式优先级的规则

2、使用!important要谨慎

3、总结

五、说一说JS实现异步的方法？

一、说一说BFC

1、BFC的概念

BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

2、BFC布局规则

内部盒子会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

3、BFC形成的条件

float 设置成 left 或 right
position 是absolute或者fixed
overflow不是visible，为 auto、scroll、hidden
display是flex或者inline-block等

3、BFC解决能的问题

清除浮动

4、BFC的其他

BFC的方式都能清除浮动，但是常使用的清除浮动的BFC方式只有overflow:hidden,原因是使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。如果设置父级为display:flex，内部的浮动就会失效。所以通常只是用overflow: hidden清除浮动。
IFC（Inline formatting contexts）：内联格式上下文。IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。
GFC（GrideLayout formatting contexts）：网格布局格式化上下文。当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。
FFC（Flex formatting contexts）：自适应格式上下文。display值为flex或者inline-flex的元素将会生成自适应容器。

5、简单总结

1.定义：块级格式化上下文，独立渲染区域，不会影响边界外的元素

2.形成条件

        a.float

        b.position

        c.overflow

        d.display

3. 布局规则：

        a.区域内box从上到下排列

        b.垂直方向由margin决定

        c.同一bfc内box会外边距重叠

        d.bfc不会与float重叠

        e.bfc计算高度，也会计算float元素

4.解决问题

        a.清除浮动

        b.外边距重叠

        c.高度塌陷

级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display块

二、说一说Vuex是什么，每个属性是干嘛的，如何使用？

1、Vuex是什么

Vuex是集中管理项目公共数据的。

2、Vuex 的属性

有state、mutations 、getters、actions、module五种属性

state属性用来存储公共管理的数据。
mutations属性定义改变state中数据的方法，注意：不要在mutation中的方法中写异步方法ajax，那样数据就不可跟踪了。
getters属性可以认为是定义store的计算属性。就像计算属性一样，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
action属性类似于mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。
moudle属性是将store分割成模块。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块，从上至下进行同样方式的分割

3、使用方法

state ：直接以对象方式添加属性
mutations ：通过store.commit调用
action：通过 store.dispatch`方法触发
getters：直接通过store.getters.调用加分回答可以使用mapState、mapMutations、mapAction、mapGetters一次性获取每个属性下对应的多个方法。

VueX在大型项目中比较常用，非关系组件传递数据比较方便。

4、简单总结

1. 概念：Vuex是全局状态管理仓库，相当于window对象挂载了一个全局变量。

2. 属性：state（数据源）、actions（处理异步事件）、mutations（处理同步事件）、getters(过滤数据)和modules（模块）

三、说一说JavaScript有几种方法判断变量的类型？

JavaScript有4种方法判断变量的类型，分别是typeof、instanceof、Object.prototype.toString.call()（对象原型链判断方法）、 constructor (用于引用数据类型)
typeof：常用于判断基本数据类型，对于引用数据类型除了function返回function，其余全部返回object。
instanceof：主要用于区分引用数据类型，检测方法是检测的类型在当前实例的原型链上，用其检测出来的结果都是true，不太适合用于简单数据类型的检测，检测过程繁琐且对于简单数据类型中的undefined, null, symbol检测不出来。
constructor：用于检测引用数据类型，检测方法是获取实例的构造函数判断和某个类是否相同，如果相同就说明该数据是符合那个数据类型的，这种方法不会把原型链上的其他类也加入进来，避免了原型链的干扰。
Object.prototype.toString.call()：适用于所有类型的判断检测，检测方法是Object.prototype.toString.call(数据) 返回的是该数据类型的字符串。这四种判断数据类型的方法中，各种数据类型都能检测且检测精准的就是Object.prototype.toString.call()这种方法。
instanceof的实现原理：验证当前类的原型prototype是否会出现在实例的原型链__proto__上，只要在它的原型链上，则结果都为true。因此，instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，找到返回true，未找到返回false。
Object.prototype.toString.call()原理：Object.prototype.toString 表示一个返回对象类型的字符串，call()方法可以改变this的指向，那么把Object.prototype.toString()方法指向不同的数据类型上面，返回不同的结果

简单总结：

1. typeof（根据二进制判断）,不能判断数据类型：null和object
2. intanceof(根据原型链判断),基本数据类型不能判断
3. constructor.name(根据构造器判断)，不能判断null数据类型
4. Object.prototype.toString.call()（用Object的toString方法判断）所有类型数据都能判断,记住判断结果打印为：'[object Xxx]'

四、说一说样式优先级的规则是什么？

1、样式优先级的规则

标准回答 CSS样式的优先级应该分成四大类

第一类 !important，无论引入方式是什么，选择器是什么，它的优先级都是最高的。
第二类引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。
第三类选择器，选择器优先级：id选择器>（类选择器 | 伪类选择器 | 属性选择器）> （后代选择器 | 伪元素选择器）> （子选择器 | 相邻选择器） > 通配符选择器。
第四类继承样式，是所有样式中优先级比较低的。
第五类浏览器默认样式优先级最低。

2、使用!important要谨慎

一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用!important
永远不要在全站范围的 CSS 代码中使用 !important优先级的比较指的是相同的样式属性，不同样式属性优先级比较失效，比如：在设置max-width时注意，已经给元素的max-width设置了!important但是还不生效，很有可能就是被width覆盖了

代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {max-width: 400px !important;height: 200px;background-color: tomato;width: 200px;}</style>
</head>
<body><div></div>
</body>
</html>

3、简单总结

!important、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符、继承样式
!important > 内联样式（style） > ID选择器（id） > 类选择器(class) > 标签选择器

五、说一说JS实现异步的方法？

所有异步任务都是在同步任务执行结束之后，从任务队列中依次取出执行。、
回调函数

回调函数是异步操作最基本的方法，比如AJAX回调
回调函数的优点是简单、容易理解和实现
缺点是不利于代码的阅读和维护，各个部分之间高度耦合，使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套的情况），而且每个任务只能指定一个回调函数。
回调函数不能使用 try catch 捕获错误，不能直接 return Promise包装了一个异步调用并生成一个Promise实例，当异步调用返回的时候根据调用的结果分别调用实例化时传入的resolve 和 reject方法，then接收到对应的数据，做出相应的处理。
Promise

Promise不仅能够捕获错误，而且也很好地解决了回调地狱的问题
缺点是无法取消 Promise，错误需要通过回调函数捕获。
Generator(生成器）

Generator函数是 ES6 提供的一种异步编程解决方案
Generator 函数是一个状态机，封装了多个内部状态，可暂停函数, yield可暂停，next方法可启动，每次返回的是yield后的表达式结果。
优点是异步语义清晰，
缺点是手动迭代`Generator` 函数很麻烦，实现逻辑有点绕 async/await是基于Promise实现的
async/await

async/await使得异步代码看起来像同步代码
优点是，使用方法清晰明了
缺点是await将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了await会导致性能上的降低，代码没有依赖性的话，完全可以使用 Promise.all 的方式
async/await函数是对Generator函数的改进

内置执行器。 Generator 函数的执行必须靠执行器，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。
更广的适用性。 yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
更好的语义。 async 和 awt，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，awt 表示紧跟在后面的表达式需要等待结果。目前使用很广泛的就是promise和async/await
JS异步编程进化史：callback ---> promise ---> generator/yield ---> async/await。

总结

1. 回调函数

2. promise

2. setTimeout/setImmediate

3. async/await

4. generator/yield

异步微任务：回调函数，promise， async/await

异步宏任务：setTimeout setIntervial

【前端】面试题6~10