酷狗面试
酷狗面试题¶
0、对于评述算法优劣术语的说明😄¶
-
稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面；
-
不稳定：如果a原本在b的前面，而a=b，排序之后a可能会出现在b的后面；
-
内排序：所有排序操作都在内存中完成；
-
外排序：由于数据太大，因此把数据放在磁盘中，而排序通过磁盘和内存的数据传输才能进行；
-
时间复杂度: 一个算法执行所耗费的时间。
-
空间复杂度: 运行完一个程序所需内存的大小。
1. CSS 实现三栏布局（左右两边固定宽度，中间自适应）？😄¶
- 使用flex布局： 父元素设置
display: flex，左右两边设置固定宽度，中间设置flex-grow: 1；.main { display: flex; } .center { flex: 1 1 auto; } .left { width: 100px; } .right { widht: 100px; }
- 使用浮动布局：左右两边设置固定宽度，而且分别设置
float:left和right，这个方法有一个需要注意的是在HTML中，中间栏需要和右边栏进行对调；.main { overflow: hidden; } .left { float: left; } .right { float: right: }
- 使用绝对定位布局：左右两边设置固定宽度和
position:absolute,而且分别设置left: 0和right: 0，中间栏只要设置左右margin为左右栏的宽度就可以了（需要注意的是左右两边需要设置top: 0，不然右边会被订下来）.main { position: relative; } .center { margin: 0px 100px; } .left, .right { position: absolute; top: 0; } .left { left: 0; } .right { right: 0; }
2. CSS 如何实现弹窗水平垂直居中？(文本和块级元素，垂直居中，水平居中)😄¶
/* 文本 */
height: 100px;
line-height: 100px;
text-align: center;
/* 块级 */
display: flex;
justify-content: center;
align-items: center;
3. ==和 === 的区别😄¶
===为恒等符：当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回true，若等号两边的值类型不同时直接返回false。
==为等值符： 当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较。 a、如果一个是null、一个是undefined，那么[相等]。console.log(null == undefined); // trueb、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。 c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。 d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。 e、任何其他组合，都[不相等]。
4. 30 == '30' 的过程是怎样的？😄¶
- 30为数值类型，而'30'字符串类型，因此等号两边的数据类型不相等，需要进行转换类型；
- 由于一个是数值，另一个字符串，所以需要将字符串转换成数值再进行比较，即
'30' => 30;- 这时等号两边同样为数值型数据，即
30 == 30，所以返回true
5. 以下代码输出的是什么？为什么呢？😄¶
for (var i=0; i<5; i++) {
setTimeout( function timer() {
console.log(i);
}, 0);
}
自己：结果是5个5；原因：setTimeout内部的代码不会立即执行（虽然设置的是0ms），这部分代码会存放在一个序列中。当循环结束， i = 5；代码执行完毕，此时输出5个5；
标准：浏览器是多线程的（JS引擎线程，render线程，事件监听线程，http请求线程），但是 JS 代码在执行中是单线程的（除去ajax请求部分）；所以JS代码执行过程中会发生阻塞；setTimeout内部的代码被阻塞，直到全部的代码执行完毕后，settimeout 的代码才开始执行。——实际上内部代码执行的时间不是0毫秒后。
6. 你有使用过闭包吗？¶
7. 模块化的异步加载怎样做？¶
8. window.onload执行时间？¶
9.图片加载完的时候会执行吗？¶
10. 了解JS继承吗？¶
11. 利用原型链的继承有什么缺点吗？¶
12. 知道如何修改this的指向吗？¶
修改this指向的办法有三种：
apply、call和bindapply、call：通过传入需要指向的对象，从而改变this的指向，指向传入的第一个参数;bind：它会创建一个函数的实例，其this值会被绑定到传给bind()函数的值。
window.color = 'red';var o = { color:'blue' };function sayColor(){ console.log(this.color);}var globalSaycolor = sayColor;var objectSaycolor = sayColor.bind(o);globalSaycolor(); // redobjectSaycolor(); // blue
补充
其实还有一种：new关键字改变this指向 因为在
new的过程中，其中有一个步骤为将构造函数内部的this指向实例对象，所以通过new关键字也可以改变this的指向。
13. apply和 call的区别？¶
**相同点：**可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
**不同点：**实际上，
apply和call的功能是一样的，只是传入的参数列表形式不同。apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。
call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。
14. 有一个按钮是异步生成的，怎样对它进行事件绑定？¶
由于按钮是异步生成的，所以我选择将事件绑定在按钮生成的父元素上，通过事件委托的机制，利用事件冒泡，把事件绑定在父元素上，可以通过判断
event.target按钮是否已经生成，从而实现相应的事件。科普补充： **事件冒泡**可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到
document对象； **事件捕获**则跟事件冒泡相反，事件会从document对象开始发生，直到最具体的元素；
15. 跨域有处理过吗？¶
我处理过的跨域有两种情况：
- 一种是在页面中嵌入了一个iframe，因此父子iframe间产生了跨域，要解决这个问题，只需要把
document.domain设置成相同的值就可以在两个页面里进行相应的操作了；- 另外一种情况是用Vue开发涉及到的跨域问题，这个问题只需要修改config文件夹下的index.js中的dev:{}部分中修改proxyTable参数即可，相当于对跨域的url进行了代理，从而可以顺利访问。
另外说了一下自己比较熟悉的一种跨域解决方案：JSONP JSONP解决跨域问题的本质其实就是
<script>标签可以请求不同域名下的资源，即<script>请求不受浏览器同源策略影响。
面试官听到JSONP立刻提出了一个问题：JSONP是否可以支持 POST方法？为什么？
JSONP只支持
GET的请求方法，上面也提到了JSONP原理其实就是利用<script>标签发送了一个URL给服务器，其实与ajax XMLHttpRequest协议无关了，相当于输入了一个url而已，所以必然只能为GET请求方法。
16. 既然提到 POST和 GET，说说两者的区别？¶
- 大小：
GET提交的数据最大为2k（原则上url长度无限制，可是浏览器通常限制url长度在2k左右）；POST理论上没有限制大小（实际上IIS4中最大量为80KB，IIS5中为100KB）。- 发送方式：
GET请求数据放在url上，即HTTP协议头中，其格式为：url?key=value&key2=value;POST把数据放在HTTP的包体中（Request Body）。- 安全性：
GET请求可被缓存，请求保存在浏览器历史记录中；POST则不能被缓存。与POST相比，GET的安全性较差，因为发送的数据是URL的一部分。- 发送TCP包：对
GET请求只**产生一个TCP包**，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；对于POST请求**产生两个TCP数据包**，浏览器先发送http header，服务器确认权限正确响应100(continue)返回浏览器，浏览器收到100确认继续请求，再次发送data，服务器响应200（返回数据）。