面试题

html

html新特性

（1）新的表单控件和表单属性，比如 calendar、date、time、email、url、search和required、 autofucus
（2）语义化标签，比如 article、footer、header、nav、section
（3）用于媒介回放的 video 和 audio 元素
（4）用于绘画的 canvas 元素
（3）对本地离线存储的更好的支持localstorage和sessionstorage

语义化标签

（1）代码结构清晰，方便阅读，有利于团队合作开发。
（2）有利于搜索引擎优化（SEO），搜索引擎根据标签来确定上下文和各关键字的权重
（3）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），以语义的方式来渲染网页。

css

flex弹性盒子布局与传统盒模型布局的区别和优点：

　  答：区别：
盒模型：盒模型子元素分配父元素空间，建立在块级和行级方向上，对块级元素和行内元素的布局。
弹性盒子：盒内子元素分配其父元素的可用空间（剩余空的空间），建立在弹性流上，元素随可显示区域变化呈流式布局。
 优点：自适应，用在移动端开发非常合适，使用简单，哪怕对不定宽高元素依然好用。

弹性盒子

主要用于移动端开发，是可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为的布局方式。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

css

CSS让盒子水平垂直居中

1.定位和需要定位的元素的margin减去宽高的一半
 .box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        position: relative;
    }
    img{
        width: 100px;
        height: 150px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -50px;
    }
2.定位和margin:auto,不用受到宽高的限制
.box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        position: relative;
    }
    img{
        width: 100px;
        height: 150px;
        position: absolute;
        top: 0;
        bottom：0；
        left: 0;
        right：0；
        margin-top: -75px;
        margin-left: -50px;
    }
3.水平垂直居中（三）绝对定位和transfrom
.box{
    width: 300px;
    height: 300px;
    background:#e9dfc7; 
    border:1px solid red;
    position: relative;

}
img{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
4..box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        display: flex;
        justify-content: center;
        align-items:center;
    }
    img{
        width: 150px;
        height: 100px;
    }

js

数据类型

原始数据类型:number,string,boolean,null,undefined,object，symbol(ES6新增)
基本类型(简单类型),值类型: number,string,boolean symbol(ES6新增) 空类型:null，undefined
复杂类型(引用类型):object
虽然 typeof null 返回的值是 object,但是null不是对象，而是基本数据类型的一种。
栈(stack)：stack为自动分配的内存空间，它由系统自动释放
堆（heap：heap则是动态分配的内存，大小也不一定会自动释放
基本数据类型的值存储在栈内存，当值赋给另外一个变量的时候，复制的是值
复杂数据类型的值存储在堆内存，地址（指向堆中的值）存储在栈内存。当我们把对象赋值给另外一个变量的时候，复制的是地址，指向同一块内存空间，当其中一个对象改变时，另一个对象也会变化。

检测数据类型的方法

typeof操作符                                object、null、Array ==> object
instanceof操作符 (某个变量是否是某个对象)   object、Array  ==>  true
Object.prototype.toString()                 Object.prototype.toString.call()  

浅拷贝和深拷贝
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型

浅拷贝:把一个对象的地址给了另一个对象,他们指向相同，共享同一块内存，会相互影响。
var obj1={
  age:10,
  sex:"男",
  car:["奔驰","宝马","特斯拉","奥拓"]
};
var obj2={};
function extend(a,b) {
  for(var key in a){
    b[key]=a[key];
  }
}
extend(obj1,obj2);
console.dir(obj2);
console.dir(obj1);

深拷贝:创建一个新的对象，递归拷贝所有层级的对象属性，他们指向不相同，不会相互影响
var obj1={
  age:10,
  sex:"男",
  car:["奔驰","宝马","特斯拉","奥拓"],
  dog:{
    name:"大黄",
    age:5,
    color:"黑白色"
  }
};
var obj2={};
function extend(a,b) {
  for(var key in a){
    var item=a[key];
    if(item instanceof Array){
      b[key]=[];
      extend(item,b[key]);
    }else if(item instanceof Object){//判断这个值是不是对象类型的
      b[key]={};
      extend(item,b[key]);
    }else{
      b[key]=item;
    }
  }
}
extend(obj1,obj2);
console.dir(obj1);
console.dir(obj2);

数组push()、pop()和unshift()、shift()

push()、pop() 是从数组的尾部进行增减，unshift()、shift() 是从数组的头部进行增减。

闭包

闭包的概念:函数A中,有一个函数B,函数B中可以访问函数A中定义的变量或者是数据,此时形成了闭包(这句话暂时不严谨)
闭包的模式:函数模式的闭包,对象模式的闭包
闭包的作用:缓存数据,延长作用域链
局部变量是在函数中,函数使用结束后,局部变量就会被自动的释放
闭包后,里面的局部变量的使用作用域链就会被延长，缓存局部变量
闭包就是能够读取其他函数内部变量的函数。只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“

