前端面试总结

knight_black_bob
浏览: 853050 次
性别:
来自: 北京
最近访客更多访客>>

bian1024
lli
cqh520llr
hxgdragon
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

博客分类：
面试
前端面试总结
2017/8/7
1.ajax与后台之间通信的原理
 AJAX全称为“Asynchronous JavaScript and Xml”（异步JavaScript和Xml），是指一种创建交互式网页应用的网页开发技术
使用AJAX技术最重要的就是创建XmlHttpRequest对象,关于如何创建该对象网上有很多资料.本人最常用的一个方法是
<input type="button" value="异步调用" onclick="XMLRq();" /> 
这里响应事件函数是XMLRq()，那XMLRq()的函数代码片段如下
  function XMLRq()
        {
            var xmlHttpreq = null;
            if (window.ActiveXObject)
            {
                xmlHttpreq = new ActiveXObject("Microsoft.XMLHTTP");
                //alert("xmlrequest对象创建成功")
            }
            else if (window.XMLHttpRequest) //除了IE5与IE6以外的浏览器
            {
                xmlHttpreq = new XMLHttpRequest();
                //alert("c");
            }
            if (xmlHttpreq != null) {
                xmlHttpreq.open("GET", "Ajax_response1.aspx", true);
                xmlHttpreq.onreadystatechange = setCallback;
                xmlHttpreq.send(null);

            }
            function setCallback()
            {
                if (xmlHttpreq.readyState == 4)
                {
                    if (xmlHttpreq.status == 200)
                    {
                        document.getElementById("getext").innerHTML = xmlHttpreq.responseText;
                    }
                }
            }
        }


2.css 优先级
详细解释：http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html
 外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
 一般情况下，优先级如下： （外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
 *内联样式表的权值最高 1000；
 *ID 选择器的权值为 100
 *Class 类选择器的权值为 10
 *HTML 标签选择器的权值为 1
 *选择器都有一个权值，权值越大越优先；
 *当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
 *创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
 *继承的CSS 样式不如后来指定的CSS 样式；
 *在同一组属性设置中标有“!important”规则的优先级最大
 IE 浏览器下载或者渲染的顺序可能如下：
●   IE 下载的顺序是从上到下；
●   JavaScript 函数的执行会阻塞IE 的下载；
●   IE 渲染的顺序也是从上到下；
●   IE 的下载和渲染是同时进行的；
●   在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（但并不是说所有相关联的元素都已经下载完。）
●   在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析，如果JS、CSS中如有重定义，后面定义的函数将覆盖前面定义的函数。
●   解析过程中，停止页面所有往下元素的下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。
●   Firefox 处理下载和渲染的顺序大体相同，只是在细微之处有些差别，例如：iframe 的渲染。


3.css 新增伪类
p:last-of-type         选择其父元素的最后的一个P元
p:last-child            选择其父元素的最后子元素(一定是P才行)
p:first-of-type        选择其父元素的首个P元素
p:first-child           选择其父元素的首个p元素(一定是p才行)
p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)
p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)　
p:nth-child(n)    　　选择其父元素的第N个 刚好是p的元素
p:nth-last-child(n)    ..............................................从最后一个子元素开始计数
p:nth-of-type(n)　  选择其父元素的n个元素
p:nth-last-of-type(n)   ........................从最后一个子元素开始计数
input 使用 :enabled

4.居中 一个浮动元素
	div{  
	    width: 500px;  
	    height: 300px;  
	    margin: -150px 0 0 -250px;  
	    position: absolute;  
	    left: 50%;  
	    top: 50%;  
	    background-color: yellow;   
	  }  

	div {
	position:absolute;
	top:50%;
	left:50%;
	margin:-150px 0 0 -200px;
	width:400px;
	height:300px;
	border:1px solid #008800;
	}


5.列出display 的值，说出它们的作用 relative 和absolute 定位原点
display 的值的作用： 
 block 象块类型元素一样显示。
 inline 缺省值。象行内元素类型一样显示。
 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
 list-item 象块类型元素一样显示，并添加样式列表标记。

