刷《一年半经验，百度、有赞、阿里面试总结》·手记

时间 2019-11-06

标签一年半经验百度阿里面试总结手记栏目阿里巴巴繁體版

原文原文链接

在掘金上看到了一位大佬发了一篇很详细的面试记录文章-《一年半经验，百度、有赞、阿里面试总结》，为了查漏补缺，抽空就详细作了下。（估计只有我这么无聊了哈哈哈）javascript

有给出的或者有些不完善的答案，也尽力给出/完善了（可能有错，你们自行辨别）。有些很困难的题目（例如实现Promise），附带相关连接（懒癌患者福利）。css

总的来讲，将这些题目分红了“Javascript”、“CSS”、“浏览器/协议”、“算法”和“Web工程化”5个部分进行回答和代码实现。html

最后，欢迎来个人博客和我扯犊子：godbmw.com。直接戳本篇原文的地址：刷《一年半经验，百度、有赞、阿里面试总结》·手记vue

1. Javascript相关

1.1 回文字符串

题目：实现一个函数，判断是否是回文字符串java

原文的思路是将字符串转化成数组=>反转数组=>拼接成字符串。这种作法充分利用了js的BIF，但性能有所损耗：react

function run(input) {
  if (typeof input !== 'string') return false;
  return input.split('').reverse().join('') === input;
}
复制代码

其实正常思路也很简单就能实现,性能更高，可是没有利用js的特性：git

// 回文字符串
const palindrome = (str) => {
  // 类型判断
  if(typeof str !== 'string') {
    return false;
  }

  let len = str.length;
  for(let i = 0; i < len / 2; ++i){
    if(str[i] !== str[len - i - 1]){
      return false;
    }
  }
  return true;
}
复制代码

1.2 实现`Storage`

题目：实现Storage，使得该对象为单例，并对localStorage进行封装设置值setItem(key,value)和getItem(key)es6

题目重点是单例模式，须要注意的是借助localStorage，不是让本身手动实现！github

感谢@whiteyork_和@chenzesam的提醒：箭头函数没有prototypeweb

function Storage(){}

Storage.getInstance = (function(){
  var instance = null
  return function(){
    if(!instance){
      instance = new Storage()
    }
    return instance
  }
})()

Storage.prototype.setItem = function(key, value) {
  return localStorage.setItem(key, value)
}

Storage.prototype.getItem = function(key){
  return localStorage.getItem(key)
}

// 测试代码：Chrome环境
let a = Storage.getInstance()
let b = Storage.getInstance()
console.log(a === b)

a.setItem("key", 1)
console.log(b.getItem("key"))
复制代码

1.3 JS事件流

题目：说说事件流吧

事件流分为冒泡和捕获。

事件冒泡：子元素的触发事件会一直向父节点传递，一直到根结点中止。此过程当中，能够在每一个节点捕捉到相关事件。能够经过stopPropagation方法终止冒泡。

事件捕获：和“事件冒泡”相反，从根节点开始执行，一直向子节点传递，直到目标节点。~~印象中只有少数浏览器的老旧版本才是这种事件流，能够忽略。~~这里说的确实有问题，更正下：addEventLister给出了第三个参数同时支持冒泡与捕获。

感谢@junior-yang的提醒

1.4 实现函数继承

题目：如今有一个函数A和函数B，请你实现B继承A。而且说明他们优缺点。

方法一：绑定构造函数

优势：能够实现多继承

缺点：不能继承父类原型方法/属性

function Animal(){
  this.species = "动物";
}

function Cat(){
  Animal.apply(this, arguments); // 父对象的构造函数绑定到子节点上
}

var cat = new Cat()
console.log(cat.species) // 输出：动物
复制代码

方法二：原型链继承

优势：可以继承父类原型和实例方法/属性，而且能够捕获父类的原型链改动

缺点：没法实现多继承，会浪费一些内存（Cat.prototype.constructor = Cat）。除此以外，须要注意应该将Cat.prototype.constructor从新指向自己。

js中交换原型链，均须要修复prototype.constructor指向问题。

function Animal(){
  this.species = "动物";
}
Animal.prototype.func = function(){
  console.log("heel")
}

function Cat(){}
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat

var cat = new Cat()
console.log(cat.func, cat.species)
复制代码

方法3:结合上面2种方法

function Animal(){
  this.species = "动物";
}
Animal.prototype.func = function(){
  console.log("heel")
}

function Cat(){
  Animal.apply(this, arguments)
}
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat;

var cat = new Cat()
console.log(cat.func, cat.species)
复制代码

1.5 ES5对象 vs ES6对象

