web面试题

1、定位有哪几种？分别简述其特点。

static：默认值，没有定位，元素出现在正常的文档流中
relative：生成相对定位的元素，不脱离文档流，相对于自身位置进行定位
absolute：生成绝对定位的元素，脱离文档流，相对于最近一级的定位，而不是static的父元素来进行定位
fixed：生成绝对定位元素（老IE不支持），脱离文档流，相对于浏览器窗口进行定位

2、请描述一下网页从开始请求到最终显示的完整过程

1.1在浏览器中输入地址
1.2发送到DNS服务器，解析获取域名对应的web服务器的ip地址
1.3与web服务器建立TCP链接
1.4浏览器向web服务器发起相应的HTTP请求
1.5web服务器响应请求，并返回响应数据
1.6浏览器解析并展示HTML
1.7如果当前页面存在其他请求(外布css/js)，浏览器对这些文件重复以上的步骤

3、link和import的区别

区别1：link是XHTML标签，除了加载css外，还可以定义RSS等其他事务；
	@import属于css范畴，只加载css
区别2：link引入css时，在页面载入时同时加载
	@import需要页面完全加载后再加载
区别3：link是XHTML标签，无兼容问题
	@import是css2.1提出的，低版本浏览器不支持
区别4：link支持JavaScript控制ＤＯＭ去改变样式
	而＠import不支持

４、阅读一下代码

代码运行后，是产生输出结果还是报错？为什么？

Var age=20;
Var test;
If(age>20&&test.length>0){
   console.log(1)
}else{
   console.log(2)
}

输出2，不会报错
因为if判断的第一个条件就是false不满足，此时就产生了‘逻辑短路’，第二个判断不会执行，就不会报错

5、call()和apply()和bind()的区别和作用？

apply()函数有两个参数，第一个参数是上下文，第二个是参数组成的数组。
如果上下文为null，则使用全局对象this代替
	function.apply(this,[1,2,3]);
call()的第一个产生是上下文，后续是实例传入的参数序列
	function.call(this.1,2,3)
bind()方法会创建一个新函数，当这个新函数被调用时
	function.bind(null, 10,20);

* call和apply会立即执行函数，而bind不会，它会生成一个新的函数

6、js深拷贝和浅拷贝的区别？

浅拷贝：复制一层对象的属性，并不包括对象里面的引用类型的数据，当改变拷贝的对象里面的引用类型时，源对象也会改变
深度拷贝：重新开辟一块内存空间，需要递归拷贝对象里的引用数据类型，直到子属性都为基本类型。两个对象的对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

function deepClone(obj){
    let _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
    return objClone
} 

7、通过es6解构赋值的方法提取以下对象的street值和prices的第2个元素

let sth={
  orderId:”123456”,
  address:{city:”HZ”,street:”XIHU”},
  prices:[10,20,30]
}

let {address:{street},prices:[,prices]} = sth;
console.log(street,prices);

//变量互换
let a = 1;
let b = 2;
[a,b] = [b,a];

//解构赋值
function demo({name="小代"}){
     console.log(name);
}

8、HTTP状态码知道哪些

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

9、vue.js的两个核心是什么？

数据驱动、组件化系统

10、vue中怎么使css只在当前组件起作用？

在style标签中写 scoped 即可
<style scoped></style>

11、常见兼容性问题及解决方法

1.1浏览器默认的margin和padding不同
	解决方法：加一个全局的*{margin:0;padding:0;}统一
1.2IE6双边距问题，在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍
	解决方法：在float的标签样式控制中加入_display:inline;将其转换为行内属性
1.3ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和matgin-bottom却会发生重合
	解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom
1.4几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中通配符也不起作用
	解决方法：使用float属性为img布局

12、说出至少5个ES6的新特性，并简述它们的作用

1 let关键字，用于声明只在块级作用域起作用的遍变量
2 const 关键字，用于声明一个常量
3 解构赋值，一种新的变量赋值方式。常用来交换变量值，提取函数返回值，设置默认值等
4 for-of遍历，可用来遍历具有Iterator接口的数据解构(Array,String,Set,Map,arguments,NodeList等)
5 Set解构，存储不重复的成员的集合
6 Map结构，键名可以是任何类型的键值对集合
7 Promise对象，更合理规范的处理异步操作
8 Class类，定义类和更简便的实现类的继承
9 Symbol数据类型，定义一个独一无二的值。
10 Proxy代理，用于编写处理函数，来拦截目标对象的操作。

13、使用模板字符串改写下面的代码（ES5 to ES6改写题）

let iam = "我是";
let name = "tom";
let str = "大家好，"+ iam + name +",多指教。";
改写：
let str = `大家好，${iam+name},多指教`;

let name = "小代";
let obj = {
    "name":name,
    "say":function(){
        alert('hello world');
    }
};
改写：
let name = "小代";
let obj = {
    name,
    say(){
        alert('hello world');
    }
};

14、什么是vue生命周期和生命周期钩子函数？第一次页面加载会触发哪几个钩子？

vue的生命周期就是vue实例从创建到销毁的过程
beforeCreate 在实例初始化之后，数据观察(data observer)和event/watch事件配置之前被调用
created 在实例创建完成后立即被调用，在这一步实例已经完成了：数据观察、属性和方法的运算和event/watch事件的回调，但是$el属性目前不可见
beforeMount 在挂载开始之前被调用
mounted 在挂载成功后被调用，el被创建的vm.$el替换
beforeUpdate 数据更新之前调用
update 数据更新完成时调用，组件DOM已经更新 activated组件被激活时调用deactivated组件被移除时调用
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用

第一次页面加载会触发：beforeCreate, created, beforeMount, mounted