position 的值的定位区别：
 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。 
 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位（老IE不支持）。
 relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。 
 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
 inherit 规定从父元素继承 position 属性的值。

6.css3 有哪些新特性
 CSS3实现圆角（border-radius），阴影（box-shadow），
 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
 transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
 增加了更多的CSS选择器  多背景 rgba 
 在CSS3中唯一引入的伪元素是 ::selection.
 媒体查询，多栏布局
 border-image
 
7.一个满屏 品子布局如何设计
问题详细地址：http://blog.csdn.net/lxcao/article/details/52688993
<div class="main">
 <div class="wrapper-up">
   <div class="div-square-up"></div>
 </div>
 <div class="wrapper-down">
   <div class="div-square-left"></div>
   <div class="div-square-right"></div>
 </div>
</div> 

body{
          height: 1200px;
      }
      .main {
          position: fixed;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
      }
      .wrapper-up {
          height: 50%;
      }

      .wrapper-down {
          height: 50%;
          position: relative;
      }
      .div-square-up {
          width: 50%;
          margin: 0 auto;
          border: 2px solid red;
          height: 96%;
          box-sizing: border-box;
      }

      .div-square-left {
          position: absolute;
          left: 0;
          width: 48%;
          height: 100%;
          box-sizing: border-box;
          border: 2px solid red;
      }

      .div-square-right {
          position: absolute;
          right: 0;
          width: 48%;
          height: 100%;
          border: 2px solid red;
          box-sizing: border-box;
      }




8.为什么要初始化css 样式
问题详细地址：http://blog.csdn.net/lxcao/article/details/52678973
 因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。 
	淘宝初始化代码	
	body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }  
	body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }  
	h1, h2, h3, h4, h5, h6{ font-size:100%; }  
	address, cite, dfn, em, var { font-style:normal; }  
	code, kbd, pre, samp { font-family:couriernew, courier, monospace; }  
	small{ font-size:12px; }  
	ul, ol { list-style:none; }  
	a { text-decoration:none; }  
	a:hover { text-decoration:underline; }  
	sup { vertical-align:text-top; }  
	sub{ vertical-align:text-bottom; }  
	legend { color:#000; }  
	fieldset, img { border:0; }  
	button, input, select, textarea { font-size:100%; }

9.javascript原型 原型链 ？有什么特点？
问题详细地址：http://blog.csdn.net/lxcao/article/details/52743088
              http://blog.csdn.net/camillea/article/details/50635998
在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。
JavaScript万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。
关系：instance.constructor.prototype = instance.__proto__
特点： javascript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

10. null ,undefined 的区别
问题详细地址：http://www.cnblogs.com/shazhou-blog/p/5315948.html
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN
null表示"没有对象"，即该处不应该有值。
 作为函数的参数，表示该函数的参数不是对象。
 作为对象原型链的终点。
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
 变量被声明了，但没有赋值时，就等于undefined。
 调用函数时，应该提供的参数没有提供，该参数等于undefined。
 对象没有赋值的属性，该属性的值为undefined。
 函数没有返回值时，默认返回undefined。

11.写一个通用的事件监听器函数
问题详细地址 http://blog.csdn.net/jiaqingge/article/details/54866144
	// event(事件)工具集，来源：github.com/markyun
	markyun.Event = {
	// 页面加载完成后
	readyEvent : function(fn) {
	if (fn==null) {
	fn=document;
	}
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
	window.onload = fn;
	} else {
	window.onload = function() {
	oldonload();
	fn();
	};
	}
	},

	// 视能力分别使用dom0||dom2||IE方式 来绑定事件
	// 参数： 操作的元素,事件名称 ,事件处理程序
	addEvent : function(element, type, handler) {
	if (element.addEventListener) {
	//事件类型、需要执行的函数、是否捕捉
	element.addEventListener(type, handler, false);
	} else if (element.attachEvent) {
	element.attachEvent('on' + type, function() {
	handler.call(element);
	});
	} else {
	element['on' + type] = handler;
	}
	},

	// 移除事件
	removeEvent : function(element, type, handler) {
	if (element.removeEventListener) {
	element.removeEventListener(type, handler, false);
	} else if (element.datachEvent) {
	element.detachEvent('on' + type, handler);
	} else {
	element['on' + type] = null;
	}
	},

	// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
	stopPropagation : function(ev) {
	if (ev.stopPropagation) {
	ev.stopPropagation();
	} else {
	ev.cancelBubble = true;
	}
	},

	// 取消事件的默认行为
	preventDefault : function(event) {
	if (event.preventDefault) {
	event.preventDefault();
	} else {
	event.returnValue = false;
	}
	},

	// 获取事件目标
	getTarget : function(event) {
	return event.target || event.srcElement;
	},

	// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
	getEvent : function(e) {
	var ev = e || window.event;
	if (!ev) {
	var c = this.getEvent.caller;
	while (c) {
	ev = c.arguments[0];
	if (ev && Event == ev.constructor) {
	break;
	}
	c = c.caller;
	}
	}
	return ev;
	}
	};


