h5中有哪些新接口
h5中的meta和viewport分别是什么
h5的自定义属性data-**
CSS中有多少选择器
CSS3中的animation和transform的区别
CSS中有三种和动画相关的属性: transform, transition和animation。
其中transform描述了元素静态样式，而transition和animation都能实现动画效果。
所以三者之中transform常常配合后两者使用。
不同点:
- 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动图差不多，立即播放。
- 循环。animation可以设定循环次数。
- 与JS的交互。animation与JS的交互不是很紧密。transition和JS的结合更强大
四种定位的z-index
页面中左右两个20px的浮动元素 如何让中间元素自适应宽度
BFC模式
块级格式化上下文(Block Formatting Contexts)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。
形成BFC具备的条件
比较容易理解的方式定义BFC：一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个
- float值不为none
- position值为fixed或absolute
- display值为table-cell, table-caption, inline-block, flex, 或者inline-flex
- overflow值不为visible
创建一个BFC
一个BFC可以被显式的触发，只需要给它添加上面任意一条CSS样式就可以了。1
<div class="container">Some Content Here</div>
一个新的BFC可以通过给容器添加任何一个触发BFC的CSS样式，如:overflow:scroll/hidden; display: flex/table; float: left等等。
- display: table 可能会产生一些问题
- overflow: scroll 会产生不必要的滚动条
- float: left 会把元素置于容器的左边 其它元素围绕着它
- overflow: hidden 将会剪切掉溢出的元素
BFC适用情况
- 清除浮动，让浮动的元素回归正常的文档流。
- 解决文字围绕图片（当图片是左浮动的时候，文字居于正常流中，文字会环绕图片，解决办法：将文字的标签上加上overflow:hidden的属性）。
- 解决多列布局 最后一列下滑问题(为最后一列元素添加BFC样式)
数据类型判断 typeof Object.prototype.toString.call()
typeof null是object
es6的asyc和await区别
箭头函数与其他函数区别
解释什么是闭包 说出闭包的缺点 - 内存泄漏
新建一个对象let a = {} 与let a = new Object()的区别
对于创建一个对象来说，更推荐使用字面量的方式创建对象(无论是性能上还是可读性)。因为使用new Object的方式创建对象需要通过作用域链一层层找到Object，而字面量的方式就没有这个问题。
localStorage
继承
如何实现多级继承链: 动物 -> 哺乳动物 -> 人类 -> whh
ES5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27function Animal(color,weight) {
this.color = color;
this.weight = weight;
}
function Mammal(color,weight) {
Animal.call(this,color,weight);
}
function Person(color,weight) {
Mammal.call(this,color,weight);
}
Animal.prototype.eat = function() {
console.log('mia mia mia...');
}
Animal.prototype.sleep = function() {
console.log('zzz');
}
Mammal.prototype.suckle = function() {
console.log('mia!');
}
Mammal.prototype = Object.create(Animal.prototype);
Mammal.prototype.constructor = Mammal;
Person.prototype.lie = function() {
console.log('hello world');
}
Person.prototype = Object.create(Mammal.prototype);
Person.prototype.constructor = Person;
var whh = new Person();ES6
1
2
3
4
5
6
7
8
9
10class Animal {}
class Mammal extends Animal {
constructor(x,y,color) {
super(x,y); //调用父类的constructor
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); //调用父类的toString方法
}
}
super关键字表示父类的构造函数，用来新建父类的this对象。子类必须在constructor中调用super方法，否则新建实例时会报错。
ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面(Parent.apply(this))。
ES6的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。
如果子类没有定义constructor方法，这个方法会被默认添加。也就是说，不管有没有显式定义，任何一个子类都有constructor方法。1
2
3
4
5
6
7
8class Mammal extends Animal {
}
等同于
class Mammmal extends Animal {
constructor(...args) {
super(...args);
}
}
在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。
如何判断一个类是否继承另一个类
Object.getPrototypeOf方法可以从子类上获取父类。1
2Object.getPrototypeOf(Mammal) === Animal;
Object.getPrototypeOf(Person) === Mammal;
v-if和v-show
删除数组元素splice 手动实现
数组去重
方法一: 使用Set数据结构
1
2
3var arr = [3,4,5,5,2,1,3];
var result = new Set(arr); //{3,4,5,2,1}
var arr_result = Array.form(result); //去重后的数组 [3,4,5,2,1]方法二: 遍历数组
1
2
3
4
5
6
7
8
9
10const rmdup = (arr) => {
let result = [];
for(let i=0; i<arr.length; i++) {
let el = arr[i];
if(!result.includes(el))
result.push(el);
else continue;
}
return result;
}方法三: 利用对象中不能拥有重复键名
1
2
3
4
5
6
7const rmdup = (arr) => {
let obj = {};
arr.forEach((el) => {
obj[el] = el;
})
return Object.keys(obj);
}
手动实现深拷贝
websocket 长连接
三次握手四次挥手
为了保证服务端能接收到客户端的信息并能做出正确的应答而进行前两次握手，为了保证客户端能接收到服务端的信息并能做出正确的应答而进行后两次握手。
TCP三次握手如何进行: 发送端发送一个SYN=1，ACK=0标志的数据包给接收端，请求进行连接，这是第一次握手；接收端收到请求并且允许连接的话，就会发送一个SYN=1,ACK=1的标志的数据包给发送端，告诉他，可以通讯了，并且让发送端发送一个确认数据包，这是第二次握手；最后，发送端发送一个SYN=0 ACK=1的数据包给接收端 告诉它连接已被确认，这就是第三次握手。之后，一个TCP连接建立 开始通讯。
vue中的data为什么是个函数
简述Promise
Promise是异步编程的一种解决方案，相比传统的解决方案——回调函数和事件更加合理和强大。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
Promise对象有两个特点:
- 对象的状态不受外界影响。Promise代表一个异步操作，有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)
- 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象状态的改变，只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为resolved(已定型)。
Promise的缺点: - 无法取消Promise，一旦新建它就会立即执行，无法中途取消。
- 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
- 当处于pending状态时，无法得知目前进展到哪一个状态(刚刚开始还是即将完成)。
如果某些事件不断地反复发生，一般来说，使用Stream模式是比部署Promise更好的选择。
null和undefined区别
null表示”没有对象”，即该处不应该有值。常见用法: