梦仙飘雪

2020-11-10 19:04 已编辑前端工程师

关注

农学类专业转行做【前端】的秋招历程

本硕211，农学类专业，硕士期间方向是生物信息学（算是计算机相关吧），自学前端断断续续有一年了。
经历了两个月的秋招过程，最终勉强收到了58和shopee的意向书（虽然感觉应该都是白菜），还有几家在池子里等着开奖。

下面分享一下我的面试记录吧，希望能给其他小伙伴，尤其是我这种转行的一点参考~

10.01 更新：收到58、shopee、贝壳、好未来的意向书了

08.05 ~ 09.07

这一个月经历各种一面挂、二面挂、hr面后排序挂。最后只拿到了一个需要实习的offer，但是导师不让实习，这就只能继续面了。最***均每两天收到一封感谢信，麻木了，菜是原罪。再坚持一个月吧。

这个阶段没有把问到的问题记录下来，只能把大致能想到问得比较多的写下来。

js 有哪些数据类型（基本上一上来就会问这个）

手写一个 bind 函数 (被问超过3次)

Function.prototype.myBind = function (...args) {
    let t = args.shift()
    return (...newArgs) => {
        this.call(t, args.concat(...newArgs))
    }
}
// 面试官会问：为什么return 箭头函数，this指向什么，为什么用call

手写 call、apply 和 bind 可以参考我写的这篇博客：https://blog.csdn.net/qq_18369669/article/details/107727344

实现 Promise.all （被问2次）

Promise.myAll = function (promises) {
    return new Promise((resolve, reject) => {
        let count = 0
        const res = []
        const len = promises.length
        for (let i = 0; i < len; i++) {
            Promise.resolve(promises[i])
                .then((val) => {
                    res[i] = val
                    count++
                    if (count === len) resolve(res)
                }, (err) => {
                    reject(err)
                })
        }
    })
}

实现Promise.all 和 Promise.race，可以参考这篇博客：https://blog.csdn.net/qq_18369669/article/details/108279773

判断代码输出
- this 指向（问完后，继续问改变this指向的方法）
- 异步（问完后让你回答宏任务、微任务）
各种排序算法原理（快排问得多一点）
http 缓存策略（问到超过3次）、http2.0（问到超过2次）
vue 中双向绑定原理、路由原理（超过3次）
跨域相关、cookie相关，CORS如何带cookie
项目中用到了哪些优化的措施

09.07 字节一面

估计凉的，比较疲惫，一上来就整懵了

判断代码输出

window.data = 5;
var foo = {
  data: 6,
  click: () {
    console.log(this.data);
  }
};
div.addEventListener('click', foo.click); // undefined

事件绑定的回调函数中 this 指向 DOM 元素

var bar = foo.click;
bar() // 5

普通函数调用，this指向window

export default {
  data () {
    return {
      data: 5
    }
  },
  methods: {
    windowClick () {
      console.log(this.data)
    }
  },
  mounted () {
    window.data = 3
    window.addEventListener('click', this.windowClick) // data
  }
}

vue 组件的方法中的 this 指向该 vue 实例，而vue实例可以直接访问data数据。然后面试官问了我，data 数据是怎么挂到 vue 实例上面的，我说，new Vue() 的时候有一个 mergeOptions 的过程。。也不知道怎么说了。

异步相关
- 实现一个 JS 的sleep
```
async function sleep (time) {
    return new Promise(resolve => {
        setTimeOut(() => {
            resolve()
        }, time)
    })
}
```
没写出来，就写了async 和 setTimeout。

async 函数应该返回一个Promise
- 判断代码输出
```
var number = 5;
var scores = [98, 50, 70, 66];
scores.forEach(async a => {
  number++;
  await sleep(1000);
  console.log(number);
});
```
输出4个9，答对了

继续问，如何做才能输出6、7、8、9

我答的是，用一个自调用函数，把number传进去，创建函数作用域