12.事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
问题详细地址 ：http://blog.csdn.net/lxcao/article/details/52733737
 事件用于监听浏览器的操作行为，浏览器触发动作时被捕捉到而调用相应的函数。
 事件执行三个阶段
① 事件捕获阶段 
② 处于目标阶段
③ 事件冒泡阶段
 捕获型事件是自上而下，而冒泡型事件是自下而上的，而我们程序员通常要做的就是第二阶段，完成事件的动作。而第一、三阶段由系统封装自动调用完成。
 冒泡阻止 event.stopPropagation() IE浏览器 event.cancelBubble = true; 
 
 一般在IE环境下可以省略掉（var e=arguments.callee.caller.arguments[0]||event;）直接运行即可，但是在FF下不行了，它会报e.stopPropagation没有定义，所以要事先定义，才能兼容


13.什么是闭包？ 为什么要用它？
   function  outer(){  
        var num=0;//内部变量  
       return  function add(){//通过return返回add函数，就可以在outer函数外访问了。  
            num++;//内部函数有引用，作为add函数的一部分了  
           console.log(num);  
        };  
    }  
    var func1=outer();//  
    func1();//实际上是调用add函数， 输出1  
    func1();//输出2  
    var func2=outer();  
    func2();// 输出1  
    func2();// 输出2  
 闭包是就是函数中的函数，里面的函数可以访问外面函数的变量，外面的变量的是这个内部函数的一部分。
 使用闭包可以访问函数中的变量。
 可以使变量长期保存在内存中，生命周期比较长。

14.如何判断一个对象是否属于某个类？
javascript中检测对象的类型的运算符有：typeof、constructor、instanceof
typeof：typeof是一个一元运算符，返回结果是一个说明运算数类型的字符串。如："number"，"string"，"boolean"，"object"，"function"，"undefined"（可用于判断变量是否存在）。 但 typeof 的能力有限，其对于Date、RegExp、Array类型返回的都是"object"。所以它只在区别对象和原始类型的时候才有用
instanceof 运算符：instanceof 运算符要求其左边的运算数是一个对象，右边的运算数是对象类的名字或构造函数。如果 object 是 class 或构造函数的实例，则 instanceof 运算符返回 true。如果 object 不是指定类或函数的实例，或者 object 为 null，则返回 false。instanceof方法可以判断变量是否是数组类型，但是只限同一全局环境之内，在一个页面有多个iframe的情况下，instanceof失效
constructor 属性: JavaScript中，每个对象都有一个constructor属性，它引用了初始化该对象的构造函数，常用于判断未知对象的类型。如给定一个求知的值 通过typeof运算符来判断它是原始的值还是对象。如果是对象，就可以使用constructor属性来判断其类型

判断一个对象是否属于某个类
Object.prototype.toString.call(obj) == "[object " + type + "]";

15.html5 有哪些新特性、移除了那些元素，如何处理html5新标签的浏览器兼容问题？如何区分html和html5  ？

16.css选择符有哪些？那些属性可以继承 ？优化级算法如何计算？  

17.html5 离线缓存？
问题详解地址：http://www.cnblogs.com/lovesong/p/5021992.html
HTML5离线缓存又名Application Cache，是从浏览器的缓存中分出来的一块缓存区，要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源

