牛客前端八股文(每日更新)

1.说说HTML语义化？

得分点：语义化标签、利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读

1，标签语义化是指在开发时尽可能使用有语义的标签，比如header，footer，h，p，少使用无语义如div。

2，标签语义化的好处有三点，首先对开发者来说，能够提高代码可读性，利于前期开发以及后期维护；对于用户来说，在样式表没有加载出来时，整个页面结构依旧清晰，给用户一个不错的体验感；对搜索引擎来说，利于爬虫读取有用的信息，提升网页排名。

3，目前语义化并没有得到广泛应用，如京东，淘宝官网依旧采用大量无语义标签。原因是语义化带来的好处不足以其耗费人力物力去重写网站。

2.说说盒模型？

得分点 标准盒模型、怪异盒模型、`box-sizing:border-box`、盒模型大小

1，CSS盒模型本质是一个盒子，包含 padding、border、margin、content。盒模型分为两类，W3C标准盒模型和IE怪异盒模型，一般我们的盒子默认是标准盒模型。

2，两者区别是标准盒模型的实际宽高会把padding和border计算在内，而怪异盒模型不会。

3，形成怪异盒模型的条件是box-sizing:border-box；形成标准盒模型的条件box-sizing:content-box。

3.说一下浮动？

得分点 脱离文档流、盒子塌陷、 影响其他元素排版、伪元素 、`overflow:hidden` 、标签插入法

1. 浮动的作用：设置浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。

2. 浮动特点： 脱离文档流，盒子塌陷，影响其他元素排版

3. 解决塌陷：
（1）额外标签法（隔墙法）：在最后一个浮动标签后添加一个标签，给其设置clear:both，如果清除了浮动父元素自动检测盒子最高的高度，然后与其同高。

（2）父元素添加overflow属性，overflow: hidden。

（3）父级添加after伪元素（推荐做法）。

（4）父级添加before和after双伪元素。 

4. 清除浮动的特点：

4. 样式优先级的规则是什么？

得分点 `!important`、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符、继承样式

1.!important、 2.行内样式>（嵌入样式、外链样式）、 3.id选择器（#id{}） >（类选择器（.class{}）、伪类选择器（ :hover{}）、属性选择器（a[href="segmentfault.com"]{}））>（后代选择器（.father .child{}）、伪元素选择器（ ::before{}））>（子选择器（.father > .child{}）、相邻选择器（ .bro1 + .bro2{}））>通配符选择器（*{}）、 4.继承样式、 5.浏览器默认样式 

5. 说一说CSS尺寸设置的单位？

得分点 px、rem、em、vw、vh

（1）css一共有五个长度单位，分别是px，em，rem，vw，vh

（2）除了px是绝对单位，其他都是相对单位。

（3）em相对于自身大小（但在font-size中相对于父元素字体大小）

（4）rem相对于根元素的字体大小

（5）vw相对于可视化窗口的宽（1vw就是1%可视化窗口宽度）

（6）vh相对于可视化窗口的高（1vh就是1%可视化窗口高度）

（7）一般采用rem+媒体查询或者rem+vw来实现响应式布局。原理是当窗口大小发生变化时，通过媒体查询或者vw改变根元素的字体大小，从而改变以rem为单位的元素大小

6.说一说BFC

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

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

2.形成条件：

(1) float属性不为none

(2) position为absolute或fixed

(3) display为inline-block、table-cell、table-caption、flex、inline-flex

(4) overflow不为visible

3.布局规则：

(1) 区域内容box从上到下排列

(2) box垂直方向的距离由margin决定

(3) 同一个BFC内 box的margin会重叠

(4) BFC不会与float元素重叠

(5) BFC计算高度也会计算float元素

4.解决的问题：

(1) 解决浮动元素重叠问题

(2) 解决父元素高度塌陷问题

(3) 解决margin重叠问题

7.说几个未知宽高元素水平垂直居中方法

得分点:`position` `transform` `flex` `justify-content` `align-items` `vertical-align` `text-align`

1. 设置元素相对父级定位`position:absolute;left:50%;top:50%`，让自身平移自身高度50% `transform: translate(-50%,-50%);`，这种方式兼容性好，被广泛使用的一种方式

2. 设置元素的父级为弹性盒子`display:flex`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ，这种方式代码简洁，但是兼容性ie 11以上支持

3. 设置元素的父级为网格元素`display: grid`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ，这种方式代码简介，但是兼容性ie 10以上支持

4. 设置元素的父级为表格元素`display: table-cell`，其内部元素水平垂直都居中`text-align: center;vertical-align: middle;` ，设置子元素为行内块`display: inline-block; `，这种方式兼容性较好

8.说一说三栏布局的实现方案

得分点 圣杯布局、双飞翼布局、三栏高度不定、中间栏内容多先渲染

概念：三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。 这里以左边宽度固定为100px，右边宽度固定为200px为例。

实现方案：

（1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

（2）利用flex布局的方式，左右两栏的宽度分别设置为100px和200px，中间一栏增长系数设置为1

（3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。

（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。圣杯布局中间列的宽度不能小于左边列的宽度，否则左边列上不去，而双飞翼布局则不存在这个问题。

（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

9.说一说JS数据类型有哪些,区别是什么？

得分点：Number、String、Boolean、BigInt、Symbol、Null、Undefined、Object、8种

1. JS数据类型分为两类：一类是基本数据类型，也叫简单数据类型，包含7种类型，分别是Number 、String、Boolean、BigInt、Symbol、Null、Undefined。另一类是引用数据类型也叫复杂数据类型，通常用Object代表，普通对象，数组，正则，日期，Math数学函数都属于Object。