其实还有一种方法，用一个let 变量（块级作用域）存number
常用DOM查询函数、getElementsByClassName 和 querySelectorAll 的区别
- getElementsByClassName 返回的是 HTMLCollection
- querySelectorAll 返回的是 NodeList
- getElementsByClassName 的结果是实时变动的
- querySelectorAll 结果不是实时变动的
区别没答出来

手写 getElementById 函数

function getElementById (node, id) {
  if (node.getAttribute('id') === id) return node
  let children = node.children
  for (let child of children) {
        let res = getElementById(child, id)
        if (res) return res
  }
}

本质上就是树的遍历，可以用广度优先或者深度优先。

状态不好，第一遍没写对，面试官提醒下，硬着头皮写，居然还写对了。

数组乱序

比较简单的算法，写的时候取随机index，忘记取整了，不知道面试官注意到没

以前总结过3种方法：https://blog.csdn.net/qq_18369669/article/details/106086809
实现一个组件

实现一个插入表格的工具框，工具框的内容主要为一个9 x 9的九宫格，通过鼠标悬浮选中，在鼠标点击的时候输出选中的行数和列数

要求写出模版、js、样式

按照 vue 的写法实现的，但是自己写的话，肯定是写一点看一下，这里相当于盲写，还没有代码补全，还是很不适应的。最后基本框架搭好了吧，细节肯定有很多问题。
反问。然后就没有了

总结：async await 还不熟

09.08 多益网络一面

基本是是问答形式，问题比较基础

印象深刻一点的是实现一个 js 的单例模式，但是qq视频，没有写代码

09.08 快手一面

项目的创新点，如何构建项目的，了解哪些构建工具，webpack的打包过程，项目优化点
实现节流、防抖，并测试

实现继承

function Parent () {  
}
function Child () {
   Parent.call(this)
}
Child.prototype = new Parent()

面试官继续问，Child.prototype = new Parent()能不能不要调用 Perent 这个构造函数，我想不到，他提醒我说Object.create，当时还是有点蒙，在面试官的提示下，一步步写出来的。这里不熟练，估计很影响打分

Child.prototype = Object.create(Parent.prototype)
// Child.prototype 是要指向一个 Parent 的实例对象，但是不调用构造函数，如何创建一个实例对象呢，Object.create(Parent.prototype)可以创建一个对象，这个对象的__proto__ 指向 Parent.prototype，就是 Parent 的实例对象了

然后让用 instanceof 验证，最后实现一个 isInstanceof

function isInstanceof(child, Parent) {
    let p = child.__proto__
    while (p) {
        if (p === Parent.prototype) return true
        p = p.__proto__
    }
    return false
}

智力题（感觉就是小学二年级的智力思考题，因为我在我弟弟的课本上见过类似的）

求A, B, C的值
   CAB
-  BAC
_________
   BCA

折腾了很久，说了一些思路，最后没有解答出来。（很气，很快就建立方程组了，但是有一个地方写错了，导致解出来是非整数，然后就被面试官的思路带乱了）

转换成加法的算式：
   BCA
+  BAC
_________
   CBA
发现 A + C 得 A、C + A 得 B，所以 A + C 不可能小于10，因为小于10的话应该得相等的值。（如果A和B相等，C就是0，C很明显不是0，因为B + B 得 C）
A + C 就是一个 10 到 20 之间的值，那么，(A + C) % 10 = A，(C + A + 1) % 10 = B
A + C 不可能大于20，也就是 A + C - 10 = A、A + C + 1 - 10 = B
两式相减得：A = B + 1
还有 A + C 进了一位，所以百位的 B + B + 1 = C
联立以上各式，解得 A、B、C 分别为 5，4，9

用两个栈实现队列

比较基础的算法，思路是push的话就往stack1里面push就行了，shift的话就从stack2里面pop出来，如果stack2为空，就把stack1的全部pop出来，并依次放到 stack2 里面，之后再从stack2里面pop出来。