创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

15、如何解决跨域问题

1.1 JSONP：原理是动态插入script标签引入一个带回调函数的js文件，这个js文件载入成功后会执行该文件所请求的地址，并且把我们需要的JSON参数传入，在会调函数中我们就可以获得所请求到的数据
	优点：兼容性好，支持浏览器与服务器双向通信
	缺点：只支持get请求
1.2 cors:该方法主要作用服务端，设置Access-Control-Allow-Origin来进行，就可以通过Ajax实现跨域访问了
1.3 反向代理转发

16、说活对闭包的理解

使用闭包主要是为了设计私有的方法和变量。
	优点：可以避免全局变量的污染
	缺点：闭包会常驻内容，会增大内存使用量，使用不当容易造成内存泄漏
在js中函数即闭包，只有函数才会产生作用域的概念
	特性：函数嵌套函数
		函数内部可以引用外部的参数和变量
		参数和变量不会被垃圾回收机制回收

function foo(){
    var a = 20;
    var b = 30;
    function(){
        return a+b;
    }
    bar();
}
foo();

17、JavaScript对象的几种创建方式

1.1 工厂模式
1.2 构造函数模式
1.3 原型模式
1.4 混合构造函数和原型模式
1.5 动态原型模式
1.6 寄生构造函数模式
1.7 稳妥构造函数模式

18、v-for产生的列表，key 值的作用，实现active切换

使用key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

html：
<ul>
    <li v-for="(item,index) in list" :key="index" @click="select(index)" :class="{'active': item.active}">{{item.name}}</li>
</ul>

Data:
list:[
	{name:'a',active:false},
	{name:'b',active:false},
	{name:'c',active:false},
]

事件：
select(i){
	this.list.map(item=>item.active = false);
	this.list[i].active = true;
}

样式：
<style scoped>
    li.active{
        background-color:red;
    }
</style>

19、小程序页面间有哪些传递数据的方法

1.1 使用全局变量实现数据传递，使用的时候，直接用getApp()拿到存储信息
1.2 使用wx.navigateTO与wx.redirectTo的时候，可以将部分数据放在url里面，并在新页面onLoad时初始化
	注意：wx.navigateTo和wx.redirectTo不允许跳转tab所包含的页面，onLoad只执行一次
1.3 使用本地缓存Storage

20、简单描述下微信小程序的相关文件类型

项目目录结构主要有四种文件类型
1.1 wxml 是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构，内部主要是微信自己定义的一套组件
1.2 wxss 是一套样式语言，用于描述wxml的组件样式
1.3 js 逻辑处理，网络请求
1.4 json 小程序设置，如页面注册、页面标题及tabBar设置

21、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

1.1 Gecko内核　　 Mozilla Firefox火狐浏览器   		兼容性前缀 -moz-
1.2 WebKit内核   Chrome(blink是WebKit的分支)、Safari  兼容性前缀 -webkit-
1.3 Presto内核 　  Opera(欧朋原为：Presto，现为：Blink)				兼容性前缀 -o-
1.4 Trident内核　   IE						兼容性前缀 -ms-

22、css清除浮动的几种方法

1）为浮动元素的父级盒加固定的高度——不够灵活  
2）为浮动元素的父级盒加浮动——会产生新的浮动问题        
3）为浮动元素的父级盒设置overflow属性，属性值可以是hidden|scroll|auto——可能会导致内容显示不完全；代码简洁        
4）在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空div，在空div上添加一个属性clear: both;——代码冗余；通俗易懂、书写方便                
5）推荐方法：
给浮动元素的父元素添加.clearfix，(不会在结构上产生冗余代码，可多次重复使用)
.clearfix{ *zoom: 1; } /*处理ie6,7兼容*/
.clearfix:after{ content: ""; display: block; clear: both; }

//其他方法
1.1【.clr{clear:both;}】，设置了clear属性的元素，其上边框会紧贴着浮动元素的margin-bottom边界位置渲染，忽略其margin-top设置
1.2 空标签清浮动：【.clr{clear:both;height:0;overflow:hidden;}】，不推荐。
1.3 伪类after清浮动：【.clearfix:after{content:" ";clear:both;display:block;height:0;visibility:hidden;line-height:0;} .clearfix{zoom:1}】。
1.4 使用【display:table】。
1.5 使用overflow除visible，类似于激发haslayout。
1.6 使用浮动父元素清浮动。

23、关于Set结构，阅读下面的代码

问：打印出来的size的值是多少？为什么？

let s = new Set(); 
s.add([1]); 
s.add([1]); 
console.log(s.size);

1、打印出来的值是2，两个[1]定义的是两个不同的数组，在内存种的存储地址不同，所以是不同的值
2、如果回答为1的，多必是记得Set结构是不会存储相同的值。其实在这个案例中，两个数组[1]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存储地址，因此并不是相同的值。所以都能存储到Set结构中，size为2。

24、es6:定义一个类Animal，通过传参初始化它的类型

如：“猫科类”。它有一个实例方法：run，run函数体内容可自行定义

Class Animal{
	constructor(type){
		this.type = type;
	}
	run(){
		console.log("i can run");
	}
}

基于题的Animal类，定义一个子类Cat并继承Animal类。初始化Cat类的昵称name和年龄age。并拥有实例方法eat，eat函数体内容可自行定义

class Cat extends Animal{
    constructor(type,name,age){
        super(type);
        this.name = name;
        this.age = age;
    }
   
    eat(){
        alert('I am eating');
    }
}

25、利用module模块

实现两个模块A和B，A模块导出变量name，age和say方法。B模块只导入变量name和say方法，并且重命名name为nickname

