广州-斗游前端笔试题

这是面试的第三家公司了= =砥砺前行好吧。

说实话，笔试题手写代码真的难受 = =，面试的时候还不问我实现思路和答案（那我笔试的意义何在），面谈最后仍是三句灵魂拷问：

• 你以为你本身作前端有什么优点？
• 你以为你最有成就感的项目是？印象最深入的项目是？

话很少说了，直接上题吧！

一、对于一个宽度固定可是高度不固定的元素，如何实现水平居中和垂直居中？

html 文档

<div class="parent">
    <div class="child"></div>
</div>

• flex实现

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

• position实现

margin常见的几种写法
默认值：margin: 0;

1. margin: 10px; // 外边距离全是10px
2. margin: 10px 20px; // 上下外边距10px，左右外边距20px
3. margin: 10px 20px 30px;// 上外边距10px，左右外边距20px，下边距是30px
4. margin: 10px 20px 30px 40px; // 从左往右依次外边距方向依次是上、右、下、左

.parent{
  height:100px;
  border: 1px solid red;
  position: relative;
}
.child {
  position: absolute;
  width: 100px;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}

这里有个小提问：为何设置margin:auto;水平会居中，可是垂直却不居中呢？不是说auto是自动计算属性？

二、下面三段代码分别输出什么？而且何时输出什么？

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i)
  }, 1000 * i)
}

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i)
  }, 1000 * i)
}

for (var i = 0; i < 5; i++) {
    (function (i) {
      setTimeout(function () {
        console.log(i)
      }, 1000 * i)
    })(i)
}

答案：

1. 在极短的一段时间内输出5，随后每隔一秒输出一个5
   

// 5 5 5 5 5

1. 在极短的一段时间内输出0，随后每隔一秒结果加1
   

// 0 1 2 3 4

1. 在极短的一段时间内输出0，随后每隔一秒结果加1
   

// 0 1 2 3 4

解析：
1.首先要明白js的事件循环机制，for循环结束后才到宏观任务setTimeout，这时候i的值已经变为5了
2.let i 是块做用域，相似于

for (let i = 0; i < 5; i++) {
  let i = /* 块做用域里面的i */
  setTimeout(function () {
    console.log(i)
  }, 1000 * i)
}

所以每一次循环，i的值都是块做用域里面的值
3.当即执行函数，建立了属于本身的做用域，所以每一次执行都是不一样的i

三、下面这段代码输出了什么?

var a = 1;
var obj = {
  a: 2,
  func1: () => {
    console.log(this.a);
  },
  func2: function () {
    console.log(this.a);
  }
}

var obj2 = { a: 3 };

console.log(obj.func1());
console.log(obj.func2());

obj.func2.apply(obj2);

var newFunc = obj.func2;

newFunc();

答案：

var a = 1;
var obj = {
  a: 2,
  // 注意箭头函数的this指向是在定义的时候就绑定了而不是在执行的时候，所以func1的this指向一个空对象
  func1: () => {
    console.log(this.a);
  },
  func2: function () {
    console.log(this.a);
  }
}

var obj2 = { a: 3 };

console.log(obj.func1()); // 函数是没返回值的，首先会打印undefined，函数体里面是箭头函数this指向undefined，所以还会打印出undefined
console.log(obj.func2());// 函数是没返回值的，首先会打印undefined，函数体里面是普通匿名函数this指向obj，所以还会打印出2

obj.func2.apply(obj2);
// 显式更改this的指向到obj2，所以打印3

var newFunc = obj.func2;

newFunc();
// 在全局环境下调用func2函数，此时this指向全局变量window，打印1

四、实现一个函数：输入一个整数，求该整数的二进制表达中有多少个1？

个人答案：

// 十进制转化二进制--除2取余法
function toBinary(number) {
  let arr = []
  while (number > 0) {
    let a = number % 2
    number = (number - a) / 2
    arr.push(a)
  }
  return arr.reverse()
}
// 筛选出含有1的数组
// 一次遍历 时间复杂度是N
let a = toBinary(1223).filter(item=>item === 1)
console.log(a.length) // 得到多少个1个数

网上还有一些利用补码等解决的方式

五、实现一个函数：给定一个字符串，找出出现次数最多的字符。

个人答案：

// 暴力的2次循环，复杂度n^2
function getMostChart(str) {
  let list = [...str]; // 拆分字符串为数组
  let noRepeatList = Array.from(new Set(list)) // 合并数组中重复的元素
  let lengthList  = [] // noRepeatList每一项在list出现的次数组成的数组
  noRepeatList.map(ele => {
    let count = 0;
    list.map(item => {
      if (ele === item) {
        count++
      }
    })
    lengthList.push(count) // [ 1, 1, 2, 1, 1 ]
  })
 let max = lengthList[0]
  // 获取最大值及其下标
  for (let i = 0; i < lengthList.length; i++) {
    let current = lengthList[i];
    current > max ? max = current : null
  }
  
  // 注意这里maxIndex可能不止一个，最好仍是for循环获取最大值的下标
  let maxIndex = lengthList.findIndex(item => item === max)
  
  return noRepeatList[maxIndex]
}

getMostChart('choose') // o

个人答案不够优秀而且忽略了次数出现最多的字符可能会有多个
，好比说'ccoo'

网上利用JSON特性，时间复杂度只有N的答案

六、实现一个单向链表类，要求支持新增、删除、查找操做

答案

/**
* 定义一个节点类
*/
class Node {
  constructor(val) {
    this.val = val; // 结点值
    this.next = null; // 结点指针，指向下一项
  }
}

/**
* 定义一个单向链表类
*/

class LinkedList {
  constructor() {
    this.headNode = new Node('head'); // 初始化一个头结点
  }
    
  // 新增节点
  insert(val) {
    let currentNode = this.headNode,
        lastNode = new Node(val);
    
    while(true) {
      if(currentNode.next == null) {
        break;
      } else {
        currentNode = currentNode.next;
      }
    }
    
    lastNode.next = currentNode.next;
    currentNode.next = lastNode;
  }
    
  
    
  // 删除链表某一项
  remove(val) {
    let currentNode = this.headNode;
    
    while(true) {
      if(currentNode.next.val == val) {
        break;
      } else {
        currentNode = currentNode.next;
      }
    }
    
    currentNode.next = currentNode.next.next;
  }
  
  // 查找
  search(val) {
    let currentNode = this.headNode;
    while (currentNode.next) {
          currentNode = currentNode.next;
          if (currentNode.val === val) {
            return currentNode
          }
        }
      }
  }
}


var nodes = new LinkedList();

nodes.insert('a');
nodes.insert('b');
nodes.insert('c');
console.log(nodes.search('c')); // Node { val: 'orange', next: null }

个人答案不必定是正确且优秀的，解析可能也有写不充分的地方，欢迎你们留言指正或补充