初级前端面试题总结

应届毕业生找工作有点苦难啊，刚毕业没啥经验，只能一边学习一边投递简历了，下面是我最近面试几家公司所碰到的面试题，记录一下，题目都比较初级，大家有问题可以相互讨论撒~

HTML(5)和css(3)部分

一、localStorage、sessionStorage和cookies之间的区别

1. localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信
息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，
不参与和服务器的通信。

2. sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,
而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封
装来对Object和Array有更好的支持。

localStorage和sessionStorage使用时使用相同的API：

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
localStorage.removeItem("key");//删除名称为“key”的信息
localStorage.clear();​//清空localStorage中所有信息

3. cookies

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K
左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP
头中，如果使用cookie保存过多数据会带来性能问题。

三者的共同点：都是都是保存在浏览器端的，而且都是同源的！

二、localStorage存储有没有什么限制条件？

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较
常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到

三、元素水平垂直居中
推荐三种方式：

1.css3的transform：
.ele {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

2.flex盒子布局:
.ele {
    display: flex;
    justify-content: center;
    align-items: center;
}

3.display的table-cell:
.ele {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

四、flex布局及其属性
flex布局也叫弹性布局，用来为盒装模型提供最大的灵活性，任何容器都可以指定为flex布局。（display： flex/inline-flex;）
1.flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;

2.flex-wrap属性表示项目若不在一条抽线上时的换行方式。

 flex-wrap: nowrap | wrap | wrap-reverse;

3.flex-flow属性是flex-direction和flex-wrap的简写，默认值为row nowrap。

flex-flow: < flex-direction > || < flex-wrap >;

4.justify-content属性定义类项目在主轴方向上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

5.align-items属性定义了项目在交叉轴上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;

6.align-content属性定义了多根轴线的对齐方式，若只有一根轴线，则该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

五、什么是弹性盒子？

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

1. 弹性盒子其实是由两部分组成：弹性容器(Flex container)和弹性子元素(Flex item)。
弹性容器：通过设置 display 属性的值为 flex 或 inline-flex 将其定义为弹性容器。
弹性子元素：弹性容器内包含了一个或多个弹性子元素。

2. 弹性盒子的作用范围：
弹性盒子只定义了弹性子元素如何在弹性容器内布局。也就是说，弹性容器外及弹性子元素内都是
正常渲染的。

3. ①css 列（CSS columns）在弹性盒子中不起作用。
     ②float, clear and vertical-align 在flex项目中不起作用。

4. 弹性盒子的属性：
①display: flex | inline-flex; 
②flex-direction 
③flex-wrap
④flex-flow 
⑤justify-content 
⑥align-items 
⑦align-content 
⑧flex-grow 
⑨flex-basis 
⑩flex 

六、css3中的制作动画的属性主要有哪些？
1.变形（transform）

①rotate(< angle >)：2D旋转，负数为逆时针旋转；
②translate(x,y)：水平和垂直方向同时移动；
③scale(< number >, < number >)：水平和垂直方向同时2D缩放；
④skew(< angle >, < angle >)：水平和垂直方向上同时扭曲；
⑤matrix(< number >, < number >，< number >, < number >，< number >, < number >)：
以一个含有六个值的变换矩阵的形式指定一个2D变换。

2.转换（transition）

transition:property duration timing-function delay;
transition-property: 指css属性的name，transition的效果；
transition-duration：实现效果所需的时间；
transition-timing-function：实现效果的转速曲线；
transition-delay：定义效果开始的时间。

3.动画（animation）

animation： name keeping-time animate-function delay times iteration final；
name：动画的名字；
keeping-time：动画持续时间；
animate-function：运动曲线；
delay：动画延迟时间；
times：动画循环执行的次数；
iteration：动画循环的方式；
final：动画到最后时的状态。

vue部分

一、vue的有哪些常用的指令？自定义指令是什么？

指令是一种可以附加到DOM元素的微命令(tiny commands).。它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性。

v-if: 使用true或false来判断元素的现实或隐藏；
v-for：数据循环；
v-on：函数绑定；
v-bind：属性绑定；
v-model：数据的双向绑定。

以上的是vue中一些内置的指令，但在实际项目开发中这些内置指令并不能完全满足开发需求，所以可以使用vue来创建全局指令，也就是自定义指令。
举一个简单的小栗子：加载DOM时直接让表单获取焦点。

JS部分：

// 和自定义过滤器一样,我们这里定义的是全局指令
Vue.directive('focus',{
	inserted(el) {
  		el.focus()
	}
})

html部分：

以上部分中：

①使用 Vue.directive() 来新建一个全局指令,(指令使用在HTML元素属性上的)
②Vue.directive(‘focus’) 第一个参数focus是指令名,指令名在声明的时候,不需要加 v-
③在使用指令的HTML元素上, 我们需要加上 v-.
④Vue.directive(‘focus’,{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数.
⑤el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input
⑥el 就等价于 document.getElementById(‘el.id’)
⑦可以利用 $(el) 无缝连接 jQuery

指令绑定到一个元素上时，指令内部的五个生命周期函数：

bind: 当指令绑定到 HTML 元素上时触发.只调用一次.
inserted: 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 div#app)，
但不保证，父元素已经插入了 DOM 文档.
updated: 所在组件的VNode更新时调用.
componentUpdate: 指令所在的组件的VNode以及其子VNode 全部更新后调用.
unbind: 指令和元素解绑的时候调用,只调用一次

二、数据双向绑定的原理

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获
取属性值(get)和设置属性值(set)的操作来实现的。

代码演示：
defineProperty的用法var obj = { };//第一个参数：定义属性的对象。
var name;//第二个参数：要定义或修改的属性的名称。
//第三个参数：将被定义或修改的属性描述符。
Object.defineProperty(obj, "data", {
    //获取值
	get: function () {
    	return name;
	},
    //设置值set: function (val) {
	    name = val;console.log(val)
 	}
})
//赋值调用
setobj.data = 'aaa';
//取值调用
getconsole.log(obj.data);

代码演示：
defineProperty的双向绑定var obj={};
Object.defineProperty(obj, 'val',{
	set:function (newVal) {
		document.getElementById("a").value=newVal==undefined?'':newVal;
		document.getElementById("b").innerHTML=newVal==undefined?'':newVal;
	}
});
document.getElementById("a").addEventListener("keyup",function (e) {
	obj.val = e.target.value;
})

三、路由跳转时如何传递和接收参数
第一种params属性：

传递参数：params： {key: value}
接收参数：this.$route.params

第二种query属性：

传递参数：query：{key:value}
接收参数：this.$route.query

四、$route 和 $router的区别

1. router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个
router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象
和属性。

举个栗子：history对象
$router.push({path:'home'}); //本质是向history栈中添加一个路由，在我们看来是切换路由,
但本质是在添加一个history记录

$router.replace({path:'home'}); //替换路由，没有历史记录


2. route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以
获取对应的name,path,params,query等。

JS部分

一、递归
递归是一种重要的编程技术，用于让一个函数从其内部调用其自身（简单说就是自己调用自己）。
构成递归需具备的条件：

1. 子问题须与原始问题为同样的事，且更为简单；
2. 不能无限制地调用本身，须有个出口，化简为非递归状况处理。

二、冒泡排序和快速排序的思想

1.冒泡排序的思想：

通过相邻两个元素之间的比较和交换，使较大的元素逐渐从前面移向后面（升
序），就像水底下的气泡一样逐渐向上冒泡，所以被称为“冒泡”排序。冒泡排序的最坏时间复杂度
为O(n2)，平均时间复杂度为O(n2)。
代码演示：
var   arr=[2,5,4,1,7,3,8,6,9,0];
function arrayMax(arr) {
    var temp = null;
    for (var i = 0;iarr[j]){
                temp = arr[j];
                arr[j] = arr[i];
                arr[i] = temp;
            }

        }
    }
    return arr;
}
console.log(arrayMax(arr));

2.快速排序的思想：

元素的比较和交换是从两端向中间进行的，较大的元素一轮就能够交换到后面的位置，而较小的元素
一轮就能交换到前面的位置，元素每次移动的距离较远，所以比较次数和移动次数较少，速度较快，
故称为“快速排序”。 

代码演示：
var times = 0;
function queryArrayMax(arr) {
    //如果数组长度小于等于1无需判断直接返回即可
    if (arr.length<=1){
        return arr;
    }
    var arrIndex = Math.floor(arr.length/2);//获取中间值 这个是索引
    var arrCenterVal = arr.splice(arrIndex,1);// 利用索引取出中间值  改变原始数组
    var left= [],//存储小的
        right = [];//存储大的
   // 遍历数组 ,进行判断分配
   for (var i = 0;i

三、同源策略是什么？

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受到影响。所谓的同源就是指域名、协议和端口这三者一样。

解决办法：

①jsonp
②< script >标签中的src属性
③CROS（跨域资源共享）

四、说一下同步和异步

同步：同步方法表明调用一旦开始，调用者必须等待方法执行完成，才能继续执行后续方法。

JavaScript的同步：如果在函数返回结果的时候，调用者能够拿到预期的结果(就是函数计算
的结果)，那么这个函数就是同步的.

异步：方法一旦开始，立即返回，调用者无需等待其中方法执行完成，就可以继续执行后续方法。

JavaScript的异步：如果在函数返回的时候，调用者还不能购得到预期结果，而是将来通过一定的
手段得到（例如回调函数），这就是异步（例如ajax操作）。

如果函数是同步的，即使调用函数执行任务比较耗时，也会一致等待直到得到执行结果。

如果函数是异步的，发出调用之后，马上返回，但是不会马上返回预期结果。调用者不必主动等待，当被调用者得到结果之后会通过回调函数主动通知调用者。

五、ES6中的箭头函数和普通函数有什么区别？

箭头函数：

let fun = () => {
	console.log('lalalala');
}

普通函数：

function fun() {
	console.log('lalla');
}

① 箭头函数是匿名函数，不能作为构造函数，不能使用new
② 箭头函数不绑定arguments，取而代之用rest参数（…）解决
③ 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值（重点）
代码演示：

箭头函数：
var obj = {
	a: 10,
	b: () => {
		console.log(this.a); // undefined
		console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: 
		ƒ, frames: 	Window, …}
	},
	c: function() {
		console.log(this.a); // 10
		console.log(this); // {a: 10, b: ƒ, c: ƒ}
	}
}
obj.b(); 
obj.c();

普通函数：
var obj = {
	a: 10,
	b: function(){
		console.log(this.a); //10
	},
	c: function() {
 		return ()=>{
       		console.log(this.a); //10
 		}
	}
}
obj.b(); 
obj.c()();

④ 箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响
⑤ 箭头函数没有原型属性（prototype）
⑥ 箭头函数不能当做Generator函数,不能使用yield关键字

六、promise什么？怎么使用？

Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。

使用详情请查看文章：https://www.cnblogs.com/sweeeper/p/8442613.html

其他问题

浏览器的内核

①IE浏览器内核：Trident内核，也是俗称的IE内核；
②Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
③Firefox浏览器内核：Gecko内核，俗称Firefox内核；
④Safari浏览器内核：Webkit内核；
⑤Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
⑥360浏览器、猎豹浏览器内核：IE+Chrome双内核；
⑦搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
⑧百度浏览器、世界之窗内核：IE内核；
⑨2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

最后，说一下对前端学习的计划~~

最近的面试总结到此结束，往后再更新吧…