manifest
	CACHE MANIFEST  
	#chrome浏览器支持，火狐浏览器支持度不够好  
	#version 1  
	#author by guoquanyou  
	  
	#CACHE:其后列出的是需要缓存的内容  
	CACHE:  
	index.html  
	css/index.css  
	img/girl.jpg  
	  
	#NETWORK:其后列出的是不进行缓存的内容，每次都需要从服务器端获取  
	NETWORK:  
	*  
	  
	FALLBACK:  
	  
	img/pirate1.png img/pirate_back.png  

 applicationCache.addEventListener('updateready', function(e) {
        if (applicationCache.status == applicationCache.UPDATEREADY) {
 
            applicationCache.swapCache(); //使用新版本资源
            window.location.reload(); //刷新页面
        }
    }, false);


使用Tomcat服务器，确认C:\apache-tomcat-8.0.28\conf目录下的web.xml中已经包含以下配置： 
<mime-mapping>  
    <extension>appcache</extension>  
    <mime-type>text/cache-manifest</mime-type>  
</mime-mapping>  

18.请描述一下 cookies  sessionstorage localstorage 的区别？
问题详细地址：http://www.cnblogs.com/ellar/p/5532213.html
Web Storage有两种形式：LocalStorage（本地存储）和sessionStorage（会话存储）。这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。
 与cookie不同的是：Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此x相比cookie来说能够存储更多的数据，大概5M左右。
 LocalStorage和sessionStorage功能上是一样的，但是存储持久时间不一样。
 LocalStorage：浏览器关闭了数据仍然可以保存下来，并可用于所有同源（相同的域名、协议和端口）窗口（或标签页），
 sessionStorage：数据存储在窗口对象中，窗口关闭后对应的窗口对象消失，存储的数据也会丢失。
 注意：sessionStorage 都可以用localStorage 来代替，但需要记住的是，在窗口或者标签页关闭时，使用sessionStorage 存储的数据会丢失。
 使用 local storage和session storage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。

19. 介绍一下 css的盒子模型？
问题详细地址：http://blog.csdn.net/wzqnls/article/details/38109745
W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding











 