A模块：
let name = 'tom';
let age = ()=>{console.log("age")};
let say = ()=>{console.log("say")};
export {name,age,say}

B模块：
import {name as nickname,say} from 'A'

26、判断字符串中出现次数最多的元素，并统计次数

let str = 'asdfghhgffffieekdnwolfhqnczeeesssg';
let obj = {};//存放每个字符的个数
let num = str.length;
for(let i=0;i<num;i++){
	if(obj[str.charAt(i)]){
		obj[str.charAt(i)] = parseInt(obj[str.charAt(i)])+1;//个数增加
	}else{
		obj[str.charAt(i)] = 1;//设置初始值 添加
	}
}

let maxNum = 0;//次数
let maxDocument = null;//字符
for(let j in obj){
	if(obj[j]>maxNum){
		maxNum = obj[j];
		maxDocument = j;
	}
}
console.log('obj：',obj);
console.log('次数：',maxNum,'字符：',maxDocument);

27、MVC和MVVM的理解

MVC：
	Model(模型)：是应用程序中处理应用程序数据逻辑的部分。
				通常模型对象负责在数据库中存取数据
	View(视图)：是应用程序中处理数据显示的部分。
				通常视图是依据模型数据创建的
	Controller(控制器)：是应用程序中处理用户交互的部分。
				通常控制器负责从视图层读取数据，控制用户输入，并向模型发送数据
				
MVVM：
	MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型
	模型(Model)：指的是后端传递的数据。
    视图(View)：指的是所看到的页面。
    视图模型(ViewModel)：是mvvm模式的核心，它是连接view和model的桥梁
它有两个方向：
	一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
	二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

28、vue-router有哪几种导航钩子（ 导航守卫 ）？

1.1 全局钩子函数：定义在全局的路由对象中
	主要有：beforeEach：在路由切换开始时调用
		   afterEach：在每次路由切换成功进入激活阶段时调用
1.2 单独路由独享的钩子：可以在路由配置上直接定义beforeEnter钩子
1.3 组件的钩子函数：定义在组件的router选项中
	beforeRouteEnter
	beforeRouteUpdate
	beforeRouteLeave

29、Promise对象

Promise对象是什么？三种状态是什么？成功时执行的方法，失败时执行的方法？

Promise对象是ES6（ ECMAScript 2015 ）对于异步编程提供的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
Promise对象有三种状态：pending（进行中）、reslove（已成功）和reject （已失败）。
    then方法：用于指定调用成功时的回调函数。
    catch方法：用于指定发生错误时的回调函数。

30、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

定义：在router目录下的index.js文件中，对path属性加上/:id;
获取：使用router对象的params.id;

动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒	号开头
{
  path: '/details/:id'
  name: 'Details'
  components: Details
}
访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。
当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数：this.$route.params.id

31、原生js ajax请求有几个步骤？分别是什么

//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
//发送请求
ajax.send(null);  
//接受服务器响应数据
ajax.onreadystatechange = function () {
    if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { 
    }
]

32、在CSS样式中常使用px、em，各有什么优劣，在表现上有什么区别？

px是相对长度单位，相对于显示器屏幕分辨率而言的。
em是相对长度单位，相对于当前对象内文本的字体尺寸。
px定义的字体，无法用浏览器字体放大功能。
em的值并不是固定的，会继承父级元素的字体大小，1 ÷ 父元素的font-size × 需要转换的像素值 = em值

33、解释下 CSS sprites原理，优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
优点：
a. 减少网页的http请求
b. 减少图片的字节
c. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
d. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
缺点：
a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
b. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
c. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

34、split() join() 的区别

前者是将字符串切割成数组的形式，后者是将数组转换成字符串

35、get和post 的区别？

1. Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的。 
2. Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。 
3. Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。 
4. Get执行效率却比Post方法好。Get是form提交的默认方法。 

36、Vue组件间的参数传递

1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数
2.非父子组件间的数据传递，兄弟组件传值
$bus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

37、添加 删除 替换 插入到某个节点的方法

1.1 创建新节点
	createElement()//创建一个具体的元素
	createTextNode()//创建一个文本节点
1.2 添加、移除、替换、插入
	appendChild()//添加
	removeChild()//移除
	replaceChild()//替换
	insertBefore()//插入
1.3 查找
	getElementsByTagName()    //通过标签名称
    getElementsByName()     //通过元素的Name属性的值
    getElementById()        //通过元素Id，唯一性

38、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding

39、说出至少4种vue当中的指令和它的用法？

v-if：判断是否隐藏；
v-show:显示隐藏
v-for：数据循环出来；
v-bind:class绑定一个属性；
v-model：实现双向绑定

40、请说出vue.cli项目中src目录每个文件夹和文件的用法？

assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;
view视图；
app.vue是一个应用主组件；
main.js是入口文件

41、怪异盒模型box-sizing？弹性盒模型|盒布局?

在标准模式下的盒模型：盒子总宽度/高=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin 
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算

42、简述几个css hack?

(1) 图片间隙
	在div中插入图片，图片会将div下方撑大3px。
    hack1：将<div>与<img>写在同一行。
    hack2：给<img>添加display：block；
(2) dt li 中的图片间隙。
	hack：给<img>添加display：block；
(3) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
	hack1：给元素添加：font-size：0；
	hack2：声明：overflow：hidden；
(4) 表单行高不一致
	hack1：给表单添加声明：float：left；height： ；border： 0；

43、vue常用的修饰符？

.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用

44、vue-router 是什么?它有哪些组件？router-link有哪些属性？

vue用来写路由一个插件。router-link、router-view、Router-link的属性有：to,active-class,replace...

45、回答以下代码，alert的值分别是多少？

