2018个人面试记录

首先，先点一首凉凉送给自己。(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的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。

　　　　　 5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

 

　　缺点： 1. angular 入门很容易 但深入后概念很多, 学习中较难理解.

　　          2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.

　　　　　 3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.

　　　　    4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.

　　　　    5. DI 依赖注入 如果代码压缩需要显示声明.

 

三、React：

 

　 React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

 

　  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才能写大型应用。

 

 参考：https://www.cnblogs.com/Zcqian/p/6843787.html

           http://blog.csdn.net/haoshidai/article/details/52346865

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

除了技术问题问了一些自己的学习方法，还有看过哪些书，等等。

暂时想到这些。

待续。