2017-08-04
1.vue 与 react 的区别？
 其实都是model driven思想的严格践行者，以及通过component拆分完整整个系统的分治
 1.1react基本上已经有一套遵循Flux的完整开发方案（基本上也就这一套大家默认的方式），而vue虽然有配合vuex使用，但是还有其他很多组织方式来解决，所以并不算是有固定模式，相对灵活很多，当然这个你可以看作是优势，也可以看作是不足
 1.2.react社区还是要比vue大很多
 1.3.react在view层侵入性还是要比vue大很多的
 1.4.首次渲染性能，对于大量数据来说react还是比vue有优势
 1.5.对于component的写法，react偏向于all in js，语法学习上需要下一些功夫，而vue配合vue-loader，其实在很大程度上让你不会觉得陌生--这不就是web component么。
 
 vue 
 * mvvm架构的核心及价值是 数据的双向绑定 ，引入mvvm框架应该要看下业务上是否有这类需求。目前看商家端的后台业务是比较合适的。
 * vue 不适合持续工程迭代，是因为数据是可以在view 和 model进行双向流动的，数据双向流动会带来一个问题是：当工程规模比较大时，如果处理不当，前端的行为将变得难以预测，进而就难以调试和维护了
 * 对于简单页面、小型应用，vue开发则非常高效，只需要处理好view，然后传入data就可以了。
 * vue的模块化更接近于 web component 的实现，同时与xtemplate（天猫内部nodejs模板渲染语言）的结合有更多的可能性。
 * vue源码相对简单，同时也有内部团队（手淘团队）支撑，后续业务上的调整也会更得心应手。
 react
 * react 其实也出来一段时间了，在国内真正火起来则借助于react native。而vue如果与weex（手淘正在开发的，并计划16年中旬开源）配合是否也会引爆热点？值得期待一下
 vue与react的选择，可以理解为<
 * 双向绑定及单向数据流的选择。
 * web component 与 virtual dom 的选择。

 *React 团队雄心勃勃，计划让 React 成为通用平台的 UI 开发工具，而 Vue 专注于为 Web 提供实用的解决方案
 *React，由于它的函数式特质，可以很好地使用函数式编程模式。但是对于初级开发者和初学者这也导致较大的学习难度。Vue 更易学习并能快速投入开发。
 *对于大型应用，React 社区已经创造了大量的状态管理方案，例如 Flux/Redux。Vue 本身不解决这个问题（React 内核也是），但是可以轻松地修改状态管理模式，实现一个类似的架构。Vue 有自己的状态管理方案 Vuex，而且 Vue 也可以与 Redux 一起用。
 *React 的开发趋势是将所有东西都放在 JavaScript 中，包括 CSS。已经有许多 CSS-in-JS 方案，但是所有的方案多多少少都有它的问题。而且更重要的是，这么做脱离了标准的 CSS 开发经验，并且很难和 CSS 社区的已有工作配合。Vue 的 单文件组件 在把 CSS 封装到组件模块的同时仍然允许你使用你喜欢的预处理器
 
 *vue上手比较快， 如果有AngularJS或React经验上手会更快，vue从angularjs借鉴了MVVM和directives， 从react借鉴了Component和Flux架构（vuex）,  还借鉴了W3C的Web Component。
 
  vue
	// HTML
	<div id="app">
	  <p>{{ message }}</p>
	  <button v-on:click="reverseMessage">Reverse Message</button>
	</div>
	// JS
	new Vue({
	  el: '#app',
	  data: {
	    message: 'Hello Vue.js!'
	  },
	  methods: {
	    reverseMessage: function () {
	      this.message = this.message.split('').reverse().join('');
	    }
	  }
	});

  react
	// HTML
	<div id="app"></div>
	// JS (pre-transpilation)
	class App extends React.Component {
	  constructor(props) {
	    super(props);
	    this.state = {
	      message: 'Hello React.js!'
	    };
	  }
	  reverseMessage() {
	    this.setState({ 
	      message: this.state.message.split('').reverse().join('') 
	    });
	  }
	  render() {
	    return (
	      <div>
		<p>{this.state.message}</p>
		<button onClick={() => this.reverseMessage()}>
		  Reverse Message
		</button>
	      </div>
	    )
	  }
	}
	ReactDOM.render(App, document.getElementById('app'));
  
  *想要一个同时适用于Web端和原生APP的框架，请选择React

  Vue的优势是：
	模板和渲染函数的弹性选择
	简单的语法和项目配置
	更快的渲染速度和更小的体积
  React的优势是：
	更适合大型应用和更好的可测试性
	Web端和移动端原生APP通吃
	更大的生态系统，更多的支持和好用的工具
	然而，React和Vue都是很优秀的框架，它们之间的相似之处多过不同之处，并且大部分的优秀功能是相通的：
  用虚拟DOM实现快速渲染
	轻量级
	响应式组件
	服务端渲染
	集成路由工具，打包工具，状态管理工具的难度低
	优秀的支持和社区


2.移动端下拉刷新的做法？
	<div id="wrap">
	    <!-- #pull-down为下拉加载更多的提醒 -->
	    <div id="pull-down" class="pull-down">
		<div class="pull-down-content">
		    松手加载更多内容
		</div>
	    </div>

	    <!-- .list是正文内容 -->
	    <ul class="list">
		<!-- 好长的li内容 -->
	    </ul>
	</div>


	.pull-down{
	    position:relative;overflow:hidden;height:0;
	}
	.pull-down-content{
	    position:absolute;bottom:0;
	}

	$dom.addEventListener("touchmove", function(e){
	    if($dom.scrollTop > 0){
		 // 让 $dom 元素可以正常滚动
		 return true;
	     }
	     // 阻止默认的滚动事件
	     e.preventDefault();
	     // 1. 计算 touchmove 的距离
	     // 2. 重设 $elem 的高度
	});


	$dom.addEventListener("touchend", function(e){
	    // 1. 判定 touchmove 的移动值，是否达到了可刷新的设置
	    // 2. 执行刷新 | 不刷新 的回调
	});

  
  更详细的各种状态值的演变 
  https://github.com/caijf/pull
  https://github.com/dailc/pullToRefresh-h5-iscroll