var a = 100; 
function test(){ 
    alert(a); //100
    a = 10; 
    alert(a);//10
} 
test();//调用函数执行
alert(a);//最后执行 10

因为a为全局变量，函数中改变的也是全局a

46、new操作符具体干了什么呢?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

47、componentWillUpdate可以直接修改state的值吗？

不能，如果在shouldComponentUpdate和componentWillUpdate中调用了setState，此时this._pendingStateQueue != null，则performUpdateIfNecessary方法就会调用updateComponent方法进行组件更新。但是updateComponent方法又会调用shouldComponentUpdate和componentWillUpdate，因此造成循环调用，使得浏览器内存占满后崩溃

48、vue中如何获取dom?

ref="domName" 
用法：this.$refs.domName

49、vue组件中data为什么必须是一个函数？

因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。
而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

50、冒泡排序算法

let arr = [5,4,6,2,7,1];
for(let i=0;i<arr.length-1;i++){
	for(let j=0;j<arr.length-i-1;j++){
		if(arr[j]>arr[j+1]){
			let temp = arr[j+1];
			arr[j+1] = arr[j];
			arr[j] = temp;
		}
	}
}
console.log('arr',arr);//[1, 2, 4, 5, 6, 7]

51、Doctype作用，HTML5 为什么只需要写

doctype是一种标准通用标记语言文档类型声明，目的是告诉标准通用标记语言解析器要用什么样的文档类型定义DTD来解析文档，<!DOCTYPE>声明必须是HTML文档的第一行，位于html标签之前

52、如何实现浏览器内多个标签页之间的通信

1）使用 localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)
2）websocket协议
3）webworker

53、响应式和自适应有什么区别?

响应式设计（Responsive design）：一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。
自适应设计（Adaptive Design）：是为同类别的物理设备建立三种不同的网页（PC），检测到设备分辨率大小后调用相应的网页。

54、Vue 中怎么自定义指令？

指令：分为全局指令和局部指令
//注册一个全局自定义指令 v-focus
Vue.directive('focus',{
	//当绑定的元素插入到DOM中时...
	inserted:function(el){
		//聚焦元素
		el.focus()
	}
})

//局部注册
directive:{
	focus:{
		//指令的定义
		inserted:function(el){
			el.focus()
		}
	}
}

55、 什么是事件代理，它的原理是什么

事件代理：通俗来说就是将元素的事件委托给它的父级或者更外级元素处理	原理：利用事件冒泡机制实现的
优点：只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有元素都绑定事件，减少内存空间占用，提升性能; 动态新增的元素无需重新绑定事件

56、watch、methods 和 computed 的区别?

watch 为了监听某个响应数据的变化。
computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。
所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。
methods是一个方法，它可以接受参数，而computed 不能，computed 是可以缓存的，methods 不会。computed 可以依赖其他 computed，甚至是其他组件的 data。

57、break和continue语句的作用？

break语句 当前循环中退出
continue语句 继续下一个循环语句

58、b继承a的方法

原型链继承
构造函数继承
实例继承
组合继承
拷贝继承
寄生组合继承

59、列举浏览器对象模型中常用的对象，并列举window对象常用的方法至少五个

对象：Window，document，location，screen，history，navigator，screen
方法：Alert（），confirm（），prompt（），open（），close（），moveTo(),moveBy()。

60、vue自定义组件@click点击失效的原因和解决办法

原因：click事件作用于组件内部，如果组件内没有写click事件，便会无响应。
解决：
1.参照官方文档，可以用@click.native=“click”解决	
2.可以用：将事件传递至组件内，也符合组件间的单向数据流，我就是这样解决的
主组件写法：
	<v-nav :click="toggle"></v-nav>
被调用组件写法：
	<div @click="click">...</div>
	export default{
		props:{
			click:{
			type:Function
			}
		}
	}
3.使用$emit来实现事件传递
	<div @click="_click"></div>
	methods:{
		_click(){
		this.$emit("click");
		}
	}

61、 r o u t e 和 route和 route和router的区别

1.$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
2.$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

62、请描述一下 cookies，sessionStorage 和 localStorage 的区别

1.localStorage长期存储数据，浏览器关闭数据后不丢失；
2.sessionStorage数据在浏览器关闭后自动删除；
3.cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
4.存储大小：cookie数据大小不会超过4K，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多；
5.有期时间：localStorage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；

63、说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

行内元素：会水平方向排列，不能包含块级元素，设置width无效，height无效，可设置line-height,margin上下无效，padding上下无效
块级元素：各占据一行，垂直方向排列，可设置width、height等属性,从新行开始结束接着一个断行

兼容问题：display:inline-block;*display:inline;*zoom:1;

64、ie和标准浏览器，有哪些兼容的写法？

let ev = ev || window.event;
document.documentElement.clientWidth || document.body.clientWidth;
let target = ev.srcElement || ev.target;

65、事件委托是什么？如何阻止事件冒泡？如何阻止默认事件？

事件委托:利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行
阻止事件冒泡:
    ie:阻止冒泡ev.cancelBubble = true;
    非IE ev.stopPropagation(); 
阻止默认事件:
	(1)return false；
	(2)ev.preventDefault()

66、简述下面页面跳转区别

wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别？

wx.navigateTo():保留当前页面，跳转到应用内的某个页面。不能跳转tabBar页
wx.redirectTo():关闭当前页面，跳转到应用内的某个页面。不能跳转tabBar页
wx.switchTab():跳转到tabBar页，关闭其他非tabBar页面
wx.navigateBack():关闭当前页面，返回上一页面或多级页面
	可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
wx.reLaunch():关闭所有页面，打开到应用内的某个页面