写代码的时候，思路不清晰，忘了判断stack是否为空了。面试官也没说什么了
反问

总结，准备过的东西就还好，没准备过的，在面试的时候还是状态很难调整好

09.10 字节二面

双向绑定的原理

题目：实现一个双向绑定，要求修改修改input，自动更新到p上面

<input id="input" />
<p id="value" />

const data = {
    msg: ''
}
// 更新视图，即修改p标签的value
function updateView (key, val) {
    if (key === 'msg') {
        document.getElementById('value').innerHTML = val
    }
}
// 为 input 标签绑定事件
let input = document.getElementById('input')
input.addEventListener('change', function () {
    data.msg = this.value
})
function defineReactive (obj, key, value) {
    Object.defineProperty(obj, key, {
            get () {
                return value
            },
            set (newValue) {
                updateView(key, newValue)
                value = newValue
            }
        })
    }
}
function observer (obj) {
    if (typeof obj !== 'object' || obj == null) return
    for (let key in obj) {
        reactive(obj, key, obj[key])
    }
}
observer(data)

刚好看过，直接写了

然后聊到事件处理流程，事件委托

event.target、event.currentTarget 没说清楚

event.target返回触发事件的元素
event.currentTarget返回绑定事件的元素

instanceOf 原理，手动实现 function isInstanceOf (child, Parent)

链表的遍历，判断是否和 Parent.prototype 相等
如何保持cpu利用率50%

不懂
进程、线程之间的关系，死锁是什么

答了线程之间可以资源共享，进程之间能传递消息
tcp/ip协议栈、网络模型
content-type 有哪些，301、302、307状态码

303和307是对302的细划分
- 303：对于 POST 请求，表示请求已经被处理，客户端应该使用GET方法去请求Location 里的URL
- 307：对于 POST 请求，表示请求还没有被处理，客户端仍然要使用POST方法去请求Location 里的URL
node.js 中 require('xxx') 是从哪里导入的
- 路径形式
- 核心模块，如'path'，已经编译成二进制文件（没答出来）
- 第三方模块，从node_modules中找，找不到就找上层目录，在 package.json 的 main 字段确定入口，没有 main 字段，就默认index.js （没答清楚）
算法题，反转单链表

思路一下子就能找到，但是没有背过答案，写的过程中临时指针变量，还是思考了好久，最后还是写出来了
判断输出，多重bind，this指向，箭头函数能否当构造函数等

多重bind，第一次就固定了this指向，后面不会在改变了

总结：一上来就写observer，刚刚好上午看了，进程线程那一部分基本上不怎么了解，可以抽时间学习一下

09.11 虾皮一面

面向对象的三个特征，分别说一下什么意思

封装、继承、多态，什么特征就不知道了，大致瞎讲了一下
计算机网络相关问题问了很多
前端基础：
- js：异步，循环i，setTimeout 中输出什么，如何解决（块级作用域，函数作用域）
  
  节流和防抖区别、重排和重绘的区别
- css：inline-block 的 div 之间的空隙，原因及解决
判断输出
```
console.log(0 == [])
console.log([1] == [1])
```
涉及到类型转换，可以以参考：https://blog.csdn.net/qq_18369669/article/details/106607233
算法题目，非递归实现二叉树的先序遍历
```
function preOrder (node) {
    let stack = [node]
    while (stack.length > 0) {
        let cur = stack.pop()
        stack.push(cur.right)
        stack.push(cur.left)
        console.log(cur.val)
    }
}
// 注意要先 push right 和 left
```
非递归的先序遍历是比较简单的，很久没写，也是楞了半天才写出来（还好写出来了）

不过中序、后序遍历的非递归实现，就很难了，应该不会问到吧。。
算法题目，验证有效的括号

用栈实现，在面试官的指引下，完成了一些边界情况的判断

总结：这次面试还算可以，基本上答出来了。不过面试写代码还是有点害怕的。前端相关的计算机基础需要再多了解一下。

