面试题目
- flex如何垂直居中，如何水平居中
justify-content
align-items
<div style='display: flex; justify-content: center;'>
<span>水平居中</span>
</div>
<div style='display: flex; align-item: center; 100%; height: 200px;'>
<span>垂直居中</span>
</div>
- 合并两个有序数组成一个有序数组（合并两个有序队列）
方法一：
var a = [1,2,3,4];
var b = [3,6,8,9,10];
c = a.concat(b).sort((x,y) => {
return x-y;
});
方法二：
function arr(a, b) {
var c = new Array(a.length + b.length);
var i = 0, j = 0, k = 0;
while(i < a.length && j < b.length) {
if(a[i] < b[j]) {
c[k] = a[i];
k++;
i++;
}else {
c[k] = b[j];
k++;
j++;
}
}
while(i < a.length) {
c[k] = a[i];
k++;
i++;
}
while(j < b.length) {
c[k] = a[j];
k++;
j++;
}
return c;
}
- 写一个before函数（before(count, function)），返回一个函数，调用不超过count次。 当count已经达到时，最后一个函数调用的结果将被记住并返回。
_.before = function(times, func) {
var memo;
return function() {
if (--times > 0) {
memo = func.apply(this, arguments);
}
if (times <= 1) func = null;
return memo;
};
};
- 使用appendChild, insertBefore实现insertAfter功能
if 没有节点
then appendChild
else
insertBefore(nextElementChild)
- 请描述If-Modified-Since Last-Modified字段的作用
`Last-Modified`与`If-Modified-Since`都是用来记录最后修改时间。当客户端访问页面时，服务器会将页面最后修改时间通过`Last-Modified`标识由服务器发往客户端，客户端记录修改时间，再次请求本地存在的cache页面时，客户端会通过`If-Modified-Since`头将先前服务器端发过来的最后修改时间戳发送回去，服务器端通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回新的内容，如果是最新的，则返回`304`告诉客户端其本地`cache`的页面是最新的，客户端就可以直接读取本地本地。
- history.pushState与history.replaceState的区别
对这两个属性不太了解！`history`提供了对浏览器历史记录读取的一些方法，比如使用`back()`,`forward()`,`go()`可以在历史记录中前进和后退；从字面意思上感觉`history.pushState`可能是向`history`中插入一条记录；`history.replaceState`可能是替换更新一条记录。
- 使用reduce和concat实现concatAll
个人理解`concatAll`意思是让多个数组连接成一个数组
function concatAll(a,...b) {
let c = [a, ...b];
c.reduce((x,y) => {
return x.cancat(y);
})
}
- Promise对象的then方法中怎样才能保证promise链式调用继续下去，在链式调用里面如何处理错误
`then`方法也会返回一个`promise`对象，所以后面可以继续链式调用下去；
`then`方法里有两个回调函数，一个用于处理满足状态，一个用于处理错误。
- 如何实现轮播（移动container，或者单个计算位置translate）
移动container:
`div`包含`ul`，`ul`里面包含多个`li`;每个`li`包含一张图，通过定时器控制`ul`的`left`来实现轮播，每次只显示一张图。
单个计算位置：
- 原型链与instanceof的原理
原型链：利用原型让一个引用类型继承另一个引用类型的属性和方法。
instanceof原理：查看对象B的原型指向的对象是否在对象A的原型链上。如果在，则返回true,如果不在则返回false。
- 解释一下同源策略与常用的跨域的办法
同源策略是浏览器为了安全性实施的策略；所谓同源是指URL的协议、域名、端口号都相同；常用的跨域方法有`JSONP`,`CORS`,`Proxy`,`Cookie`同源策略。
`JSONP`：`<script>`标签可以加载跨域的JavaScript脚本，并且被加载的脚本和当前文档属于同一个域，因此在文档中可以调用/访问脚本中的数据和函数。如果JavaScript脚本中的数据是动态生成的，那么只要在文档中动态创建`<script>`标签就可以实现和服务端的数据交互。JSONP就是利用`<script>`标签的跨域能力实现跨域数据访问，请求动态生成的JavaScript脚本同时带一个`callback`函数名作为参数。JSONP只支持GET请求。
`CORS`:通过在HTTP Header中添加扩展字段，服务器在相应网页头部加入字段表示允许访问domain和HTTP method，客户端检查自己的域是否在允许列表中，决定是否处理响应。
`Proxy`：把访问其他域的请求替换为本域的请求；本域的请求是服务器的动态脚本负责转发的实际请求。
`Cookie`：由于Cookie同源只关注域名、忽略协议和端口，所以可以用来跨域。
- position几种取值及其含义
`absolute`：绝对定位，相对最近一级的不是`static`的父元素进行定位；
`relative`:相对定位，相对于骑在普通流中的位置进行定位；
`fixed`：固定位置，通常相对于浏览器的窗口或iframe进行定位;
`static`:没有定位，元素出现在正常的流中；
`sticky`:生成粘性定位的元素，容器的位置根据正常文档流计算得出；
- CSS样式的优先级
1. !imporment
2. html标签中的style
3. id选择器
4. 类选择器，属性选择器，伪类选择器
5. 标签
6. 通配符
7. 继承
8. 浏览器默认属性
- 解释一下重绘和回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为repaint重绘。
15 ==运算符判断相等的流程是怎样的
如果两个值类型相同，按照===比较方法进行比较
如果类型不同，使用如下规则进行比较
如果其中一个值是null，另一个是undefined，它们相等
如果一个值是数字另一个是字符串，将字符串转换为数字进行比较
如果有布尔类型，将true转换为1，false转换为0，然后用==规则继续比较
如果一个值是对象，另一个是数字或字符串，将对象转换为原始值然后用==规则继续比较
其他所有情况都认为不相等
16 四种常见的 Form POST 提交数据类型
application/x-www-form-urlencoded
multipart/form-data
application/json
text/xml
17 解释一下事件代理(委托)是如何实现的
事件委托利用了事件冒泡，只指定一个事件处理程序就可以管理某一类型的所有事件。
18 如何理解HTTP是无状态的协议，日常开发中运用什么技术方案弥补的
无状态：个人理解是浏览器给服务器发送请求，服务做出响应；当同一个浏览器再次给服务器发请求时，服务器不知道是哪个浏览器。
常用的技术是`cookie`和`session`;
`cookie`:客户端用于存放服务端发送的特殊信息；客户端再向服务器发送请求的时候，都会把相应的Cookie再次发回至服务器
`session`：服务端用于存放用户信息，服务端将session id发到客户端；当客户端再次发送请求的时候，会将这个session id带上，服务器接受到请求之后就会根据session id找到相应的session.
19 call, apply还有bind的相同点与不同点
相同点：用来改变函数的作用域
不同点：call和apply接收的参数不同，`apply`需要将参数放入一个数组进行传递，`call`不需要；个人理解的`bind`用来改变`this`的指向,将函数绑定到某个对象
function bind(scope) {
var fn = this;
return function() {
return fn.apply(scope,arguments)
}
}
20 手写代码，从100个数里面选10个不重复的数
function findNum(a) {
//我把a当做数组了，里面有一百个数
if(a.length < 10) {
return false;
}
var b = [];
while(b.length <= 10) {
i = Math.floor(Math.random()*a.length);
if(b.indexOf(a[i]) == -1) {
b.push(a[i]);
a.splice(i,1);
}
if(a.length == 0) {
return false;
}
}
return b;
}
21 aaabbc -> abc
方法一：
function deDuplication(a) {
let set = new Set(a);
return Array.from(set);
}
方法二：
function deDuplication(a) {
let b = [];
for(let i = 0; i < a.length; i++) {
if(b.indexOf(a[i]) == -1) {
b.push(a[i]);
}
}
return b;
}
22 写一段代码
xiaoming().eat(‘apple’).play(‘football’);
xiaoming eat apple play football
//创建一个类
function Person(){};
//在原型上定义相关方法
Person.prototype ={
name:function(who) {
this.who = who;
return this;
},
eat:function(food){
this.food = food;
return this;
},
play:function(ball){
this.ball = ball;
return this.who + ' eat' + ' ' + this.food + ' play' + ' ' + this.ball;
}
}
function xiaoming() {
var xiaoming = new Person();
return xiaoming.name('xiaoming')
}
console.log(xiaoming().eat("apple").play("football"));