67、setTimeout、Promise、Async/Await 的区别

事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行
promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行
async函数表示函数里面可能会有异步方法，await后面跟一个表达式
async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行

68、小程序的声明周期函数

onLoad()页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
onShow()页面显示/切入前台时触发
onReady()页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
onHide()页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
onUnload()页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

69、react 生命周期函数

初始化阶段：
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后

运行中状态：
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新

销毁阶段：
componentWillUnmount:组件即将销毁

70、Vue 组件中data 为什么必须是函数

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

71、forEach、for in、for of三者区别

forEach 用来遍历数组
for of 数组对象都可以遍历，历的是数组元素值
	遍历对象需要通过Object.keys()
for in 一般用来遍历对象或json，遍历的是数组的索引（即键名key）

72、v-show和v-if指令的共同点和不同点？

共同点：都能控制元素的显示和隐藏；
不同点：实现本质方法不同
	v-show：本质是通过控制css中的display设置为none，控制隐藏，只会编辑一次；
	v-if是动态的向DOM树内添加或删除DOM元素，若初始值为false，就不会编译了，而且v-if不停的销毁和创建会比较销毁性能；

总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

73、Vue的双向数据绑定原理是什么？

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

74、canvas在标签上设置宽高和在style中设置宽高有什么区别？

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的高度和宽度，还会出现被拉伸的效果，和设置的值不符合
如果canvas的width和height没指定或值不正确，就被设置成默认值

75、vue第一次页面加载会触发哪几个钩子？

beforeCreate,created,beforeMount,mounted

76、params和query的区别

传参可以使用params和query两种方式。
2、使用params传参只能用name来引入路由，即push里面只能是	name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！。
3、使用query传参使用path来引入路由。
4、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
5、二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。

77、vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中的状态管理器
State、 Getter、Mutation 、Action、 Module五种属性
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

在main.js引入store 注入挂载
新建一个目录store.js，...导出export
场景：当页面应用中，组件之间的状态、音乐的播放、登录状态、加入购物车等

78、push()、pop()、unshift()、shift()的用处及返回值

push()方法是向数组末尾添加一个或者多个元素，并返回新的长度。
pop()方法删除数组的最后一个元素，把数组的长度减1，并且返回它被删除元素的值unshift()方法是向数组的开头添加一个或多个元素，并且返回新的长度。
Shift()方法用于把数组的第一个元素从其中删除，并返回被删除的值

79、window.onload和$(document).ready的区别

window.onLoad只会出现一次，$(document).ready能出现多次
window.onload需要等所有文件都加载完才开始加载，$(document).ready只需等文档结构加载完了就开始加载

80、哪些操作会造成内存泄露

内存泄露指任何对象在不再拥有或不再需要它之后依然存在
setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄露
闭包
控制台日志
循环（两个对象彼此引用且彼此保留）

81、实现数组去重

// 数组去重
let arr = [1,1,2,3,2,3,5,6,7,8,8,7];
let narr = [];
function removeItem(arr){
	for(let i=0;i<arr.length;i++){
		// 判断narr中是否已存在该值
		if(narr.indexOf(arr[i])==-1){
			narr.push(arr[i]);
		}
	}
	return narr;
}
console.log(removeItem(arr));//[1, 2, 3, 5, 6, 7, 8]

82、CSS3新增伪类有那些?新增属性?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

1、border-color（为边框设置多种颜色）
2、border-image（图片边框）
3、border-radius（圆角边框）
4、box-shadow（阴影效果）
5、text-shadow（文本阴影）
6、text-overflow（文本截断）
7、word-wrap（自动换行）
8、opacity（透明度）
9、box-sizing（控制盒模型的组成模式）
10、resize（元素缩放）
11、outline（外边框）
12、background-size（指定背景图片尺寸）
13、background-origin（指定背景图片从哪里开始显示）
14、background-clip（指定背景图片从什么位置开始裁剪）
15、background（为一个元素指定多个背景）
16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）
17、hsla（在hsl的基础上增加透明度设置）
18、rgba（基于rgb设置颜色，a设置透明度）

83、 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

84、下面代码输出什么？

var output = (function(x){
    delete x;//只针对对象属性，不会释放内存 间接中断对象的引用
    return x;
})(0);//函数的自执行
console.log(output); //0

85、解释一下变量的提升

变量的提升是JavaScript的默认行为，这意味着将所有变量声明移动到当前作用域的顶部，并且可以在声明之前使用变量。初始化不会被提升，提升仅作用于变量的声明。

var x = 1;
console.log(x,y);//1 undefined
console.log(x,y,z);//z is not defined
var y = 2;
let z = 3;//不会提升
console.log(x,y,z);//1 2 3

86、解释一下严格模式(strict mode)

严格模式用于标准化正常的JavaScript语义。严格模式可以嵌入到非严格模式中，关键字'use strict'。使用严格模式后的代码应遵循JS严格的语法规则。例如，分号在每个语句声明之后使用。

87、Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。 框架底层

88、vue更新数组时能够触发视图更新的数组方法

push()；pop()；shift()；unshift()；splice()；sort()；reverse()

89、created和mounted的区别

created(创建完成):在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted(挂载完成):在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

90、为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

91、display:none与visibility：hidden的区别？

display：none 不显示对应的元素(不占位)，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素(占位)，在文档布局中仍保留原来的空间（重绘）

92、null，undefined的区别？

null 表示一个对象被定义，但是放了个空指针，转换为数值时为0
undefined 表示声明的变量未初始化，转换为数值时为NaN
typeof(null) //object
typeof(undefined) //undefined

93、同步和异步的区别？