//函数模式的闭包
function f1() {
  var num=10;
  return function () {
    return num;
  }
}
var ff= f1();
console.log(ff());

//对象模式的闭包
function f2() {
  var num=100;
  return {
    age:num
  }
}
var obj= f2();
console.log(obj.age);

//普通的函数
function f1() {
  var num = 10;
  num++;
  return num;
}
console.log(f1()); //11
console.log(f1());
console.log(f1());

//函数模式的闭包
function f2() {
  var num = 10;
  return function () {
  num++;
  return num;
}
}
var ff = f2();
console.log(ff());//11
console.log(ff());//12
console.log(ff());//13

apply call bind

只要是想使用别的对象的方法或函数,并且希望这个方法和函数是当前对象的,那么就可以使用apply或者call或者bind的方法改变this的指向
1.apply和call是函数或方法调用的时候改变this指向
apply的使用语法
函数名字.apply(对象,[参数1,参数2,...]);
方法名字.apply(对象,[参数1,参数2,...]);
call的使用语法
函数名字.call(对象,参数1,参数2,...);
方法名字.call(对象,参数1,参数2,...);

//函数的调用,改变this的指向
function f1(x,y) {
  console.log((x+y)+":===>"+this);
  return "这是函数的返回值";
}
//apply和call调用
var r1=f1.apply(null,[1,2]);//此时f1中的this是window
console.log(r1);
var r2=f1.call(null,1,2);//此时f1中的this是window
console.log(r2);
console.log("=============>");
//改变this的指向
var obj={
sex:"男"
};
//本来f1函数是window对象的,但是传入obj之后,f1函数此时就是obj对象的
var r3=f1.apply(obj,[1,2]);//此时f1中的this是obj
console.log(r3);
var r4=f1.call(obj,1,2);//此时f1中的this是obj
console.log(r4);


//方法的调用改变this的指向
function Person(age) {
  this.age = age;
}
Person.prototype.sayHi = function (x, y) {
  console.log((x + y) + ":====>" + this.age);//是实例对象
};
function Student(age) {
  this.age = age;
}
var per = new Person(10);//实例对象
var stu = new Student(100);//实例对象
//sayHi方法是per实例对象的
per.sayHi.apply(stu, [10, 20]);
per.sayHi.call(stu, 10, 20);


2.bind方法,是函数和方法赋值一份的时候,改变了this的指向
bind的使用语法
函数名字.bind(对象,参数1,参数2,...);---->返回值是复制之后的这个函数
方法名字.bind(对象,参数1,参数2,...);---->返回值是复制之后的这个方法

//函数赋值时，改变this指向
function f1(x, y) {
  console.log((x + y) + ":=====>" + this.age);
}
function Person() {
  this.age = 1000;
}
Person.prototype.eat = function () {
  console.log("这个是吃");
};
var per = new Person();
var ff = f1.bind(per, 10, 20);
ff();

//方法赋值时，改变this指向
function Person(age) {
  this.age=age;
}
Person.prototype.play=function () {
  console.log(this+"====>"+this.age);
};
function Student(age) {
  this.age=age;
}
var per=new Person(10);
var stu=new Student(20);
var ff=per.play.bind(stu);
ff();


为什么函数和方法能使用apply和call方法
例如：
function f1() {
  console.log(this+":====>调用了");
}
console.dir(f1);
f1.apply();
f1.call();
f1是函数,f1也是对象
实例对象调用方法,方法要么在实例对象中存在,要么在原型对象中存在
例如：
function Person() {
  this.sayHi=function () {
    console.log("您好");
  };
}
Person.prototype.eat=function () {
  console.log("吃");
};
var per=new Person();
per.sayHi();
per.eat();
console.dir(per);

所有的函数都是Function的实例对象
apply和call方法实际上并不在函数这个实例对象中,而是在Function的prototype中
console.log(f1.__proto__==Function.prototype); //true
console.log(f1.__proto__) //ƒ () { [native code] }
console.log(Function.prototype);//ƒ () { [native code] }
console.dir(Function);

冒泡排序

  for (var i = 0; i < len-1; i++) {
    for (var j = 0; j < arr.length - 1 - i; j++) {
         // 相邻元素两两对比，元素交换，大的元素交换到后面
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }
    }
 }

同源、跨域、jonsp跨域请求

同源：它是浏览器的一种安全策略，也就说a网站不能随便读取b网站的内容。是指协议、端口号、域名相同。
跨域：访问不同源的网站之间
1:使用script 标签发送请求，这个标签支持跨域访问
3：页面一定要定义一个全局函数test，在script标签里面给服务器端传递一个callback=test
4：服务端返回的是这个test函数的调用。调用的时候会把数据作为参数包在这个函数里面。

