关于第一次web前端面试的记录

最近参加了一场面试，感觉自己题目都懂，但是说起来就是有点说不明白，所以写个博客整理以下吧。答案不少不是面试时回答的答案，只是整理一下可行答案

1、

　　如图1，使B相对于A垂直居中

图1

<style>
  /*方案一，父元素高度确定，使用高度+行高，内部只能有一行元素(可以有几个单行排列的行内盒子)*/
  #A{
    height: 100px;
    line-height: 100px;
  }
  /*方案二，父元素高度不定，使用内边距，内部不限制盒子数量*/
  #A{
    padding: 10px 0;
  }
  /*方案三，使用弹性盒子，内部不限制盒子数量*/
  #A{
    display: flex;
    height: 100px;/*最好设置，否则两个盒子会没有间隙，虽然这也可以算是居中吧*/
    align-items: center;
  }
  /*方案四，父元素高度确定，使用表格单元格格式，内部不限制盒子数量*/
  #A{
    display: table-cell;
    vertical-align: middle;
    height: 100px;
  }
</style>

<div id="A">
  <div id="B"></div>
</div>

此题答的时候没听清问题，以为是垂直水平排布呢，直接答了各内边距都是10，及一个定位+移动

2、

　　如图1，使B相对于A水平居中

<style>
  /*方案一，父元素宽度不定，使用内边距，内部不限制盒子数量*/
  #A{
    padding: 0 10px;
  }
  /*方案二，父元素宽度确定，使用文本居中，内部不限制盒子数量，只对行内/行内-块级元素起效*/
  #A{
    text-align: center;
  }
  /*方案三，父元素宽度确定，使用弹性盒子，内部不限制盒子数量*/
  #A{
    display: flex;
    width: 100px;
    /*最好设置，否则内外两个盒子会没有间隙，虽然这也可以算是居中吧*/
    justify-content: center;
    /*使用center会使内部盒子间没有间隙，使用space-around更好吧，不过对于单个盒子来说显示效果并没有区别*/
  }
</style>

<div id="A">
  <div id="B"></div>
</div>

这个答了一个弹性盒子，一个定位。

以上两个居中均可使用定位+位移实现，不过使用定位+位移后麻烦蛮多的，还是少用吧

/*水平居中*/
#A{
  width: 300px;
  position: relative;
}
#B{
  position: absolute;
  left: 50%;
  transform: tranlateX(-50%);
}

/*垂直居中*/
#A{
  height: 100px;
  position: relative;
}
#B{
  position: absolute;
  top: 50%;
  transform: tranlateY(-50%);
}

3、

　　如图2，使盒子内单行文本水平垂直居中

图2

<style>
  /*方案一，元素宽度不定/确定，高度确定，使用高度+行高+文本居中，内部只能有一行文本*/
  #A{
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  /*方案二，元素宽高不定，使用内边距，内部不限制文本行数*/
  #A{
    padding: 10px 0;
  }
  /*方案三，元素宽高不定，使用弹性盒子，内部不限制文本行数*/
  #A{
    display: flex;
    width: 100px;/*最好设置，否则盒子和文本没有间隙，虽然这也可以算是居中吧*/
    height: 100px;/*最好设置，否则盒子和文本没有间隙，虽然这也可以算是居中吧*/
    align-items: center;
    justify-content: center;
  }
  /*方案四，元素宽度确定/不定，元素高度确定，使用表格单元格格式，内部不限制文本行数*/
  #A{
    display: table-cell;
    vertical-align: middle;
    height: 100px;
    text-align: center;
  }
</style>

<div id="A"></div>

这题答了一个内边距和一个弹性盒子吧。

4、

　　清除浮动的方式

/*传统做法，写好后需要在需要清除浮动的元素上写上class名称，会添加多余的属性*/
.clearfix::after{
  display: block;
  height:;
  /*此处内容随意，"."占位比较小故写个“.”*/
  content: ".";
  clear: both:
}

/*从bootstrap中学来的，好处是html中不会有多余的属性，坏处该元素不能与弹性盒子同时使用，伪元素会占位*/
/*固有的一些需要清除浮动的类名，此处使用nav来举例*/
.nav::before, .nav::after{
  display: table;
  content: "";
}
.nav::after{
  clear: both;
}