同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整（通过阻塞、唤醒等方式），同步强调的是顺序性，谁先谁后。异步不存在顺序性。
同步：浏览器访问服务器，用户看到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容之后进行下一步操作。
异步：浏览器访问服务器请求，用户正常操作，浏览器在后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

94、请给出异步加载js方案，不少于两种

1）defer，只支持IE
2）async/await
3）创建script，插入到DOM中，加载完毕后callBack

95、项目做过哪些性能优化？

1、减少HTTP请求数
2、减少DNS查询
3、使用CDN
4、避免重定向
5、图片懒加载
6、减少DOM元素数量
7、减少DOM操作
8、使用外部JavaScript和CSS
9、压缩JavaScript、CSS、字体、图片等
10、优化CSS Sprite
11、使用iconfont
12、字体裁剪

96、vue-router如何定义嵌套路由？

主要是通过 children，它同样是一个数组
{
	path:'/user',
	component:user,
	children:[
		{
			path:'file',
			component:()=>import(...)//懒加载
		}
	]
}

97、媒体查询是什么?怎么使用？

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。
@media [not | only] media-type [and] ( media-condition){}

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

98、promise.all和promise.race的区别

Promise.all可以将多个Promise实例包装成一个新的Promise实例。用于将多个Promise实例，包装成一个新的Promise实例。都成功才会返回成功
promise.race类似于Promise.all() ,区别在于 它有任意一个返回成功后，就算完成，但是 进程不会立即停止

99、import和require区别

遵循规范
    require 是 AMD规范引入方式
    import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
调用时间
    require是运行时调用，所以require理论上可以运用在代码的任何地方
    import是编译时调用，所以必须放在文件开头
本质
    require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
    import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

100、storage和cookie的区别

存储空间不同：
	storage能提供5M左右的存储空间，cookie能提供4k左右的存储空间
	storage每个域都有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混淆
服务端交互：
	storage中的数据仅仅是本地存储，不会和服务器发生任何交互
	cookie的内容会跟随着请求一并发送到服务端（每个新页面请求时，都会携带cookie，无形中造成带宽浪费）
接口：
	storage：提供丰富的接口供使用（setItem,removeItem,getItem,clear,key）
	cookie:需要自己封装方法（setCookie,getCookie等）

101、跨域请求的解决办法有哪些？

古老的方法 JSONP跨域（动态创建script来读取他域的动态资源）
跨域资源共享（CORS）
nginx代理跨域（porxy代理）
nodejs中间件代理跨域

102、vue的指令有哪些

v-if(判断是否隐藏)、v-else-if、v-else
v-show、v-for(把数据遍历出来)、v-bind（绑定属性 简 :）、v-on（简 @）、v-model(实现双向绑定)、v-html、v-text

103、vue的计算属性和方法有什么区别

methods中定义的函数，只要页面上调用，就无条件的执行
computed中的计算属性依赖的数据不发送变化时，只读取，不会重新计算，计算属性的结果无需在data中定义，在页面中可以直接使用，会在vue实例上产生一个缓存，如果依赖的数据不发生变化，则会读取缓存

104、keep-alive的作用是什么

<keep-alive></keep-alive>
用于保留组件状态或避免从新渲染(缓存的作用 | 缓存使用频率高的页面，提高渲染效率)
可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中
属性：
该标签有两个属性include与exclude:
	include:字符串或者正则表达式。只有匹配的组件会被缓存
	exclude:字符串或者正则表达式。任何匹配的组件都不会被缓存。

105、列举vue生命周期钩子函数

beforeCreate、created	//创建
beforeMount、mounted		//挂载
beforeUpdate、updated	//更新
beforeDestroy、destroyed	//销毁

106、vue的路由hash模式和history模式的区别

hash：在地址栏url中的#符号，虽然在url中，却不会被包含在http请求中，对后端没有影响，因此改变不会重新加载页面
history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求

107、箭头函数有什么特点

没有this
不能使用 new 构造函数
不能使用argumetns，取而代之用rest参数...解决
使用外层的this，作为自己的this(箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply())
箭头函数没有原型属性
箭头函数不能当作Generator函数
箭头函数不能换行

108、vue组件间如何传值

父子组件通信 --通过自定义属性和props来实现
子父组件通信 --通过自定义事件和$emit实现
非父子组件通信	--通过eventbus和$on/$emit

vuex状态管理传值
本地缓存传值

109、vue等单页面应用及其优缺点

优点：
	用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小
	前后端分离，如vue项目
	完全的前端组件化，前端开发不再以页面为单位，更多采用组件化思想，代码结构和组织方式更加规范，便于修改和调整
缺点：
	首次加载页面的时候需要加载大量静态资源，相对时间相对较长
	不利于seo优化，单页页面，数据渲染前，意味着没有seo
	浏览器的前进、后台导航不能使用

110、iframe有哪些优缺点

优点：
	能够原封不动的把嵌入页面展示出来
	如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷
	网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用
	如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决
缺点：
	会产生很多页面，不容易管理
	iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差
	代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化
	很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差
	iframe框架页面会增加服务器的http请求，对于大型网站是不可取的
	
现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发

111、css选择器有哪些？哪些属性可以继承

