前端面试复盘

这两天面试了两家企业，海康威视和华资软件。在这总结一下。

先是海康威视的

还记得的问题如下：
1.讲一下盒子模型。
当时答的时候只答了盒子模型包括内容区、内边距、外边距、边框。但是面试官显然一个答案不止于此的表情，还在沉默等我继续说，但是我当时没反应过来还能说什么。面完反应过来应该是要讲传统盒子模型（W3C标准盒模型）和IE盒模型（CSS3盒模型）。
*作者疑惑：为什么CSS3盒子模型会和IE盒模型是一个东西。在我印象里CSS3是比较新的技术，而IE是很老的东西了，咋会挂上钩。在群里问了群友，找到了答案：
***因为CSS3盒子专门为了兼容IE浏览器的，所以又叫IE盒模型。IE盒模型和其他浏览器的盒子模型不同，所以在写页面时候不同浏览器上经常有兼容性问题，css3的出现就是为了更好的解决盒子模型带来的兼容性问题。但是css3很多不兼容IE9以下，所以现在前端基本抛弃了IE9以下的浏览器
感觉完善一点的答案应该是：
所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
盒子模型有两种：传统盒模型和IE盒模型。
两种盒子的区别：
传统盒模型：真正宽度 = width + padding + border
IE盒模型： 真正宽度 = width （border 和 padding 不会撑大盒子）
两种盒子模型的转换：用 box-sizing 属性控制。
box-sizing属性值有：content-box（默认值，设置为传统盒子）、border-box（设置为IE盒子）

2.说一下从输入URL到浏览器加载完成的过程。
这个题已经碰到几次了，但是都没彻底讲清楚。开始没有仔细思考过，现在仔细一想，这一个题目涵盖的知识点确实是非常多。其中涉及了DNS域名解析、TCP连接的建立（三次握手）和关闭（四次挥手）、HTTP协议（还有HTTPS协议）、浏览器解析渲染页面等等。
这题应该是有简单版和详细版答案的。
简单版：①输入URL后，浏览器把URL交给DNS服务器解析，获取到URL真正的IP地址。（也有可能是从DNS缓存里寻找）
②浏览器向这个IP地址发出建立TCP连接的请求，通过三次握手，建立起客户端与服务器之间的TCP连接。
③然后客户端发送HTTP请求到指定的端口（HTTP是80端口，HTTPS是443端口）。（HTTPS协议的话在把 HTTP报文包装成TCP报文前还需要进行加密）
④服务器接收到请求，进入与请求地址相匹配的路由处理函数进行处理。然后返回响应报文。
⑤浏览器接收到服务器响应的HTML、CSS、JS文件后，开始解析它们。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。
详细版的话中间的每一步的细节都可以讲一下。具体可参考下文：具体过程解释

3.说一下JS中常用的循环方法
之前面试也被问过一次，当时看了一下，没记住…这次再写一遍，加深印象。

①首先是最简单的for、while、do…while
②然后是for…in。这个主要用来遍历数普通对象的。虽然也可以遍历数组，当时用它得到的数组下标是字符串形式的，有时候很容易出错。当数组还有除了数组元素以外的其他可枚举属性时，用for…in遍历会把它们都遍历 出来，得到预料之外的结果。一般不用来遍历数组。
还有，for…in会遍历对象的原型链上的可枚举属性，效率性能很差。

var a = [1,2,3];
a.ex = "ex";
//注意这里遍历的只是属性
for(var i in a){
  console.log(i); // 0 1 2 ex
}

为了解决for…in的问题。ES6提出了for…of循环方式。for…of可以遍历数组，但无法遍历普通对象。以为for…of基于ES6de迭代器。对于类数组对象，可以先用Array.from(obj)转换成数组再遍历。(关于类数组对象详情：类数组对象详解)
for…in与for…of的区别是，for…in中i拿到的是键名。而for…of拿到的是对象（键值对）。
③然后是数组的遍历方法：forEach()，some()，every()
它们的参数都是一个函数，用来对数组的每一项进行操作
forEach()没有返回值，会遍历数组中的所有值并忽略回调函数的返回值。在forEach里break无效，一定会遍历完才退出循环。
some和every都是返回一个布尔值，some循环只要遍历到一个满足条件的值就终止循环，并返回true。every要遍历完所有元素都满足条件才返回true，如果遍历到不满足的元素，就终止循环，返回false。
④map()、filter()
参数都是接收一个函数，这两个方法都是返回一个数组，map是返回由原数组的每一个元素经过处理的组成的新数组，filter是返回由原数组中筛选出来的符合条件的元素组成的新数组。
⑤reduce（）和reduceRight（）。 reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。它们的差别是，reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

