shopee ｜前端｜提前批一面+秋招一面二面凉经｜2021 ｜
腐烂的橘子
11823
2020.10.17
2021.01.28
发布于 未知归属地
ShopeeJavaScript前端我要上推荐腐烂的橘子求职面试

shopee公司.jpg

shopee 的提前批刚开始的时候就投了，当时刚学前端，刚开始面试，啥都不会，真正体会到了什么叫“一问三不知”😭……

一面没有任何悬念的挂掉之后，又投了秋招的前端，经过一段时间的学习，还是能明显感觉到自己的进步的。不过最终二面还是凉凉了。

面了好多也凉了好多，怪自己学习前端的时间太短，基本功不扎实。

所以说，这篇面经还是一篇“凉经”，不过几乎完全还原了当时的场景。

提前批一面（40 分钟）

  • 自我介绍（谈到了数据结构的课程）
  • 那你讲一下树的遍历吧。
  • 讲一下 http 协议。
  • 讲一下 http 请求常用的头，比如和缓存相关的头，以及其他的。
  • 常见的相应码有哪些？
  • 讲一下浏览器的缓存机制？
  • 讲一下 https 的原理？
  • 你了解 CDN 吗？讲一下。（不会，从这里开始，下面的问题感觉基本都崩了）
  • 问一下 js 的问题吧，说一下 js 的作用域。
  • ES6 你了解吗？
  • 箭头函数和非箭头函数有什么区别？（这个我会）
  • 讲一下 js 中 this 的绑定规则？（说了一大堆，也没太讲清楚）
  • 对模块化有了解吗？（不了解）
  • js 中的异步有哪些？（只知道 setTimeout）
  • 有用过 promise 吗？（没有）
  • 你了解的 MVVM 框架有哪些？（什么是 MVVM 框架……）
  • Vue 的生命周期有了解吗？（不了解 Vue，了解 React）
  • 讲一下你对虚拟 DOM 的了解吧。
  • 问你一下 CSS 的问题吧，讲一讲文档流，和 position 属性有哪些值？（position 的值？不可能会的😥）
  • 讲一讲 CSS 选择器。（不会）
  • 你写过样式吗？（写过，忘了）
  • BFC 你知道吗？（不知道）
  • 你写过正则表达式吗？写出如下 url：https://shopee.com/xxx 的正则表达式（憋了半天没憋出来）
  • 讲一下深拷贝吧（面试官已经彻底无语了，但是仍然很有耐心地问我）
  • 手写一下深拷贝吧（其实根本就不怎么会，不过硬是坚持写了 8 分钟，并且面试官还耐心提示需要拷贝的除了对象还有数组，感动）

面试官最后说还是需要加强一下基本功……非常和蔼的面试官，非常耐心，只可惜我太太太菜了，一面凉凉。之后又投递了秋招，让面试官看到我的成长！😁

秋招一面（35min）

  • 自我介绍
  • 你是一个非计算机专业的学生，当初是如何对计算机产生兴趣的？
  • 网页的渲染流程，精确到标签
  • 如何实现垂直水平居中？
  • 简述下浏览器的重绘与重排？
  • 哪些操作会触发重绘？
  • CSS 优先级？
  • 解释下 CSS 盒模型？
  • 使用什么属性来切换盒模型和替代盒模型？
  • 解释下 js 作用域及作用域链？
  • 解释下函数原型和原型链？
  • js 中的事件循环机制？
  • 聊聊宏任务和微任务？
  • 对 JavaScript 的设计模式有了解吗？
  • 发布订阅者模式有了解吗？
  • 写代码：递归实现数组求和？
  • 用过 webpack 吗？
  • webpack 的工作机制？
  • 含 JSX 文件如何最终编译成浏览器可以识别的 JS 文件，通过什么工具来完成这个工作的？（说了 createElement，说了 babel，但是都不满意，不知道面试官想问什么，可能是问 webpack？）
  • npm 运行期间，webpack 做了什么事情？
  • webpack 中的什么功能完成了文件转换（loader，当时硬是没答上来😶）
  • loader 和 plugin 的工作原理？

秋招二面（40min）

  • 自我介绍
  • 你是从什么时候接触前端的？
  • 为什么学习前端？
  • 问项目，介绍了下项目，后端怎么实现的，没有深入问。
  • 聊聊 graphQL（简历中有写），有什么优点？

下面主要开始聊一些 js 的代码题了。下面除了问题，也写了一些自己后来的总结，如果有问题欢迎指正。总之答得不太好，欲哭无泪，挖的坑掉进去好多😂

1. 以下代码输出什么？

var a = {}
var b = {}
a[b] = 3

思路

先说答案：{ '[object Object]': 3 }

这个 '[object Object]' 是怎么来的呢？

先来看下下面几个例子：

var a = {}
var b = 2
a[b] = 3
console.log(a) // { '': 3 }

var a = {}
var b = [1,2] 
a[b] = 3
console.log(a) // { '1,2': 3 }

var a = {}
var b = []
console.log(a) // { '': 3 }

这个问题涉及的知识点是对象的字面量，回答该问题时需要把握以下两点：

  • 我们知道 console.log(a) 肯定返回 {? : 3}，这个 ? 处首先应该是一个字符串类型；
  • ? 处其实需要将 b 转化为字符串，即 ({}).toString()，由于 b 是对象，应该返回 [object type]，而这里 type 是 Object，所以最终返回 { '[object Object]': 3 }。

2. 连等问题，以下代码输出什么？

(function(){
    var x = y = 1;
})();
console.log(y);    // 1
console.log(x);    // ReferenceError: x is not defined

上面的代码相当于：

var y = 1;
function fn() {
    var x = y;
}

3. this 指向问题，以下代码输出什么？

var a = 10
var obj = {
  a: 20,
  say: () => {
    console.log(this.a)
  }
}
obj.say() // 10
var anotherObj = { a:30 }
obj.say.apply(anotherObj) // 10

4. React 基础

import React from “react”

const Comp = ()=>{

    return <div>comp</div>

}

问：为什么要 import React？是什么将 JSX 语法转化成 React？

二面最终还是凉凉了，挂掉了说明自己对于 js 的理解还是不够深刻，总之就是学习的时间还是太短了，不到四个月，实在是尽力了。未来的路还很长，继续加油吧。

评论 (6)