选择器:
	通配符选择器(*)、标签选择器(div)、类选择器(.myid)、id选择器(#myid)
	相邻选择器(h1 + p)、群组选择器(div,p)、后代选择器（ul li）、父子选择器（ul > li）
	交集选择器（div.box）、伪类选择器（a:hover, li:nth-child）、属性选择器（a[rel=”external”]）
可继承属性：
	font-size、font-weight、font-style、line-height、font-family
	text-indent、text-align、color
不可继承的样式：
	border, padding, margin, width, height
	
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

112、margin和padding分别适合什么场景使用？

margin：
	需要在border外侧添加空白时
	空白处不需要背景时
	上下相连接的两个盒子之间的空白，需要相互抵消时
padding：
	需要在border内侧添加空白时
	空白处需要背景时
	上下相连的两个盒子之间的空白，希望等于两者之和时

113、介绍js的基本数据类型

String	字符串类型
Number	数字类型
Boolean	布尔型 true 和 false
Null	空类型  typeof null; // object
undefined	未定义类型 typeof undefined; // undefined
Symbol	符号类型

114、介绍js有哪些内置对象

Number      数值
String      字符串
Boolean     布尔
Object      对象
Function    函数
Array       数组
Date        时间
Math		数学
Error       错误
RegExp     正则表达式

115、说几条写JavaScript的基本规范？

不在同一行声明多个变量
使用===或!==来比较
使用字面量方式创建对象、数组，（替代new Array）
不要使用全局函数
switch语句必须要带default分支
函数不应该有的时候有return，有的时候没有return
fon-in循环中的变量，用var关键字说明作用域，防止变量污染

116、如何实现数组的随机排序？

// 数组随机排序
let arrpx = [1,2,3,4,6,5,7,9,8];
function randpx(arr){
    for(let i=0;i<arr.length;i++){
        let rand = parseInt(Math.random()*arr.length);
        let temp = arr[rand];
        arr[rand] = arr[i];
        arr[i] = temp;
    }
	return arr;
}
console.log(randpx(arrpx));
// sort排序
let arrpx2 = [1,2,3,4,5,6,7,8,9,10];
arrpx2.sort(function(){
	return Math.random() - 0.5;
})
console.log(arrpx2);

117、null、undefined的区别

null 代表空值是一个空对象指针，null默认转成 0 ,typeof null　　// object
undefined 是声明了一个变量未初始化时，得到是undefined，undefined 默认转成 NaN,typeof undefined　　//  undefined

118、使用js实现获取文件扩展名？

// 获取扩展名
let filename = 'js.html';
let index = filename.lastIndexOf('.');
let suffix = filename.substring(index+1);//从.加一 到最后
// let suffix = filename.substr(index+1);
let spl = filename.split('.');
console.log(suffix,spl[spl.length-1]);

119、列举几个你知道的js框架么？能讲出他们各自的优点和缺点？

jQuery、AngularJs、vue、React
jQuery：实现脚本与页面的分离，最少的代码做最多的事情，插件丰富/不向后兼容，插件兼容，
AngularJs：双向数据绑定，模块化/无法完美兼容低版本，太笨重
vue：性能好，简单易用，前后的分离，单页面应用/不利于seo优化，报错不明显
React：虚拟DOM，跨浏览器兼容，模块化，单项数据流，兼容性好/不适合单独做一个完整的框架

120、请简要介绍下DOM文档流，请指出document.onload和document.ready的区别

文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素，即为普通流/文档流
文本流：文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式
区别：
    ready：表示文档结构已经加载完成（不包含图片等非文字媒体文件）
    onload：表示页面包含图片等文件在内的所有元素都加载完成

121、vue数据双向绑定原理

采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

122、mvc和mvvm的理解

MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。
	模型（Model）指的是后端传递的数据。
	视图(View)指的是所看到的页面。
	视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。
	它有两个方向：
		一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
		二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
	
MVC是Model-View- Controller的简写。即模型-视图-控制器。
	M和V指的意思和MVVM中的M和V意思一样。
	C即Controller指的是页面业务逻辑。
	使用MVC的目的就是将M和V的代码分离。
	MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

123、怎么封装组件

封装组件：主要是为了解耦，具备高性能、低耦合，在通用组件的时候要留一个插槽
第一步：在compoents文件夹中新建一个vue文件
第二步：在main.js中全局引入，先import，再注册到VUE中
第三步：在任何页面直接使用自己定义的组件

124、params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
	url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据,params刷新会丢失params里面的数据。

125、$nextTick的使用

当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

126、delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

127、vue-loader是什么？使用他的用途有哪些？

vue-loader是解析 .vue 文件的一个加载器，跟 template/js/style转换成 js 模块；
用途：js可以写es6、style样式可以scss或less；template可以加jade等

128、active-class是哪个组件的属性？

vue-router模块的router-link组件

129、vue-router懒加载怎么实现？

为什么需要懒加载？
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
路由种设置：
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
// const index = ()=>import('@/components/pages/index');
export default new Router({
	routes:[
		{
			path:'/home',
			name:'home',
			component:() => import('@/components/pages/home')
			//component:resolve=>require(['@/components/pages/home'])
			children:[{
				path:'/index',
                name:'index',
                component:() => import('@/components/pages/index')
			}]
		},
		{
          path: '',
          redirect: '/home'
        }
	]
})

130、vue开发过程中用过的性能优化的方式？

1：图片优化
	图片大小优化，部分图片使用WebP（需要考虑webp兼容性） 在线生成，如智图、又拍云 gulp生成，gulp-webp或gulp-imageisux canvas生成
	减少图片请求，使用雪碧图 在线生成：sprites Generator、腾讯的gopng、spriteme 代码生成：gulp.spritesmith或者sass的compass
2：页面性能优化
	图片或组件懒加载
3：三方插件懒加载（按需加载）
4:减少引入外部文件大小

131、Javascript中什么是伪数组？如何将伪数组转化成标准数组？

在js中，数组是特殊的对象，凡是对象有的性质，数组都有，数组表示有序数据的集合，而对象表示无序数据的集合。
那伪数组是什么呢，当然它也是对象，伪数组一般具有以下特点：
    按索引方式存储数据；
    具有length属性；
    没有数组的push、shift、pop等方法;
function的arguments对象，还有getElementsByTagName、ele.childNodes等返回的NodeList对象，或者自定义的某些对象，这些都可以是伪数组。

1 使用Array.prototype.slice.call()或[].slice.call()
 
let arr1 = {  
 0:"hello",  
 1:12,  
 2:true,  
 length:3  
}
 
let arr11 = Array.prototype.slice.call(arr1); //返回的是数组
let arr111 = [].slice.call(arr1);//同上
//["hello", 12, true]
 
2 使用ES6中Array.from方法
let arr2 = {  
 0:"hello",  
 1:12,  
 2:2013,  
 3:"大学",  
 length:4  
}
 
Array.from(arr2);  
//["hello", 12, 2013, "大学"]

132、什么是JSON

JSON：JavaScript 对象表示法（JavaScript Object Notation）。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。

133、列和栈有什么区别

栈
栈是一种重要的线性结构，其特殊性在于限定插入和删除数据元素的操作只能在线性表的一端进行。（后进先出）
栈的元素必须“后进先出”。
栈的操作只能在这个线性表的表尾进行。
注：对于栈来说，这个表尾称为栈的栈顶（top），相应的表头称为栈底（bottom）。
因为栈的本质是一个线性表，线性表有两种存储形式，那么栈也有分为栈的顺序存储结构（顺序栈）和栈的链式存储结构（链式栈）。
列
队列也是一种线性表。它允许在表的一端插入数据，在另一端删除元素。插入元素的这一端称之为队尾。删除元素的这一端我们称之为队首。
队列的特性：
在队尾插入元素，在队首删除元素。
FIFO（先进先出），就向排队取票一样。

134、数组和链表有什么区别

数组特点
优点

随机读取效率很高。
查找速度快
缺点

内存空间要求高，必须有足够的连续内存空间。（在内存中，数组是一块连续的区域。知道每一个数据的内存地址，可以直接找到给地址的数据。）
浪费内存空间。（数组需要预留空间，在使用前要先申请占内存的大小，可能会）
插入数据和删除数据效率低（插入数据时，这个位置后面的数据在内存中都要向后移。删除数据时，这个数据后面的数据都要往前移动。 ）
数组大小固定，不能动态拓展
链表特点
优点

内存利用率高，不会浪费内存。（在内存中可以存在任何地方，不要求连续。）
每一个数据都保存了下一个数据的内存地址，通过这个地址找到下一个数据。
插入删除速度快
不指定大小，扩展方便。（链表大小不用定义，数据随意增删。）
缺点

不能随机查找，必须从第一个开始遍历，查找效率低

135、MVP和MVC模型

MVC（Module View controller）模型
它是一种设计模式。所谓的设计模式其实是一种框架结构的体呈现,目的分离应用程序的页面展示，网络数据交互，数据呈现

Module，模型层，用户数据管理，通常是一些 javaBean, db,sharePreference,network,图片处理等耗时操作均应该放在该层。
View，视图层，展现给用户的视图，是应用程序最外层的壳，比如 xml 布局，drawable 显示
controller 控制层，也叫中间层。一般指的是在四大组，接收 View 层的指令，处理相关指令，并对处理后的指令进去进一步操作，下发指令到Module层。
MVC模型逻辑
以点击某个按钮为例，当用户在 View 布局上发生事件交互的时候，View 层会下发指令到 control 层，control监听到事件交互，并进行处理，接着 control 下发指令到 Module 层，Module 层进行数据更新后，把数据直接显示在View上面。

优点
可维护性高，结构清晰明了，利于后期维护
重用性高，比如多个 View 视图可以共同依赖同一个Module 层
利于项目工程化管理 由于每个层各司其职，每一个层具有鲜明的特征
缺点
View 层与Module 层相互耦合，不利于后期的维护
View 对 Module 访问低效率
MVP（Module View Presenter ）模型
Module，模型层，用户数据管理，通常是一些 javaBean, db,sharePreference,network,图片处理等耗时操作均应该放在该层。
View，视图层,一般指的是四大组件，四大组件对作为View，来完成应用程序界面的展示
Presenter 控制层，也叫中间层。相当于一个中间桥梁的作用，用于解决View 层与 Module 层的耦合，一般一个 Presenter 可以对应多个 View，一个Presenter 也可以对应多个Module
MVP模型逻辑
从图中我们可以了解到 View 与 Module 已经完全没有联系了，所有的操作均是在 Presenter 中操作的，Presenter 成了中间桥梁。于操作view层发出的事件传递到presenter层中，presenter 层去操作model 层，并且将数据返回给 view 层，整个过程中 view 层和 model 层完全没有联系。一般在设计View 与 Presenter 的时候会采用接口的形式，来降低 Presenter 与 View 的耦合。

优点
降低View 与 Module 的耦合
使View 层更加的饱满
一个Presenter 可以对应多个 View
便与测试，可以脱离用户接口来测试某些逻辑。
缺点

Presenter 层会存在引用View 层的东西出现空指针的问题
两者的不同
MVP模式：
1.View不直接与Model交互，而是通过与Presenter交互来与Model间接交互
2.Presenter与View的交互是通过接口来进行的，更有利于添加单元测试
3.通常View与Presenter是一对一的，但复杂的View可能绑定多个Presenter来处理逻辑，业务相似的时候也可以多同个View共享一个Presenter。
MVC模式：
1.View可以与Model直接交互
2.Controller是基于行为的，并且可以被多个View共享
3.Controller可以负责决定显示哪个View

MVVM
MVVM框架
Angular.js
react.js
vue.js
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。