[1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15

reduce方法和reduceRight方法的第一个参数都是一个函数。该函数接受以下四个参数。

①、累积变量，默认为数组的第一个成员
②、当前变量，默认为数组的第二个成员
③、当前位置（从0开始）
④、原数组
这四个参数之中，只有前两个是必须的，后两个则是可选的。

4.讲一下display和visibility。
当时听到这个直接就答了display隐藏的元素会被彻底删除原来的空间，而visibility隐藏的空间依然占有原来的空间。现在想想，感觉答得也不够全面。
完整点的答案应该是：
display有none、block、inline等属性值。它控制元素隐藏时，该元素会占有的空间会被释放。它不但可以控制元素的现实与隐藏，还可以用来转换块级元素与行内元素。在CSS3中还有flex属性值，可以用来进行flex布局。
visibility有visible和hidden属性，分别用来控制元素的显示与隐藏，用它控制隐藏的元素会继续保留原本占有的空间。
注意：这两种隐藏方式都不会在DOM树上删除该元素节点。

5.说一下vue的computed和watch的区别。
面试的时候不知道是面试官发音不标准还是我听岔了，我当时听到的是confuted我想半天，没想到是啥。结果我说我不了解…面完后想到应该是computed，直接气吐血…
computed是叫计算属性。它是用来计算一些变量的。虽然模板的插值表达式里可以直接进行简单的计算，但是计算逻辑复杂一点的时候，会让模板显得很臃肿，为了让模板更简洁，把计算放在computed里面。computed存在缓存机制，只要计算结果的依赖不发生变化，它得到的结果就是从缓存中取到的，当依赖发生变化时，才会重新计算结果。这样有利于提高性能。
watch是侦听器。用来侦听数据的变化。当数据变化时，可以获取到它的新值和旧值。提供一个机会，让你能在某一变量变化时进行一些操作。它非常适合用来处理数据变化时执行异步或开销较大的操作。

6.截取字符串、截取数组。
substring、substr专门用于字符串截取，splice专门用于数组的截取，slice既可以截取字符串又可以截取数组。
一、截取字符串：substring、substr、slice
①substring：substring（start，end）
start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。
它的返回值是：一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。
注意：

• substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。
• 如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
• 如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。
• 如果 start 或 end 为负数，那么它将被替换为 0。

②substr：substr(start [, length ])
start 必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length 可选。在返回的子字符串中应包括的字符个数。（不选默认会截取到末尾为止）
返回值：返回一个从指定位置开始的指定长度的子字符串
注意：

• 如果start为负数，则start=str.length+start。
• 如果 length 为 0 或负数，将返回一个空字符串。
• 如果没有指定该参数，则子字符串将延续到stringObject的最后

③slice：slice(start,stop)
截取从下标start 到下标stop（不包括该元素）的之间的元素，并返回新数组/新字符串，并不修改原数组/原字符串。
注意：

• 如果 start比stop大（不会互换），或start与stop相等，则截取的为空，
• 如果 start或者stop为负数，那么负数的选项从数组尾部开始算起的位置，最后一个数字为-1，倒数第二个数字为-2，依次类推。

二、截取数组
①splice：splice(start,length,items)
返回截取到的新数组，并且会影响原来数组。
从下标start处截取length长度（与substr有点像）的元素后，在start处为原数组添加items，并返回被截取的新数组，splice会直接修改原数组。

    var arr = [0,1,2,3,4,5,6,7,8,9];
    console.log(arr.splice(1,3,2,3,4))//[1,2,3]
    console.log(arr);//[0,2,3,4,4,5,6,7,8,9] 原数组被截取走了1,2,3，并加入了2,3,4
复制代码

其中start和length为必填项，items为选填项，如果length为0或者负数，则返回空数组(这里与substr相似)，
如果start为负数，则原理和slice负数从右往左截取，最后一位数字为-1，倒数第二位为-2，依次类推。
②slic：与截取字符串相同。
原文详细讲解：字符串和数组的截取