2020.10.30 笔试题简单，面试一问三不知

这次是去南方电网进行的一次面试，结果是没过，首先是笔试。笔试题还算是简单。

选择题

1. 要动态改变层中内容可以使用的方法有：

A.innerHTML   B.innerText  C.通过设置层的隐藏和显示来实现  D.通过设置层的样式属性的display属性

答案： AB，这题的重点是动态改变，而CD答案都是设置隐藏层，这并不能改变。

2. 看下面的代码，给出输出结果

for(var i=1;i<=3;i++){
  setTimeout(function(){
    console.log(i)
  },0);
};
A.444  B.123  C.321  D.111

答案：A，setTimeout是异步函数，是等所有的立即执行函数执行后，才执行的一个方法，所以当setTimeout执行的时候，循环已经很快的结束了。当i=4的时候，循环才会结束，所以输出的为4。

3. 看下面的代码，给出输出结果

var a=1;
function foo(){
  if(!a){
    var a=2;
  }
  alert(a)
};
foo();
A.1  B.2  C.undefined  D.报错 

答案：B，这里要注意的是var的变量提升，foo函数内的if内的a，其实不是函数外的全局变量a，而是重新声明的变量，这段代码可以改写成var a; if(!a){ a=2; }，所以这个判断的a的值是undefied，并不是1，所以if的结果为true，这时a就变成了2。所以alert的结果就是2。

问答题

1. 请用CSS实现垂直水平居中，HTML结构如下：

<div class="wrapper">
  <div class="content"></div>
</div>

这个题目的答案很多，这里我用flex实现的。这里必须设定高度和宽度，要不然没办法确定是不是居中。这里我把两个div的border都表示出来了，十分清晰。

.wrapper{
  border: 1px solid red;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content{
  border: 1px solid blue;
  width: 100px;
  height: 100px;
}

效果图：

2. 下面这个ul，如何点击每一列的时候，都alert其index？

<ul id="test">
  <li>这是第一条</li>
  <li>这是第二条</li>
  <li>这是第三条</li>
</ul>

实现（原生js）：

let ul = document.querySelectorAll("#test li");
for(let i=0;i<ul.length;i++){
  ul[i].onclick= function(){
    alert(i) 
  }
}

3. 写一个function，清除字符串前后的空格。
   我用的是最简单的正则。

function trim(str){
  str = str.replace(/^\s+|\s+$/g, "")
}

4. 用js实现随机选取10-100之间的10个数字，存入一个数组，并排序。
   这个算法是没怎么搞明白，只能硬记

function sortNumber(a, b){
  return a-b//升序
}
function getRandom(iStart, iEnd){
  var iChoice = iStart - iEnd + 1
  return Math.abs(Math.floor((Math.random()* iChoice))) + iStart
}
var iArray = []
for(let i=0; i <10; i++){
  iArray.push(getRandom(10, 100))
}
iArray.sort(sortNumber)
console.log(iArray)

5. 使用JavaScript编写一个函数，能够堆传入的常见对象进行clone（深拷贝）
   这个我之前写过，主要是对函数、数组进行筛选。

function clone(object){
  var object2
  if(! (object instanceof Obejct)){
    return object2
  }else if(object instanceof Array){
    object2 = []
  }else if(object instanceof Function){
    object2 = eval(object.toString()) //函数就变成字符串再用eval运行
  }else if(object instanceof Object){
    object2 = {}
  }
  //循环遍历object，再一个个的复制到object2中去
   for(let key in object){
    object2[key] = clone(object[key])
  }
  return object2
}

笔试的问题差不多就结束了，还算是比较正常的笔试题，但是面试题就有点搞不定，问题量也比较大。但是当时没有记下来导致都忘记了。

1. canvas和svg的区别（主要是可操作性，矢量和标量的区别）
2. 以前封装过jQuery的哪些插件？
3. 能不能用原生js实现一个图表（echarts类型的，从数据处理开始到图形展示，以及一些细节的优化都要到位）？
4. vue的父子通信，他们的created和mounted函数的运行顺序分别是从哪里再到哪里？（我完全不知道，没有仔细了解过）
   ……and so on
   反正蛮失败的一次面试，毕竟啥也不会，啥也不对。