09.12 拼多多一面

两栏自适应

以前总结过：https://blog.csdn.net/qq_18369669/article/details/106427531sh

但是面试官给的DOM结构是

<div class="container">
    <div class="right"></div>
        <div class="left"></div>
</div>

right 在前，left 在后，

可以用flex：

  .container {
    display: flex;
  }
  .left {
    width: 200px;
    order: -1;
  }
  .right {
    flex: 1;
  }

也可以,left 把 margin-top 设为负，移上去：

  .left {
    width: 200px;
    height: 100px;
    margin-top: -100px;

  }
  .right {
    height: 100px;
    margin-left: 200px;
  }

其他的没有想到了，答得不好

算法：3数之和

只写了个大概，没有去重复也可以
跨域，CORS 预检请求的状态码和使用的 http method

200、OPTIONS
手写防抖，处理参数

09.12 拼多多二面

编程：找出一个DOM节点下，所有的与这个DOM节点层级相差4以上的img标签，并为它们添加一个class

就是一个dfs，

写出来后面试官问，假如有一个分支层级很深，并且里面没有img标签，岂不是要递归到底，有没有什么办法解决这个问题
```
if (child.innerHTML.indexOf('<img') !== -1) dfs(child)
```
面试官说我的方法有点hack，还有没有其他办法，我想不出来了
异步相关的判断输出，手写代码

写一个函数，传入一个数组，数组里面的promise的状态都改变后，处理所有的结果。

（类似于Promise.all，但是不触发.catch）
vue 相关问题
- computed、match、watch 有什么应该场景
- vue 优化（答了异步加载组件，keep-alive）
- webpack 介绍一下
- 项目中的问题

09.12 百度一面

移动端 1px 问题
尾调用优化
localStorage 能跨域吗
ES6 module 和 CommonJS module 的区别

判断输出

var a = {n: 1}
var b = a;
a.x = a = {m: 2}

[1, 2, 3].map(parseInt)

vue 中 $nextTick 原理（之前被美团面试官也问到过这个，没理解清楚）
pwa、serverless了解过吗（不了解）
问了一堆小程序，混合开发的问题（完全不懂，没接触过）

09.13 贝壳一、二、hr面

vuex 原理
代码：
- 去掉字符串前后的空格
- function reset (arr) {}，使得 [1,2,3,4,5,6] => [1,3,5,2,4,6]
null 和 undefined 的区别，如何让一个属性变为null（不懂什么意思）
504 如何排查
map 和 forEach 的区别
如何触发上拉刷新

09.14 字节三面

代码题（完全不会，思考了一晚上也不会，网上搜到原题，才思考清楚）

实现一个 Scheduler 类，完成对Promise的并发处理，最多同时执行2个任务

补全代码：

class Scheduler {
  constructor () {
  }
  add () {
  }
}

const timeout = (time) => new Promise(resolve => {
  setTimeout(resolve, time)
})

const scheduler = new Scheduler()

const addTask = (time, order) => {
  // scheduler.add 传入一个函数，这个函数返回一个Promise
  scheduler.add(() => timeout(time))
    .then(() => console.log(order))

}

addTask(1000, '1')
addTask(500, '2')
addTask(300, '3')
addTask(400, '4')

使得以上代码的输出顺序是：2、3、1、4

关键点是这个add方法要返回一个Promise对象，同时还要完成‘并发’控制，看了网上的结题，关键是超过限制的并发添加一个阻塞，而在任务执行完后按顺序解除阻塞。如何实现呢？把阻塞的Promise的resolve，放到一个队列里面，依次执行就可以了

async/await 版本