3.es6 中的 let 与 var 的区别？
	http://blog.csdn.net/hsany330/article/details/53199615
首先需要明确的是let、const、var都是用来定义变量的 
在ES6之前，我们一般都用var来定义变量，例如 ：
	function test(){
	    var i=1;
	    console.log(i);
	    console.log(j);
	    var j=2;
	}
	test();
	console.log(i);
在上面的代码中，我们可以预计到第一个console输出的是1，第二个由于变量提升输出的是undefine,而不是产生ReferenceError错误，第三个输出的还是1；也就是说在函数中定义的一个变量，在函数外部仍然是可以使用的，那么我们再来看看这一段代码：
	function test(){
	    let i=1;
	    console.log(i);
	    console.log(j);
	    let j=2;
	}
	test();
	console.log(i);
执行完后，我们会发现第一个console仍然输出了1，第二个和第三个产生了ReferenceError错误！对比之下我们会发现let的作用域比var更加严格了，有点类似于Java中的变量定义，1、必须先定义再使用，2、有着严格的作用域，变量只作用域当前隶属的代码块
在新的ES6标准中let完全可以替代var,在ES6中另外一个定义变量的关键字是 const,const 代表一个值的 常量索引 ，也就是说，变量名字在内存中的指针不能够改变，但是指向这个变量的值 可能 改变。例如：
	const names=[] ;
	names.push(“1”) ;
	console.log (names) ;
我们创建了一个拥有常量索引的数组变量，然后添加值到这个数组中，但是并不改变它的索引，所以上面的代码完全可以运行。 
但是当我们想修改索引到一个新的数组中，就会产生一个错误TypeError：
	//数组
	const names = [ ] ;
	names=[];//Uncaught TypeError: Assignment to constant variable.
	//number或String
	const i=1;
	i=2;//Uncaught TypeError: Assignment to constant variable.


4. 轮播图的原理？
  setInterval(autoplay,1000);
  动画部分包括： 
  4.1.鼠标经过第几个小圆点，就要展示第几张图片，并且小圆点的颜色也发生变化 
  4.2.图片自动轮播，（这需要一个定时器） 
  4.3.鼠标经过图片，图片停止自动播放（这需要清除定时器） 
  4.4.鼠标离开图片，图片继续自动轮播 （重新开始定时器） 
	// 动画函数 第一个参数，代表谁动  第二个参数 动多少
	// 让图片做匀速运动，匀速动画的原理是 当前的位置 + 速度  即 offsetLeft + speed
	function animate(obj,target){
	    // 首先清除掉定时器
	    clearInterval(obj.timer);
	    // 用来判断 是+ 还是 -  即说明向左走还是向右走
	    var speed = obj.offsetLeft < target ? 15 : -15;
	    obj.timer = setInterval(function(){
		var result = target - obj.offsetLeft;//它们的差值不会超过speed
		obj.style.left = obj.offsetLeft + speed + "px";
		// 有可能有小数的存在，所以在这里要做个判断             
		if (Math.abs(result) <= Math.abs(speed)) {
		    clearInterval(obj.timer);
		    obj.style.left = target + "px";
		}
	    },10);
	}
        
	var timer = null; // 轮播图的定时器
        var key = 0;// 控制播放的张数
        var circle = 0;// 控制小圆点

        timer = setInterval(autoplay,1000);// 自动轮播
        function autoplay(){
            /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,
            就要重头开始播放.  因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/
            key++; // 先++
            if(key > ulLis.length-1){// 后判断

                ul.style.left = 0; // 迅速调回
                key = 1; // 因为第6张是第一张，所以播放的时候是从第2张开始播放
            }
            // 动画部分
            animate(ul,-key*liWidth);
            // 小圆点circle   当显示第几张图片是，对应的小圆点的颜色也发生变化 

            /*同理,对小圆点也要有一个判断*/
            circle++;
            if (circle > olLis.length-1) {
                circle = 0;
            }
            // 小圆点颜色发生变化
            for (var i = 0 ; i < olLis.length;i++) {
                // 先清除掉所用的小圆点类名
                olLis[i].className = ""; 
            }
            // 给当前的小圆点 添加一个类名
            olLis[circle].className = "current";

        }