题目：es6 class 的new实例和es5的new实例有什么区别？

在ES6中（和ES5相比），class的new实例有如下特色：

class的构造参数必须是new来调用，不能够将其做为普通函数执行
es6 的class不存在变量提高
最重要的是：es6内部方法不能够枚举。es5的prototype上的方法能够枚举。

为此我作了如下测试代码进行验证：

console.log(ES5Class()) // es5:能够直接做为函数运行
// console.log(new ES6Class()) // 会报错：不存在变量提高

function ES5Class(){
  console.log("hello")
}

ES5Class.prototype.func = function(){ console.log("Hello world") }

class ES6Class{
  constructor(){}
  func(){
    console.log("Hello world")
  }
}

let es5 = new ES5Class()
let es6 = new ES6Class()

console.log("ES5 :")
for(let _ in es5){
  console.log(_)
}

// es6:不可枚举
console.log("ES6 :")
for(let _ in es6){
  console.log(_)
}
复制代码

这篇《JavaScript建立对象—从es5到es6》对这个问题的深刻解释很好，推荐观看！

1.6 实现`MVVM`

题目：请简单实现双向数据绑定mvvm

**vuejs是利用Object.defineProperty来实现的MVVM，采用的是订阅发布模式。**每一个data中都有set和get属性，这种点对点的效率，比Angular实现MVVM的方式的效率更高。