class Scheduler {
  constructor () {
      this.max = 2
      this.queue = []
      this.count = 0

  }
  async add (promiseCreator) {
    // 如果 当前并发数量 超出限制，就要等到有空闲了，才调用 promiseCreator
    if (this.count >= this.max) {
      await new Promise (resolve => {
        this.queue.push(resolve) // 一直要等到 resolve 执行
      })
    }
    this.count++
    let result = await promiseCreator()
    this.count--
    if (this.queue.length > 0) {
      this.queue.shift()() // resolve 在这里才会执行！！ 那这里是哪里呢，是前面的任务执行完一个就 resolve 一个
    }
    return result
  }
}

Promise 版本

class Scheduler {
  constructor () {
      this.max = 2
      this.queue = []
      this.count = 0

  }

  add(promiseCreator) {
    // 第一个 promise 作用是 增加一个阻塞
    return new Promise (resolve => {
      if (this.count < this.max) {
        // 注意 count ++ 一定要写在这里（同步执行），不能写在异步（.then）里面，表示当前并发数量增加
        this.count++
        resolve()
      } else {
        this.queue.push(resolve)
      }
    })
    .then(() => {
      // 每个任务都要执行，现在开始执行
      return promiseCreator().then(() => {
        // 执行完就 count--，表示当前并发数量减少一个
        this.count-- // 虽然这里不写也没问题，但是为了通过 this.count 能随时获取到当前并发数量，最好还是写上
        // 执行完就要触发新的任务执行，而这里可以把新任务的阻塞取消，也就是阻塞Promise的 resolve 执行掉
        if (this.queue.length > 0) {
            this.queue.shift()()
            this.count ++ // 虽然这里不写也没问题，但是为了通过 this.count 能随时获取到当前并发数量，最好还是写上
        }
      })
    })
  }
}

贪吃蛇是怎么完成碰撞触发的（忘了）
扫描二维码登录的原理
一个官网怎么优化，有哪些性能指标，如何量化
tcp 是如何确保有效传输的，拥塞机制
死锁是什么，如何预防

（卒。。）

09.15 京东一面

audio 标签的api（项目中用到了，没答好）
各种前端基础
业务场景：秒杀倒计时如何确保准确性

09.16 海康二面

主要是 js、css基础、vue 的使用

vue 请求数据放在 created 好还是 mounted 里好
vue组件间传值， $attrs 和$ listeners 了解过吗（不了解）

09.16 快手二面（挂）

如何实现 pwa
浏览器本地存储，缓存
webpack 抽离 chunk 的原理
vue keep-alive 的原理
算法：连续最大乘积（没刷过这个题真的不会，当成最大连续和了，改了一下也没改对，用暴力写了）

09.17 富途一面

常规 css、js、http
涉及到 tcp，再次问了拥塞机制（我说不记得了，用的少，面试官说没事）
代码题：深拷贝（有自己引用自己的情况）、跳台阶、验证括号

09.18 虾皮二面

js 垃圾回收机制

标记清除、引用计数
tooken 能放在cookie中吗
编码和字符集的区别
http2 哪些时候会比http1 慢（没搜到）
32位系统和64位体统的区别（额外问的问题）
1000 万个ip，如何做到O(1) 查找

09.18 深信服一面

css 继承关系

有一些属性能继承（如font-size、color），有一些则不能继承（如border）

font-size 如果为百分数，继承的是计算后的值
页面资源预加载
调试工具

09.18 字节四面

CDN
ES6 module、CommonJS module 的区别，循环引用的问题
ES5 继承和 ES6 继承的区别
代码题（难度一般）：

实现 Array.prototype.removeWhere

跳楼梯

实现 Eventemitter 类，有on、emit、off 方法

09.20 顺丰一面

flex属性
for of 可以遍历哪些对象
- 可遍历map（遍历结果每一项都是键值对数组），object（必须有Symbol.iterator属性），array，set， string等
map object 的区别
- object 一般有原型（除非Object.create(null)）
- object 只能把 String 和 Symbol 作为 key
- map 有 size
no-store 和 no-cache 的区别
- no-store 完全不允许缓存
- no-cache 允许代理服务器缓存