5.同步与异步的区别？
  async: false, false为同步

  var options = {  
        type: 'POST',  
        url: "test.ashx",  
        data: { "i": i },  
        async:false,  
        success: function (result) {  
            if (result.code > 0) {  
                returnvalue = "odd";  
            }  
            else {  
                returnvalue = "even";  
            }  
        },  
        dataType: "json",  
        error: function (result) {  
            alert("error");  
        }  
    };  
    $.ajax(options);   

http://www.jb51.net/article/86013.htm
同时执行多个$.getJSON() 数据混乱的问题的解决
在执行之前加$.ajaxSettings.async = false;    (同步执行)
执行你的代码之后及时恢复为$.ajaxSettings.async = true； （异步执行）


6.jsonp 后台跨域问题？ 
  根据同源策略，我自己做的一个网页 http://localhost:8080/test.html 就无法通过ajax直接获取 http://google.com 的数据
  <img>的src（获取图片），<link>的href（获取css），<script>的src（获取javascript）这三个都不符合同源策略，它们可以跨域获取数据。因此，你可以直接从一些cdn上获取jQuery，并且你网站上的图片也随时可能被别人盗用，所有最好加上水印！
   详细解说 http://www.360doc.com/content/14/1030/09/5054188_421070813.shtml
	    http://blog.csdn.net/saytime/article/details/51540876
    $.ajax({
                async : true,
                url : "https://api.douban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                jsonpCallback: 'handleResponse', //设置回调函数名
                data : {
                    q : "javascript", 
                    count : 1
                }, 
                success: function(response, status, xhr){
                    console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                    console.log(response);
                }
            });
JSONP目前还是比较流行的跨域方式，虽然JSONP使用起来方便，但是也存在一些问题： 
首先， JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。
其次，要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给<script>元素新增了一个 onerror事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。

利用jsonp访问百度天气
	$(function () {
		// 发送jsonp请求
		$.ajax({
		    type:"get",
		    url:'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=0A5bc3c4fb543c8f9bc54b77bc155724',
		    data:{
			location:$("#city").val()||"上海"
		    },
		    dataType:"jsonp",
		    success: function (data) {
			//渲染模版
			var html = template('template',{list:data.results[0].weather_data})
			$('tbody').html(html);

		    }
		});
	    });

	    

7.nodejs  的用法？

8.项目中用啥 ？
   vue +webpack ...

9.为什么辞职？
详细解说 ：https://www.zhihu.com/question/19658349
面试时直接，或者拐弯抹角，这都是面试官会问到的一个问题。我建议的回答方式是：
1.不要涉及到自己能力的，不涉及到自己人品，把真实理由讲出来就是。
2.最好有不可抗事件发生。比如公司迁外地了之类，比如公司被越南人烧了之类。

需要提醒的是：
围绕这个话题，点到为止，绝不多谈。因为你说的故事，不同的人会有不同的理解，不要给人家曲解的机会。绝不！

1、企业组织架构变动，轮岗，职位与自己的职业规划不相符
2、专业技能希望能够更好地运用于工作，当前从事的工作尽管合情但不合理
3、任何人都希望能够快速运转且前途广阔的平台，螺母和螺丝钉墨守陈规不是每个人都喜欢。


一般好一点的公司的面试官主要是想通过这个问题了解可能会有哪些因素会导致你离开公司，或者你在哪些方面可能弱一些，进而在工作中可以对你的部门领导给予一些人事方面的建议。比如关注你的工资，多跟你沟通，尽量安排接近你实现人生价值的工作。 

你可以说你们公司被收购，流程变得复杂，工资涨不上去，一直在加班等等，实话实说

10.未来的发展？
详细解说 https://www.zhihu.com/question/27141414


11.对自己的评价？
面试自我介绍 https://www.zhihu.com/question/20055939
简历中的自我评价 https://www.zhihu.com/question/20632491
客观的自我评价 https://www.zhihu.com/question/22938512?sort=created