2019-03-09面试总结

• html5新特性？如何处理HTML5新标签的浏览器兼容问题？

1.绘画canvas
2.用于媒介的video和audio
3.本地离线存储，localstorage长期存储数据，浏览器关闭后数据
不丢失
4.sessionStorage 的数据在浏览器关闭后自动删除
5.语义化更好的内容元素，如：article，footer，header，NAV，
section
6.新的技术，webworker,websocket
浏览器兼容
IE8、IE7、IE6，支持通过document.createElement方法产生的标签
可以利用这一特性让这些浏览器支持HTML5新标签
浏览器支持新标签后，还需要添加标签默认的样式
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn
/trunk/html5.js"</script><![endif]-->
如何区分：DOCTYPE声明、新增的解构元素、功能元素使一个元素垂直水平居中的方法

第一种方法:
div.parent{position:relative;}
div.children{width:200px;height:200px;
            position:absolute;
            left:50%;top:50%;
            margin-top:-100px;margin-left:-100px;}
第二种方法：
div.parent{position:relative;}
div.children{width:200px;height:200px;
            position:absolute;
            left:50%;top:50%;
            transform:translate(-50%, -50%)}第三种方法：
div.parent{position:relative;}
div.children{width:200px;height:200px;
            position:absolute;
            left:0;top:0;bottom:0;right:0;
            margin:auto;}
第四种方法：
div.parent{display:flex; justify-content:center;
align-item:center;}

• position中的relative，absolute和fixed有什么区别

relative（相对定位）生成相对定位的元素，通过top,bottom,left,
right的设置相对于其正常（原先本身）位置进行定位。可通过z-index
进行层次分级
absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位
以外的第一个父元素进行定位。元素的位置通过 "left", "top",
 "right" 以及 "bottom" 属性进行规定。可通过z-index
进行层次分级。
fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位
元素的位置通过 "left", "top", "right" 以及 "bottom" 
属性进行规定。可通过z-index进行层次分级。

• 有一个高度自适应的div，里面有两个div，一个高度100，希望另一个高度填满剩下的高度

<div class="box">
    <div class="a"></div>
    <div class="b"></div>