ajax

传统浏览器发出对服务端的请求，获得服务端的数据：1.在地址栏上输入地址，回车，刷新。2.特定元素的 href 或 src 属性。3.表单提交
ajax:通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，实现页面的局部刷新。
//get请求
var xhr = new XMLHttpRequest()
xhr.open('GET', './delete.php?id=1')
xhr.send(null)
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log(this.responseText)
  }
}
//post请求
var xhr = new XMLHttpRequest()
xhr.open('POST', './add.php')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log(this.responseText)
  }
}

http

POST与GET的区别：

Get方式是从服务器上获取数据；在做数据查询时，建议用Get方式；如：商品信息接口、搜索接口、博客访客接口等。
Post方式是向服务器传送数据 ；在做数据添加、修改或删除时，建议用Post方式 ；如：微博图片上传图片接口、登录注册接口等。
1)GET请求的参数在HTTP中是通过url传递的，可见，不安全，POST请求的数据是通过requestbody体传递的
2)GET请示的参数的数据长度是有限制的，而POST请求的数据长度没有限制
3)GET请求无法传递二进制数据到服务器，而POST可以
4)GET请求资源再服务器上能够缓存，而POST就不能够了

Cookie

HTTP协议作为无状态协议，对于HTTP协议而言，无状态同样指每次request请求之前是相互独立的，当前请求并不会记录它的上一次请求信息
cookie是一个很小的文本文件，客户端首次请求服务器时，服务端下发cookie给客户端，储存在客户端的。当浏览器再请求服务器时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器通过检查该Cookie来获取用户状态。
Session是在服务器上保存的信息，客户端首次请求服务器时，服务器需要为客户创建Session的时候，返回session id给客户端，

Cookie 和 Session的区别

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，可以在本地查看，可以将登陆信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用服务器的性能。

SessionStorage、LocalStorage、Cookie的区别

共同点
都是保存在浏览器端，且同源的
区别
1.与服务器的数据交换方式不同
cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递，主要用于跟踪浏览器用户身份。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
2.存储大小限制也不同
cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
数据有效期不同
3.sessionStorage：在当前浏览器窗口关闭后失效；localStorage：始终有效，除非主动删除；cookie可设置有效期，有效期过后就无效。

常见Http协议状态码？

1xx（请求已被接受，需要继续处理）
2xx （请求已成功被服务器接受）
200：请求被正常处理并返回资源
204：请求被受理但没有资源可以返回
3xx （重定向）
301：永久性重定向
302：临时重定向
4xx（请求错误）
400：请求报文语法有误，服务器无法识别
401：请求需要认证
403：请求的对应资源禁止被访问
404：服务器无法找到对应资源
5xx（服务器错误）
500：服务器内部错误
503：服务器正忙

在浏览器键入URL，按下回车之后的流程是什么？

   （1）解析url，检测url地址是否合法
　  （2）DNS解析，解析域名获取所对应的IP地址。（浏览器缓存—hosts文件—本地域名服务器（自身的缓存）—根域名服务器—顶级域名服务器）
　　（3）浏览器向服务器发起tcp的连接，进行三次握手
　　（4）浏览器向服务器发送http请求
　　（5）服务器响应http请求
　　（6）浏览器解析渲染页面
　　（7）断开tcp的连接，进行四次挥手。

什么是Http协议无状态协议?怎么解决Http协议无状态协议?

(1)无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息
(2)无状态协议解决办法： 通过1、Cookie 2、通过Session会话保存。

vue

MVVM

MVVM是是Model-View-ViewModel的缩写，Model代表数据模型，定义数据操作的业务逻辑，View代表视图层，负责将数据模型渲染到页面上，ViewModel通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想。

Vue公司的双向数据绑定原理是什么？

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

Vue的生命周期

beforeCreate（创建前） 
created（创建后）data，属性和方法的初始化
beforeMount（载入前）相关的render函数首次被调用，编译模板，把data里面的数据和模板生成内存的html，还没有挂载html到页面上。
mounted（载入后） html挂载到页面上
beforeUpdate（更新前） data更新
updated（更新后） 视图层数据更新
beforeDestroy（销毁前） 在实例销毁之前调用
destroyed（销毁后） 在实例销毁之后，所有的事件监听器会被移除，所有的子实例也会被销毁。

什么是vue生命周期？

答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

v-show和v-if指令的共同点和不同点?

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏。
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果。

Vue组件间的参数传递

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

Vue的路由实现：hash模式 和 history模式

hash模式：url # 后面之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，。后端如果缺少对 相关 的路由处理，将返回 404 错误。