面试题总结

总结牛客各位大佬的面试题，每每看完牛客大佬的面经笔经，就觉得自己肯定找不到工作了!^!。革命还未成功，战士仍需努力！
1、this理解
答：this表示当前对象，this的指向是根据上下文来决定的，默认指向window对象，指向window对象时可以省略不写，例如：
this.alert()<=>window.alert()<=>alert();
调用的上下文环境包括全局和局部
全局环境：全局环境就是在<script></script>里面，这里的this始终指向的是window对象。
局部环境：（1）在全局作用域下直接调用该函数，this指向window
（2）对象调用函数，哪个对象调用就指向哪个对象
（3）使用new实例化对象，在构造函数中的this指向实例化对象
（4）使用call或apply改变this的指向
2、apply、call、bind
答：(1)apply()、call()、bind()都是用来重定义this这个对象的。bind返回的是一个新的函数，必须调用它才会被执行。
(2)call、bind、apply这三个函数的第一个参数都是this的指向对象。
第二个参数差别出现：
call的参数是直接放进去的，第二第三第N个参数全都用逗号分隔，直接放到后面；
apply的所有参数都必须放在一个数组里面传进去；
bind除了返回是函数以外，它的参数和call一样。
3、http头部对get和post的区别（见参考资料[1]）
答：GET一般用于获取、查询资源信息，而POST一般用于更新资源信息。
原理上：
(1)根据HTTP规范，GET用于信息获取，而且应该是安全的和幂等的。
这里的安全是指该操作用于获取信息而非修改信息。
幂等意味着对同一URL的多个请求应该返回同样的结果。
(2)根据HTTP规范，POST表示可能修改服务器上的资源的请求。
表现上：
(1)GET请求的数据会附在URL之后，以？分割URL和传输数据，参数之间以&相连。注意：如果数据是空格，转换为+。
POST把提交的数据则放置在HTTP包的包体中。
(2)"GET方式提交的数据最多只能是1024字节"
理论上讲，POST是没有大小限制的，HTTP协议规范也没有进行大小限制。
`(3)POST的安全性要比GET的安全性高。
4、Object和Function
答：
5、箭头函数和一般函数的不同点
6、promise的使用场景（见参考资料[2][3]）
答：promise代表一个异步操作的执行返回状态，这个执行返回状态在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。zai Promise这个记述中它本身代表以目前还不能使用的对象，但可以在将来的某个时间点被调用。使用Promise我们可以用同步的方式写异步代码。
promise的用途：
Promise可以用来避免异步操作函数里的嵌套回调问题，因为解决异步最直接答方法是回调嵌套，将后一个的操作放在前一个操作的异步回调里。但如果操作多了，就会有很多层的嵌套。
7、event loop的使用场景
8、http响应头(见参考资料[4])
答：HTTP消息头包括HTTP请求头和响应头。HTTP消息头是指，在超文本传输协议的请求和响应消息中，协议头部分的那些组件。HTTP消息头用来准确描述正在获取的资源、服务器或者客户端的行为，定义了HTTP事务中的具体操作参数。
9、如何很好的利用node的高并发
10、对移动端H5的开发
11、https具体的传输过程（见参考资料[5]）
答：边打边理解
HTTPS数据传输过程：
(1)客户端发起HTTPS连接握手
(2)服务端收到HTTPS握手连接请求，与客户端建立握手过程，并发送一系列的加密算法组合给客户端，与客户端协商加密算法组合；
(3)客户端收到一系列的组合，从中选择一个自己能够支持的并且加密级别最高的加密算法组合，通告给服务端；
(4)服务端收到并确认客户端选择的加密组合，并将公钥证书发送给客户端（这个公钥证书使用了非对称加密算法，使用这个公钥加密的信息只能由私钥解开，而这个私钥只有公钥的颁布者也就是服务端拥有，也就是说客户端用公钥加密的信息，只能有拥有私钥的服务端解开）
(5)客户端收到公钥证书后，临时随即生成一个对称秘钥来对数据加密，用公钥对生成的对称秘钥进行加密得到对称秘钥加密密文，这个对称秘钥加密密文只能通过服务端的私钥解开；
(6)服务端收到对称秘钥加密密文，用私钥解开得到对称秘钥；
(7)客户端开始对数据加密，先用对称秘钥加密数据得到数据密文，再对数据密文进行hash计算得到一个hash值，再将这个hash值用公钥加密得到hash值密文，然后将数据密文、hash值、hash值密文这三个部分一起发送给服务端；
(8)服务端收到数据密文、hash值、hash值密文，首先用私钥解开hash值密文，结果和收到的hash值对比验证hash值是否在传输过程中被篡改，然后对数据密文进行hash计算，结果和收到的hash值对比验证数据密文在传输过程中是否被篡改。通过这两部验证传输数据没有被改变，再用对称加密秘钥对数据密文加密得到原数据内容。
12、dns解析过程
13、缓存、expire和cache-control区别
14、跨域，jsonp原理
答：jsonp：json with padding。
基本原理：利用HTML里的<script></script>元素标签，远程调用JSON文件来实现数据传递。
15、html语义化的理解
答：让开发者容易阅读和开发，让机器容易解析代码。
16、引入CSS有哪几种方式？
答：(1)引入外部样式文件
<link type="text/css" rel="stylesheet" href="css样式文件的绝对地址">
(2)导入外部样式单
类似于引入外部样式文件。使用@import方式导入。
@import "CSS样式文件的绝对地址";
@import url("样式文件的绝对地址");
(3)使用内联样式
<div style="color:red;width:20px;height:30px;"></div>
(4)使用内部CSS样式
<style type="css/text">
div{
width:100px;
background-color:red;
}
</style>
17、CSS的单位有哪些，常用的有哪些？(间参考资料[14])
答：(1)px：绝对单位
(2)em：相对单位
(3)rem：相对单位
(4)vw:viewpoint width,视窗宽度，1vw等于视窗宽度的1%。
(5)vh:viewpoint height,视窗高度，1vw等于视窗高度的1%。
(6)vmin
(7)vmax
(8)%
(9)in:寸
(10)cm
(11)mm
(12)pt：point,大约1/72寸
(13)pc:pica,大约1/6寸
(14)ex
(15)ch
18、CSS优先级（见参考资料[6]）
答：总结排序：
不同级别：
！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
19、bfc特点，创建方式
20、js原型链
21、js解包拆包，就是字符串调用string对象方法的过程
22、js类型转换，比如object和string做加法运算
23、vue的新特性有哪些
24、vue双向数据绑定原理？
25、viewport
26、js中作用域、闭包、原型链继承、异步单线程、settimeout的缺点
27、vue比jquery高效在哪里？
28、es6高效好用的地方？promise（见参考资料[3]）
答：ES6的promise特性：
(1)promise的状态只能从 “未完成->完成，未完成->失败”且状态不可逆转。
(2)promise的异步结果，只能在完成状态时才能返回，而且我们在开发中是根据结果来选择状态的，然后根据状态来选择是否执行then()。
(3)实例化的promise内部会立即执行，then方法中的异步回调函数会在脚本中所有同步任务完成时才会执行。因此，promise的异步回调结果最后输出。
29、promise有几种状态？分别是什么？（见参考资料[3]）
答：promise有3种状态，分别是未完成(unfulfilled)、完成(fulfilled)、失败(failed)。
30、promise.then返回的是什么？（见参考资料[7]）
答：then()方法返回一个promise.它最多需要有两个参数：promise的成功和失败情况的回调函数。
31、箭头函数的优点是什么？
（1）简洁的语法
例子： var funcName=(params)=>params+2;
（2）不会绑定this
32、js数据类型（与第59题重复）
答：字符串、数字、布尔、数组、对象、Null、Undefined
33、区分数组还是对象
34、get和post区别
35、事件机制的流程
36、怎么捕获、怎么冒泡
37、用什么样的方式开启捕获？
38、有一个button，点击button怎么让父元素知道（如何让父元素知道button被点击了）
39、怎样监听一个事件？
40、盒子模型
答:分为标准模型（W3C）和IE模型
两个盒子模型不同地方在于宽和高不同
W3C模型宽和高为文本内容的宽和高
IE模型宽和高为：padding+border+content-width;
padding+border+content-height;
41、选择器的优先级
答：Id选择器>类选择器>标签
42、如何让元素可以垂直水平居中？
43、position的几种属性
44、absolute和relative相对谁定位？
45、vue双向绑定的原理，怎么发布怎么订阅
46、怎么监听数据发生变化？
47、Object.defineProperty()解决了什么？
48、vue-router的形式
49、router-link和router.push的表现形式是什么？
50、hash和history
51、怎么监听到hash的变化，浏览器怎么知道地址发生变化？
地址发生变化，监听机制，hashchange,history路由发生变化会怎么操作？
52、图片墙的制作（如何页面加载图片非常快？）
53、H5新特性（canvas和svg）
54、行内元素，块级元素有哪些，有什么属性
55、js的事件流，如何对事件添加监听（addventlistener）
56、获取ul下的li的alert出来li的编号
答：举一个例子（ES6）：还有很多（见参考资料[8]）

      <!DOCTYPE html >
        <html>
            <head>
            </head>
            <body>
                <ul id="li_item">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
      <script>
        var li_item = document.getElementById('li_item')
        var li = li_item.getElementsByTagName('li')
        for(let i = 0, len = li.length; i < len; ++i){
            li[i].onclick = function () {
                alert(i) ;
            }
        }
      </script>
            </body>
      </html>

57、ES6了解哪些？let,set,promise, let和var的区别，哪个可以变量提升，原理
58、ajax的原理，onreadystate
59、js有哪些数据类型？
答：字符串、数字、布尔、数组、对象、Null、Undefined
60、对cookie和localstorage的理解
61、Object的set和get
62、react声明周期，setstate之后发生了什么？
63、css动画
64、css布局实现
65、实现一个缓存函数
66、es6的特性(详细见参考资料[12])
(1)Default Parameters(默认参数) in ES6
值可以直接赋值给参数。
(2)Template Literals(模版文本) in ES6
在字符串里输出变量，使用新的语法{id}";
(3)Multi-line Strings(多行字符串) in ES6
直接一个反引号，将所有的字符串放进去即可，中间随意换行。
(4)Destructuring Assignment(解构赋值) in ES6
(5)Enhanced Object Literals(增强的对象文本) in ES6
(6)Arrow Functions(箭头函数) in ES6
(7)Promises in ES6
(8)Block-Scoped Constructs Let and Const(块作用域构造Let and Const)
(9)Classes(类) in ES6
(10)Modules(模块) in ES6
67、react如何获取到dom?
答：通过原生函数findDOMNode获取dom。
ReactDOM.findDOMNode();
68、react中key有什么作用？
69、如何设置一个div为怪异盒子？
答：举个例子：
正常盒子<div style="width:100px;height:50px;padding:10px;"></div>
怪异盒子<div style="width:100px;height:50px;padding:10px;box-sizing:border-box;"></div>
也就是说在怪异盒子模式下，div的宽包含了padding+内容宽度+border
(怪异盒子就是IE盒子，正常盒子就是W3C标准盒子)
看一下box-sizing属性值包括：content-box,border-box,inherit
当设置为box-sizing:content-box时，将采用标准模式解析计算，也就是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。
70、写一个动画，一个盒子先向右移动20px,然后向左移动20px

 <!DOCTYPE html>
 <html>
 <head>
    <style> 
    div
    {
          width:100px;
          height:100px;
          background:blue;
          position:relative;
         animation:myfirst 5s;
    }
    @keyframes myfirst
     {
          0%   {background:red; left:0px; top:0px;}
          50%  {background:red; left:20px; top:0px;}
          100% {background:red; left:0px; top:0px;}
      }
      </style>
      </head>
      <body>
            <div></div>
    </body>
    </html>

71、css中获取第n个子标签，如何实现？
答：使用:nth-child(n)表示父元素的第n个子元素
72、正则表达式\b,\s,\w代表什么意思？(见参考资料[9])
答：\b 匹配单词的开始或结束
\s匹配任意的空白符
\w匹配字母或数字或下划线或汉子，等价于'[^A-Za-z0-9_]'。
73、给一个网址，https://www.a.com/name=123&pwd=123,用正则表达式实现获取到name和pwd后面的123
74、js的设计模式（见参考资料[10][11]）
(1)构造函数模式
个人理解：其实就是创建对象，实例化对象
(2)工厂模式
个人理解：实例化对象时传入的是一个对象，而不是对象的属性。
(3)模块模式
模块模式=封装大部分代码，只暴露必需接口
(4)混合模式
混合模式=原型模式+构造函数模式
(5)单例模式
在执行当前Single只获得唯一一个对象
(6)发布订阅模式
个人理解：模块模式+绑定事件
75、设计模式有什么规则？(见参考资料[13])
答：
(1)单一职责原则(Single Responsibility Principle)
应该有且只有一个原因引起类的变化。
(2)里氏代换原则(Liskov Substitution Principle)
只要父类出现的地方子类就一定可以出现，而且替换为子类也不会出现任何异常或错误，使用者不需要知道是父类还是子类。但是返回来就不行了，有子类出现的地方，不一定能使用父类。
(3)依赖倒置原则(Dependence Inversion Principle)
依赖倒置原则包含三个定义：
a.高层模块不应该依赖低层模块，两者都应该依赖其抽象
b.抽象不应该依赖细节
c.细节应该依赖抽象
(4)接口隔离原则(Interface Segregation Principle)
(5)迪米特法则(Demeter Principle)
也叫最少知识原则，降低模块之间的耦合。
(6)开闭原则(Open Close Principle)
一个软件实体如类，模块和函数应该对扩展开放，对修改关闭，开闭原则也是其他五个原则的基石。
76、描述一个完整的ajax过程
77、vue里父组件怎么向子组件传递参数
78、箭头函数的this的作用域是怎样的
79、jq和react和vue的区别？

参考资料：
[1] https://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html
[2] https://blog.csdn.net/shuidinaozhongyan/article/details/71702992
[3] https://www.jianshu.com/p/c613c0198430
[4] https://www.cnblogs.com/honghong87/articles/6941436.html
[5] https://www.cnblogs.com/zylq-blog/p/7565287.html
[6] https://www.cnblogs.com/zxjwlh/p/6213239.html
[7] https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
[8] https://blog.csdn.net/Char_n/article/details/82118042
[9] https://www.jianshu.com/writer#/notebooks/29048783/notes/33109229
[10] https://www.jianshu.com/p/d8c1c426d028
[11] https://www.imooc.com/article/20409?block_id=tuijian_wz
[12] https://blog.csdn.net/bingtangcsnd/article/details/63684142
[13] https://www.cnblogs.com/kafeibuku/p/5671394.html
[14] http://www.divcss5.com/css3-style/c33196.shtml