2. 数据分成两大类的本质区别：基本数据类型和引用数据类型它们在内存中的存储方式不同。
基本数据类型是直接存储在栈中的简单数据段，占据空间小，属于被频繁使用的数据。
引用数据类型是存储在堆内存中，占据空间大。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，当解释器寻找引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。

3. Symbol是ES6新出的一种数据类型，这种数据类型的特点就是没有重复的数据，可以作为object的key。数据的创建方法Symbol()，因为它的构造函数不够完整，所以不能使用new Symbol()创建数据。由于Symbol()创建数据具有唯一性，所以 Symbol() !== Symbol(), 同时使用Symbol数据作为key不能使用for获取到这个key，需要使用Object.getOwnPropertySymbols(obj)获得这个obj对象中key类型是Symbol的key值。

4. BigInt也是ES6新出的一种数据类型，这种数据类型的特点就是数据涵盖的范围大，能够解决超出普通数据类型范围报错的问题。注意：BigInt和Number之间不能进行混合操作

10. 说一说null 和 undefined 的区别，如何让一个属性变为null

得分点：操作的变量没有被赋值、全局对象的一个属性、函数没有return返回值、值 `null` 特指对象的值未设置 undefined == null、undefined !== null

undefind 是全局对象的一个属性，当一个变量没有被赋值或者一个函数没有返回值或者某个对象不存在某个属性却去访问或者函数定义了形参但没有传递实参，这时候都是undefined。undefined通过typeof判断类型是'undefined'。undefined == undefined undefined === undefined 。

null代表对象的值未设置，相当于一个对象没有设置指针地址就是null。null通过typeof判断类型是'object'。null === null null == null null == undefined null !== undefined undefined 表示一个变量初始状态值，而 null 则表示一个变量被人为的设置为空对象，而不是原始状态。

在实际使用过程中，不需要对一个变量显式的赋值 undefined，当需要释放一个对象时，直接赋值为 null 即可。 让一个变量为null，直接给该变量赋值为null即可。

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

得分点 typeof、instanceof、Object.prototype.toString.call()（对象原型链判断方法）、 constructor (用于引用数据类型)

1. typeof（根据二进制判断）,不能判断的数据类型：null和object

2. intanceof(根据原型链判断),原生数据类型不能判断

3. constructor.name(根据构造器判断)，不能判断null数据类型

4. Object.prototype.toString.call()（用Object的toString方法判断）所有类型数据都能判断,记住判断结果打印为：'[object Xxx]'

12.说一说数组去重都有哪些方法？

得分点：对象属性、new Set() 、indexOf、hasOwnProperty、reduce+includes、filter

1. 利用对象属性key排除重复项：遍历数组，每次判断对象中是否存在该属性，不存在就存储在新数组中，并且把数组元素作为key，设置一个值，存储在对象中，最后返回新数组。这个方法的优点是效率较高，缺点是占用了较多空间，使用的额外空间有一个查询对象和一个新的数组

2. 利用Set类型数据无重复项：new 一个 Set，参数为需要去重的数组，Set 会自动删除重复的元素，再将 Set 转为数组返回。这个方法的优点是效率更高，代码简单，思路清晰，缺点是可能会有兼容性问题

3. filter+indexof 去重：这个方法和第一种方法类似，利用 Array 自带的 filter 方法，返回 arr.indexOf(num) 等于 index 的num。原理就是 indexOf 会返回最先找到的数字的索引，假设数组是 [1, 1]，在对第二个1使用 indexOf 方法时，返回的是第一个1的索引0。这个方法的优点是可以在去重的时候插入对元素的操作，可拓展性强。

4. 从头遍历数组，如果元素在前面出现过，则将当前元素挪到最后面，继续遍历，直到遍历完所有元素，之后将那些被挪到后面的元素抛弃。这个方法因为是直接操作数组，占用内存较少。

5. reduce +includes去重：利用reduce遍历和传入一个空数组作为去重后的新数组，然后内部判断新数组中是否存在当前遍历的元素，不存在就插入到新数组中。这种方法时间消耗多，内存空间也有额外占用。

13. 说一说伪数组和数组的区别？

得分点：类型是object、不能使用数组方法、可以获取长度、可以使用for in遍历

1. 伪数组的特点：类型是object,不能使用数组方法，比如增删改，可以用for in遍历，可以获取长度，可以用下标获取对应元素.

2.伪数组转换为数组的方法Array.prototype.slice.call(),Array.from(),扩展运算符等等

3. 有哪些是伪数组?函数参数的arguments,获取的dom，Map和Set的keys,values,entries

14. 说一说map 和 forEach 的区别？

得分点: map创建新数组、map返回处理后的值、forEach()不修改原数组、forEach()方法返回undefined

1. map 有返回值，返回的是一个length和原数组一致的数组，即便数组元素是undefined或者是null. forEach没有返回值，返回的结果是undefined，可以通过函数内部索引修改元素。

2. map的处理速度比forEach快，返回一个新的数组，方便链式调用其他数组新方法。 
 

15. 说一说es6中箭头函数？

得分点:没有this、this是从外部获取、不能使用new、没有arguments、没有原型和super

1. 写法简洁

2. 无自己的this，其this是通过继承外部函数环境中的变量获取的，所以call、bind、apply都无法改变其this的指向

3. 箭头函数不能用于对象域和回调函数动态this中，一般用在内部没有this引用

4. 箭头函数没有arguments；也不能作为generator函数，不能使用yield命令

5. 箭头函数也没有原型和super。不能使用yield关键字，因此箭头函数不能用作 Generator 函数。