</div>第一种：
弹性盒子定位:
.box{display:flex;display: -webkit-flex;
flex-direction:column;-webkit-flex-direction:colum;}.a {height:100px;background:green;}
.b {background:blue;flex:1}
第二种：
绝对定位实现
 .box { height: 400px; position: relative; }
 .a { height: 100px; background: #ff0000; }
 .b { background: #00ff00; width: 100%; position: absolute; top: 100px ; 
left: 0 ; bottom: 0;}第三种：
js获取高度实现

• 请介绍js数据类型有哪些

基本数据类型：
null,undefined,boolean,string,number,symbol
引用类型：
Object(,Array,Function)

• 对一个数组去重的方法

1，数组遍历去重
2，数组排序相邻元素去重
3，数组下标去重
4，new Set去重

• 什么是跨域？为什么跨域？怎么解决跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略
造成的，是浏览器对JavaScript施加的安全限制。解决：
1、JSONP，2、代理
3、CORS

• CORS

Cross-Origin Resource Sharing（CORS）跨来源资源共享是一份
浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以
避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，
CORS除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以
让网页设计师用一般的 XMLHttpRequest，这种方式的错误处理比 
JSONP要来的好。另一方面，JSONP 可以在不支持 CORS 的老旧浏览器
上运作。现代的浏览器都支持 CORS。

• VUE解决跨域

方法1.后台更改headerheader('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

方法2.使用http-proxy-middleware 代理解决
1、打开config/index.js,在proxyTable中添写如下代码：
proxyTable: { 
  '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
    target: 'http://f.apiplus.cn', //源地址 
    changeOrigin: true, //改变源 
    pathRewrite: { 
      '^/api': 'http://f.apiplus.cn' //路径重写 
      } 
  } 
}
2、使用axios请求数据时直接使用“/api”：
getData () { 
 axios.get('/api/bj11x5.json', function (res) { 
   console.log(res) 
 })通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：let serverUrl = '/api/'  //本地调试时 
// let serverUrl = 'http://f.apiplus.cn/'  //打包部署上线时 
export default { 
  dataUrl: serverUrl + 'bj11x5.json' 
}

• 什么是事件冒泡和事件捕获，如何进行兼容性处理

什么叫事件冒泡当给父子元素的同一事件绑定方法时，触发了子元素身上的事件，执行完毕
之后，也会触发父级元素的相同事件，这种传播机制叫事件冒泡。
取消事件冒泡Event对象有个属性叫cancelBubble默认值是false 改成true就取消
当前事件冒泡

什么是事件捕获给父子元素用addEventListener()绑定同一个事件时，
当触发子元素身上的事件，会先触发父元素，然后在传递给子元素，
这种传播机制叫事件捕获。
attachEvent()和addEventListener()二者区别attachEvent只用在iE8以下，addEventListener()适合标准浏
览器attachEvent的事件名带on 而addEventListener事件名不带onattachEvent函数里面的this是window，而addEventListener
函数里面的this是当前元素对象attachEvent只有冒泡没有捕获addEventListener有冒泡也有捕获

• 写出es6新增的字符串和数组方法

字符串
1.includes(): 返回布尔值，表示是否找到了参数字符串2.startsWith(): 返回布尔值，表示参数字符串是否在原字符串头部3.endsWidth(): 返回布尔值，表示参数字符串是否在原字符串尾部4.repeat() : 返回一个新的字符串，表示将原字符串重复n次。

5.padStart(),padEnd(); ：如果字符串不够指定长度，会在头部或尾
部补全。接受两个参数，第一个参数用来指定字符串最小长度，第二个参数
是用来补全的 字符串，不写第二个参数，默认用空格补全。

数组方法：
1.forEach
2.映射新数组  map 返回新数组
3.所有元素是否测试通过  every 返回布尔值
4.是否有元素测试通过 some 返回布尔值
5.过滤数组 filter 返回新数组
6.查找索引 indexOf  返回第一次出现的位置索引值
7.连接数组  ‘...’扩展运算符
8.数组去重  new Set()

• 什么是继承？实现继承的几种方式

1.原型链继承
核心： 将父类的实例作为子类的原型function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true
特点：非常纯粹的继承关系，实例是子类的实例，也是父类的实例父类新增原型方法/原型属性，子类都能访问到简单，易于实现缺点：要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执
行，不能放到构造器中无法实现多继承来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是
所有实例共享的）创建子类实例时，无法向父类构造函数传参

2、构造继承

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
特点：解决了1中，子类实例共享父类引用属性的问题创建子类实例时，可以向父类传递参数可以实现多继承（call多个父类对象）缺点：实例并不是父类的实例，只是子类的实例只能继承父类的实例属性和方法，不能继承原型属性/方法无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

3、实例继承

核心：为父类实例添加新特性，作为子类实例返回

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

特点：

1. 不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点：

1. 实例是父类的实例，不是子类的实例
2. 不支持多继承

4、拷贝继承

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点：

1. 支持多继承

缺点：

1. 效率较低，内存占用高（因为要拷贝父类的属性）
2. 无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

5、组合继承

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

特点：

1. 弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
2. 既是子类的实例，也是父类的实例
3. 不存在引用属性共享问题
4. 可传参
5. 函数可复用

缺点：

1. 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

6、寄生组合继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

特点：

1. 堪称完美

缺点：

1. 实现较为复杂

• 请打印以下输出结果并说明原因

var a = {}
var b = {name: '张三',age: 18}
a = b
a.name = '李四'
console.log(a.name) //李四
console.log(b.name) //李四
原因：a, b 共享一个name的引用，当a改变时，b也跟着改变

function Foo () {}
var f1 = new Foo()
f1.a = 10
Foo.prototype.a = 100
Foo.prototype.b = 200
console.log(f1.a) //10
console.log(f1.b) //200