这题答的时候逻辑比较差，如果使用打字应该好很多

5、

　　visibility: hidden;和display: none;的区别

　　visiblity是使元素不可见，但是还是在文档流中占位，display: none;是使元素消失，就像文档中没有这个标签及其子元素一样

这题回答的时候，我以为visiblity是超出裁剪呢，不过倒是没说超出裁剪，而是说了只是看不见，但是还是占着位，而display倒是完全没错，我都没去研究过，真是歪打正着哈哈哈（写博客时特地去研究了一下）。

6、

　　问：js有哪些数据类型

　　答：number、String、Boolean、Object、null、undefined

提问的时候有点蒙，什么是叫js的数据类型啊，是指int什么的吗，但是js没有啊，然后就提着胆答了这些东西，结果问的就是这个，我对于这些名词真的没什么感觉就是了。

7、

　　问：控制台会打印出什么来

var a = {b: 1, c: 2};
var d = a;
d.b = 10;
console.log(a);

　　答：会打印出{b: 10, c: 2}

　　原因：因为a是一个对象，所以在创建d的时候，赋的值的是a的内存地址，故修改d的属性就是修改它对应内存地址对象的属性，所以a也会跟着改变。

答的时候一开始还答错了，以为是复制了一个a过去呢，还好面试官提了一下才反应过来是赋了一个内存地址。

8、

　　问：控制台会打印出什么来

var a = 10;
a.pro = 10;
console.log(a);
console.log(a.pro);
console.log(a.pro + a);

var s = 'hello';
s.pro = 'world';
console.log(s.pro + s);

　　答：会打印出10, undefined, NaN, undefinedhello

　　原因：

　　　　1、a是10，故打印10

　　　　2、a是number类型变量，故找不到a.pro

　　　　3、a.pro是undefined类型，undefined是NaN，而根据ECMAScript的规则，使用算术运算符+号时，一个数据为NaN则答案为NaN

　　　　4、s.pro也是undefined类型，但是使用为字符串运算符+号时(相加数据有一个为字符串会是字符串运算符)，所有数据均会变成字符串然后连接。

我回答的时候，第一个是对的，第二、三、四个就完全懵了，只知道a不是对象所以a.pro应该是一个错误数据，所以第二、三个应该是错误信息，第四个答了个worldhello，就很蒙。

9、

　　问：控制台会打印出什么来

var test = (function(a) {
  this.a = a;
  return function(b) {
    return this.a + b;
  }
)(function(a,b){
  return a
}(3,5)));
console.log(test(7));

　　答：10

　　原因：此处是使用了两个立即执行的匿名函数+闭包。

　　　　首先，使用立即执行的匿名函数时，

(function(a){

}(3))

　　　　相当于　

function c(a) {}
c(3);

　　　　其次，闭包是指函数及函数创建时所在的词法作用域（此处从MDN抄来的），就是说这个返回的匿名函数的this.a是指它的父函数里的this.a，b是指它的参数b。

　　　　再次，

(function(a,b){
  return a
}(3,5)

　　　　该段代码会返回一个a的值回去，而a的值就是3。

　　　　最后，

var test = (function(a) {
  this.a = a;
  return function(b) {
    return this.a + b;
  }
)(3));
console.log(test(7));

　　　　该段代码的运行逻辑是，先执行一次匿名函数，存入参数a=3，之后为test变量赋值，值为function(b){...}，其中，这个function(b){...}中存着this.a=3，之后调用test函数，为其参数b赋值7，之后运行该函数，其返回结果就是10了(3+7)

面试时，回答的逻辑糟糕透了，毕竟全是匿名函数我都不知道怎么称呼。

10、

　　问：vue有哪些指令

　　答：v-html, v-bind, v-if, v-for, v-model（这时面试官叫停了，问了我下一题）

这问题问的我头蒙，什么叫指令啊，最后问了问是不是指v-html这一类的东西，面试官说是了之后就安心了，就答了下去

ps: 隔几天看vue文档，原来文档每个指令后面都有“指令”两个字，我倒是一直没注意