面试总结

面试过程中遇到的问题，自己总结整理，当做一个自省和知识的梳理。

一 css问题：

1 浏览器内核以及优缺点？

2 html的title和alt有什么区别？

alt:不能显示图像时的用户代理，用来指定替换文字

title:为设置该属性的元素提供建设性的信息

3 行内元素？块级元素？盒模型？

行内元素有：span,a,button

块级元素：div,p

盒模型：利用box-sizing设置

4 css的reset的作用和用途

为了让页面获得浏览器跨浏览器的兼容性，需要用重置文件css代码覆盖浏览器默认的样式来统一样式。

5 css选择器有哪些？优先级如何？

id选择器，类选择器，标签选择器

！important>行内样式>id>.>标签>*

6 sass和less的区别

sass和less主要区别在于实现方式， less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于 ruby 所以在服务器处理。当然还有一些语法上的不同，可以对比看一下两个文档。

二 js问题：

1 ajax使用步骤

• 创建xmlhttprequest对象
• 设置回调函数
• 使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器
• 使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应
• 在回调函数中针对不同的响应状态进行处理

2 jsonp跨域请求

利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP，这项技术可以解决跨域提交Ajax请求的问题。只支持get请求类型。

3 几种跨域请求方式

同源策略的限制，即必须同一协议、同一域名和同一端口才可以进行请求数据交互

• 基于Script标签请求
• 基于jQuery封装的ajax方法实现跨域
• 基于iframe实现跨域请求子域数据

4 类型检测typeof和instanceof区别

typeof操作符返回一个字符串，表示未经计算的操作数的类型。

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

5 localStorage，sessionStorage和cookie,session的区别

cookie用来跟踪浏览器用户身份的会话方式，大小4kb，保存在浏览器端；

session用来跟踪浏览器用户身份的会话方式，没有大小限制，保存在服务器端；

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。大小5MB；

sessionStorage的生命周期是在仅在当前会话下有效。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。大小5MB；

6 js的typeof返回的数据类型有哪些？

typeof操作符返回一个字符串，表示未经计算的操作数的类型

默认数据类型有

7 js如何阻止事件冒泡和默认事件？

event.stopPropagation();//阻止冒泡事件，但是不阻止默认事件
event.preventDefault();//阻止事件默认行为
return false;//原生只阻止默认事件，jQuery中阻止冒泡和默认事件

8 js编写一个数组去重？

9 检测变量作用域

注意观察两者的不同

var arr=[]
for (var i=0;i<10;i++) {
   arr[i]=function (){
     console.log(i);
   }
}
arr[6]();//====>10

var arr=[]
for (let i=0;i<10;i++) {
   arr[i]=function (){
     console.log(i);
   }
}
arr[6]();//====>6

10 关于typeof()类型检测

let a = 1;
let b = [1];
let c = "1";
let d = null;
let f = new Object();
let e = function(){};
let g = false;
 
console.log(typeof a);//====>number
console.log(typeof b);//====>object
console.log(typeof c);//====>string
console.log(typeof d);//====>object
console.log(typeof f);//====>object
console.log(typeof e);//====>function
console.log(typeof g);//====>boolean

11 splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

toString()方法返回一个表示该对象的字符串

var months = ['Jan', 'March', 'April', 'June'];
months.splice(2,3, 'Feb');
console.log(months.toString());

12 关于异步处理函数

function promise1(ms){
	return new Promise(function(resolve, reject) {
  		setTimeout(function() {
    		resolve(ms);
  		}, 1000);
	});
}
 
async function func2(str,ms){
	await promise1(ms);
	console.log(str)
}
 
func2('hello','10')//===>10  hello

三 vue问题：

1 vue生命周期

2 vue组件注册方式

局部注册

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

全局注册

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
 
new Vue({ el: '#app' })

3 v-show和v-if指令的相同点和不同点？

v-show通过display:none控制

v-if通过dom元素生成去除控制

4 v-router有哪几种导航钩子？

前置守卫beforeEach

后置钩子afterEach

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

5 vuex是什么？

vuex是核心状态管理模式