首先，先点一首凉凉送给自己。(sad
今天面试的流程是一面（和蔼的中年大叔） 二面（面向福气的技术总监） 三面 人事（没面到人事已经flop
好，先总结一下一面的前端问题，气氛很好，都是些基础的问题，想到什么就写什么吧。
1、JS怎么获取异常？
JavaScript 异常的处理
编程语言都会提供处理异常的方法，就是JavaScript就是 try catch 语句，通过try方法捕抓异常，捕抓到异常后会退出try 代码块（即{//code}），然后执行catch语句，catch有一个Error对象的实参，在catch代码块能引用这个Error对象。
try{ //your code }catch(e){ //while raise a error ,will exc this code } catch(e){ //while raise a error,and pre catch has beed run ,will exc this code } catch(e){ //while raise a error,and pre catch has beed run ,will exc this code }final{ //whether raise a error, this code will be run }
try语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
finally 语句在 try 和 catch 之后无论有无异常都会执行。
注意： catch 和 finally 语句都是可选的，但你在使用 try 语句时必须至少使用一个。
参考：http://blog.csdn.net/hulk_oh/article/details/52957962
2、call()和apply()的区别
avaScript中的每一个Function对象都有一个apply()方法和一个call()方法，它们的语法分别为：
/*apply()方法*/ function.apply(thisObj[, argArray]) /*call()方法*/ function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);
它们各自的定义：
apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
它们的共同之处：
都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。
它们的不同之处：
apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。
call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。
实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。
参考：https://www.cnblogs.com/lengyuehuahun/p/5643625.html
3、H5的新标签
1. H5新标签
语义标签：
<article>定义文章</article>
<aside>定义文章侧边栏</aside>
<figure>定义一组媒体对象以及文字内容</figure>
<figcaption>定义figure的标题</figcaption>
布局页面时用的语义标签：
<nav>定义导航</nav>
<header>头部</header>
<section>定义文档中的区段 区域</section>
<footer>尾部</footer>
input其他的类型：
1. text 文本输入框
2. password 密码
3. button 按钮
4. checkbox 复选
5. radio 单选
6. submit 提交
7. reset 重置
8. file 文件
9. email 输入邮箱地址 检测@
10. url URL地址
11. number 只能输入数字 还有e
12. range 范围 默认0~100
required 必须填写
placeholder 占位符
功能标签：
<video src="" autoplay自动播放 controls控制播放 loop是否重复播放 preload是否自动加载>定义视频</video>
<audio src="">定义音频</audio>
<mark>标记</mark>
<iframe src="" frameborder="0">内嵌网页框架</iframe>
<canvas>定义图形提供画布</canvas>
2.流式布局
即百分比布局。（宽度， 高度，边距，rem，定位值）
尺寸百分比 = 目标元素的宽度（高度）/ 父级的宽高
定位值百分比 = 目标元素的定位值 / 父级的宽高
margin和padding / 父级的宽度
em rem
em: 针对父级来设置自身
rem: 针对html
3.媒体查询
可以根据不同屏幕尺寸，动态的修改网页布局以及样式，是响应式网站不可缺少的一部分
only 可以省略 多个条件用and相连
@media only screen and (min-500px) and (max-700px){......}
link:
<link rel="stylesheet" href="" media="screen and (min-500px) and (max-700px)">
响应式网站：由两种办法完成响应式网站, 流式布局和媒体查询，通常情况下相辅相成共同完成响应式网站。
4.前缀
腾讯：国内唯一有自己内核的公司，X5。（X5的浏览器内核是基于早起的webkit内核开发出来的，而后自己优化。QQ浏览器 微信）
-webkit-: 谷歌前缀，谷歌内核（猎豹 360 safari）
-o-: 欧朋 （已经摒弃自己的内核，转战谷歌的阵营）
-ms-: 微软 ie 斯巴达
-moz-: 火狐 ff
参考：http://blog.csdn.net/catherine_fq/article/details/51884196
4、三种现在流行框架
一、Vue.js：
其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。
Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。
Vue.js的特性如下：
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
优点： 1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。
3. 组合：用解耦的、可复用的组件组合你的应用程序。
4. 紧凑：~18kb min+gzip，且无依赖。
5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
缺点： 1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3. 不支持IE8：
二、angularJS：
angularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
angularJS的特性如下：
1.良好的应用程序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试
优点： 1. 模板功能强大丰富，自带了极其丰富的angular指令。
2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
3. 自定义指令，自定义指令后可以在项目中多次使用。
4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
缺点： 1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
5. DI 依赖注入 如果代码压缩需要显示声明.
三、React：
1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可以与已知的库或框架很好地配合。
优点： 1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6. 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
缺点： 1. React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。
5、ES6相关问题
箭头操作符
如果你会C#或者Java，你肯定知道lambda表达式，ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。
我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个function，甚是繁琐。当引入箭头操作符后可以方便地写回调了
var array = [1, 2, 3]; //传统写法 array.forEach(function(v, i, a) { console.log(v); }); //ES6 array.forEach(v = > console.log(v));
类的支持
ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化
//类的定义 class Animal { //ES6中新型构造器 constructor(name) { this.name = name; } //实例方法 sayName() { console.log('My name is '+this.name); } } //类的继承 class Programmer extends Animal { constructor(name) { //直接调用父类构造器进行初始化 super(name); } program() { console.log("I'm coding..."); } } //测试我们的类 var animal=new Animal('dummy'), wayou=new Programmer('wayou'); animal.sayName();//输出 ‘My name is dummy’ wayou.sayName();//输出 ‘My name is wayou’ wayou.program();//输出 ‘I'm coding...’
参考：https://www.cnblogs.com/Wayou/p/es6_new_features.html
6、怎么用localStorage获取数据？
localStorage的读取
if(!window.localStorage){ alert("浏览器支持localstorage"); }else{ var storage=window.localStorage; //写入a字段 storage["a"]=1; //写入b字段 storage.a=1; //写入c字段 storage.setItem("c",3); console.log(typeof storage["a"]); console.log(typeof storage["b"]); console.log(typeof storage["c"]); //第一种方法读取 var a=storage.a; console.log(a); //第二种方法读取 var b=storage["b"]; console.log(b); //第三种方法读取 var c=storage.getItem("c"); console.log(c); }
详细：https://www.cnblogs.com/st-leslie/p/5617130.html
7、border-radius 实现半圆？
CSS
div{ display: inline-block; border:1px solid #6baabb; 40px; height:40px; float:left; margin:0px 10px; } a{ display: inline-block; 40px; height:40px; background: #6baabb; } .Round{/*圆*/ border-radius:20px; } .LeftRound{/*左半圆*/ 20px; border-radius:20px 0px 0px 20px; } .RightRound{/*右半圆*/ 20px; border-radius:0px 20px 20px 0px; } .TopRound{/*上半圆*/ height:20px; border-radius:20px 20px 0px 0px; } .BottomRound{/*下半圆*/ height:20px; border-radius:0px 0px 20px 20px; }
页面部分
<div><a class="Round"></a></div> <div><a class="LeftRound"></a></div> <div><a class="RightRound"></a></div> <div><a class="TopRound"></a></div> <div><a class="BottomRound"></a></div>
参考：https://www.cnblogs.com/zml-mary/p/7279807.html
8、position
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
9、typeOf的属性值
alert(typeof 1); // 返回字符串"number" alert(typeof "1"); // 返回字符串"string" alert(typeof true); // 返回字符串"boolean" alert(typeof {}); // 返回字符串"object" alert(typeof []); // 返回字符串"object " alert(typeof function(){}); // 返回字符串"function" alert(typeof null); // 返回字符串"object" alert(typeof undefined); // 返回字符串"undefined"
10、JS怎么获取指定的字符串
function GetStr() { var str = "..."; var arrStr = str.split('='); var iLen = arrStr.length; for(var i=0 ; i<iLen ; i++) { if(arrStr[i].indexOf(" src") != -1) { alert(arrStr[i+1]); } } }
11、block 元素的理解
块元素(block)的特点：
1、总是在新行上开始；
2、高度，行高以及顶和底边距都可控制；
3、宽度缺省是它的容器的100%，除非设定一个宽度。
内联元素(inline)的特点：
1、和其他元素都在一行上；
2、高，行高及顶和底边距不可改变；
3、宽度就是它的文字或图片的宽度，不可改变。
12、怎么去掉字符左边的空格？
有时我们需要把字符串的空白符去掉，下面给出去除各部位空白符的方法，其实就是一个套路....
去掉字符串左侧空白
/* * 去掉字符串开头空白符 * */ function removeBeginBlank(str) { return str.replace(/^s*/g,""); /* 返回替换后的字符串 */ } var str = " hahaha"; /* 要操作的字符串 */ removeBeginBlank(str); /* * 去掉字符串开头空白符结束 * */
参考：https://www.cnblogs.com/veinyin/archive/2017/10/10/7646262.html
除了技术问题问了一些自己的学习方法，还有看过哪些书，等等。
暂时想到这些。
待续。