<body>
  <input type="text">
  <script> const input = document.querySelector('input') const obj = {} Object.defineProperty(obj, 'data', { enumerable: false, // 不可枚举 configurable: false, // 不可删除 set(value){ input.value = value _value = value // console.log(input.value) }, get(){ return _value } }) obj.data = '123' input.onchange = e => { obj.data = e.target.value } </script>
</body>
复制代码

1.7 实现`Promise`

这是一位大佬实现的Promise版本：过了Promie/A+标准的测试！！！网上能搜到的基本都是从这篇文章变形而来或者直接照搬！！！原文地址，直接戳：剖析Promise内部结构，一步一步实现一个完整的、能经过全部Test case的Promise类

下面附上一种近乎完美的实现：可能没法和其余Promise库的实现无缝对接。可是，上面的原文实现了所有的，欢迎Mark！

function MyPromise(executor){
  var that = this
  this.status = 'pending' // 当前状态
  this.data = undefined
  this.onResolvedCallback = [] // Promise resolve时的回调函数集，由于在Promise结束以前有可能有多个回调添加到它上面
  this.onRejectedCallback = [] // Promise reject时的回调函数集，由于在Promise结束以前有可能有多个回调添加到它上面

  // 更改状态 => 绑定数据 => 执行回调函数集
  function resolve(value){
    if(that.status === 'pending'){
      that.status = 'resolved'
      that.data = value
      for(var i = 0; i < that.onResolvedCallback.length; ++i){
        that.onResolvedCallback[i](value)
      }
    }
  }

  function reject(reason){
    if(that.status === 'pending'){
      that.status = 'rejected'
      that.data = reason
      for(var i = 0; i < that.onResolvedCallback.length; ++i){
        that.onRejectedCallback[i](reason)
      }
    }
  }

  try{ 
    executor(resolve, reject) // resolve, reject两个函数能够在外部传入的函数（executor）中调用
  } catch(e) { // 考虑到执行过程可能有错
    reject(e)
  }
}

// 标准是没有catch方法的，实现了then，就实现了catch
// then/catch 均要返回一个新的Promise实例

MyPromise.prototype.then = function(onResolved, onRejected){
  var that = this
  var promise2

  // 值穿透
  onResolved = typeof onResolved === 'function' ? onResolved : function(v){ return v }
  onRejected = typeof onRejected === 'function' ? onRejected : function(r){ return r }

  if(that.status === 'resolved'){
    return promise2 = new MyPromise(function(resolve, reject){
      try{
        var x = onResolved(that.data)
        if(x instanceof MyPromise){ // 若是onResolved的返回值是一个Promise对象，直接取它的结果作为promise2的结果
          x.then(resolve, reject)
        }
        resolve(x) // 不然，以它的返回值作为promise2的结果 
      } catch(e) {
        reject(e) // 若是出错，以捕获到的错误作为promise2的结果
      }
    })
  }

  if(that.status === 'rejected'){
    return promise2 = new MyPromise(function(resolve, reject){
      try{
        var x = onRejected(that.data)
        if(x instanceof MyPromise){
          x.then(resolve, reject)
        }
      } catch(e) {
        reject(e)
      }
    })
  }

  if(that.status === 'pending'){
    return promise2 = new MyPromise(function(resolve, reject){
      self.onResolvedCallback.push(function(reason){
        try{
          var x = onResolved(that.data)
          if(x instanceof MyPromise){
            x.then(resolve, reject)
          }
        } catch(e) {
          reject(e)
        }
      })

      self.onRejectedCallback.push(function(value){
        try{
          var x = onRejected(that.data)
          if(x instanceof MyPromise){
            x.then(resolve, reject)
          }
        } catch(e) {
          reject(e)
        }
      })
    })
  }
}

MyPromise.prototype.catch = function(onRejected){
  return this.then(null, onRejected)
}

// 如下是简单的测试样例：
new MyPromise(resolve => resolve(8)).then(value => {
  console.log(value)
})
复制代码

1.8 Event Loop

题目：说一下JS的EventLoop

其实阮一峰老师这篇《JavaScript 运行机制详解：再谈Event Loop》已经讲的很清晰了（手动赞）！

这里简单总结下：

JS是单线程的，其上面的全部任务都是在两个地方执行：执行栈和任务队列。前者是存放同步任务；后者是异步任务有结果后，就在其中放入一个事件。
当执行栈的任务都执行完了（栈空），js会读取任务队列，并将能够执行的任务从任务队列丢到执行栈中执行。
这个过程是循环进行，因此称做Loop。

2. CSS相关

2.1 水平垂直居中

题目：两种以上方式实现已知或者未知宽度的垂直水平居中

第一种方法就是利用CSS3的translate进行偏移定位，注意：两个参数的百分比都是针对元素自己计算的。

.wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
复制代码

第二种方法是利用CSS3的flex布局，父元素diplay属性设置为flex，而且定义元素在两条轴线的布局方式均为center

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.wrap .box {
  width: 100px;
  height: 100px;
}
复制代码

第三种方法是利用margin负值来进行元素偏移，优势是浏览器兼容好，缺点是不够灵活（要自行计算margin的值）：

.wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
}
复制代码

2.2 “点击”改变样式

题目：实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置。

利用event.target能够判断是不是指定元素自己（判断“空白处”），除此以外，注意禁止冒泡（题目指明了“容器内”）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style> #app { min-width: 100vw; min-height: 100vh; } #app .icon{ display: inline-block; cursor: pointer; } </style>
</head>
<body>
  <div id="app">
    <span class="icon">123456</span>
  </div>
  <script> const app = document.querySelector("#app") const icon = document.querySelector(".icon") app.addEventListener("click", e => { if(e.target === icon){ return; } // 非空白处才去除 border  icon.style.border = "none"; }) icon.addEventListener("click", e => { // 禁止冒泡 e.stopPropagation() // 更改样式 icon.style.border = "1px solid red"; }) </script>
</body>
</html>
复制代码

3. 浏览器/协议相关

3.1 缓存机制

题目：说一下浏览器的缓存机制。

浏览器缓存分为强缓存和协商缓存。缓存的做用是提升客户端速度、节省网络流量、下降服务器压力。

强缓存：浏览器请求资源，若是header中的Cache-Control和Expires没有过时，直接从缓存（本地）读取资源，不须要再向服务器请求资源。

协商缓存：浏览器请求的资源若是是过时的，那么会向服务器发送请求，header中带有Etag字段。服务器再进行判断，若是ETag匹配，则返回给客户端300系列状态码，客户端继续使用本地缓存；不然，客户端会从新获取数据资源。

关于过程当中详细的字段，能够参考这篇《http协商缓存VS强缓存》

3.2 从URL到页面生成

题目：输入URL到看到页面发生的全过程，越详细越好

DNS解析
创建TCP链接（3次握手）
发送HTTP请求，从服务器下载相关内容
浏览器构建DOM树和CSS树，而后生成渲染树。这个一个渐进式过程，引擎会力求最快将内容呈现给用户。
在第四步的过程当中，<script>的位置和加载方式会影响响应速度。
搞定了，关闭TCP链接（4次握手）

3.3 TCP握手

题目：解释TCP创建的时候的3次握手和关闭时候的4次握手

看这题的时候，我也是忽然懵（手动捂脸）。推荐翻一下计算机网络的相关书籍，对于FIN、ACK等字段的讲解很赞！

3.4 CSS和JS位置

题目：CSS和JS的位置会影响页面效率，为何？

先说CSS。CSS的位置不会影响加载速度，可是CSS通常放在<head>标签中。前面有说DOM树和CSS树共同生成渲染树，CSS位置太靠后的话，在CSS加载以前，可能会出现闪屏、样式混乱、白屏等状况。

再说JS。JS是阻塞加载，默认的<script>标签会加载而且当即执行脚本，若是脚本很复杂或者网络很差，会出现好久的白屏。因此，JS标签通常放到<body>标签最后。

如今，也能够为<script>标签设置async或者defer属性。前者是js脚本的加载和执行将与后续文档的加载和渲染同步执行。后者是js脚本的加载将与后续文档的加载和渲染同步执行，当全部元素解析完，再执行js脚本。

4. 算法相关

4.1 数组全排列

题目：如今有一个数组[1,2,3,4]，请实现算法，获得这个数组的全排列的数组，如[2,1,3,4]，[2,1,4,3]。。。。你这个算法的时间复杂度是多少

实现思路：从“开始元素”起，每一个元素都和开始元素进行交换；不断缩小范围，最后输出这种排列。暴力法的时间复杂度是，递归实现的时间复杂度是

**如何去重？去重的全排列就是从第一个数字起每一个数分别与它后面非重复出现的数字交换。**对于有重复元素的数组，例如：[1, 2, 2]，应该剔除重复的状况。每次只须要检查arr[start, i)中是否是有和arr[i]相同的元素，有的话，说明以前已经输出过了，不须要考虑。

代码实现：

const swap = (arr, i, j) => {
  let tmp = arr[i]
  arr[i] = arr[j]
  arr[j] = tmp
}

const permutation = arr => {
  const _permutation = (arr, start) => {
    if(start === arr.length){
      console.log(arr)
      return
    }
    for(let i = start; i < arr.length; ++i){
      // 全排列：去重操做
      if(arr.slice(start, i).indexOf(arr[i]) !== -1){
        continue
      }
      swap(arr, i, start) // 和开始元素进行交换
      _permutation(arr, start + 1)
      swap(arr, i, start) // 恢复数组
    }
    return 
  }
  return _permutation(arr, 0)
}

permutation([1, 2, 2])
console.log("**********")
permutation([1, 2, 3, 4])
复制代码

4.2 背包问题

题目：我如今有一个背包，容量为m，而后有n个货物，重量分别为w1,w2,w3...wn，每一个货物的价值是v1,v2,v3...vn，w和v没有任何关系，请求背包能装下的最大价值。

这个还在学习中，背包问题博大精深。。。

4.3 图的连通份量

题目：我如今有一个canvas，上面随机布着一些黑块，请实现方法，计算canvas上有多少个黑块。

这一题能够转化成图的联通份量问题。经过getImageData得到像素数组，从头至尾遍历一遍，就能够判断每一个像素是不是黑色。同时，准备一个width * height大小的二维数组，这个数组的每一个元素是1/0。若是是黑色，二维数组对应元素就置1；不然置0。

而后问题就被转换成了图的连通份量问题。能够经过深度优先遍历或者并查集来实现。以前我用C++实现了，这里再也不冗赘：

5. Web工程化

5.1 Dialog组件思路

题目：如今要你完成一个Dialog组件，说说你设计的思路？它应该有什么功能？

能够指定宽度、高度和位置
须要一个遮盖层，遮住底层内容
由头部、尾部和正文构成
须要监听事件和自定义事件，非单向数据流：例如点击组件右上角，修改父组件的visible属性，关闭组件。

关于工程化组件封装，能够去试试ElementUI。这个是ElementUI的Dialog组件：Element-Dialog

5.2 React的Diff算法和虚拟DOM

题目： react 的虚拟dom是怎么实现的

原答案写的挺好滴，这里直接贴了。

首先说说为何要使用Virturl DOM，由于操做真实DOM的耗费的性能代价过高，因此react内部使用js实现了一套dom结构。
在每次操做在和真实dom以前，使用实现好的diff算法，对虚拟dom进行比较，递归找出有变化的dom节点，而后对其进行更新操做。
为了实现虚拟DOM，咱们须要把每一种节点类型抽象成对象，每一种节点类型有本身的属性，也就是prop，每次进行diff的时候，react会先比较该节点类型：
假如节点类型不同，那么react会直接删除该节点，而后直接建立新的节点插入到其中；
假如节点类型同样，那么会比较prop是否有更新，假若有prop不同，那么react会断定该节点有更新，那么重渲染该节点，而后在对其子节点进行比较，一层一层往下，直到没有子节点。
复制代码

参考连接：React源码之Diff算法

最后，欢迎来个人博客和我扯犊子：godbmw.com。直接戳本篇原文的地址：刷《一年半经验，百度、有赞、阿里面试总结》·手记