拼多多前端面经汇总(附前端面试框架图)
16009
2021.01.01
2021.01.01
发布于 未知归属地

下面是我总结的前端面试中经常被面试官问到的知识点,基本属于必考点,如果掌握基本可以稳定通过一面,个人感觉二面也会覆盖至少 80%,还需要自己对项目和框架有较为深入的了解。

前端面试思维导图下载

微信图片_20210101194423.png

下面汇总了一些小伙伴的拼多多面试经历,供大家参考,祝愿大家收获自己满意的 offer :)

  1. 一面

    1. @杜小白
    2. @leexiaoran
    3. XD201906201525415
    4. @阿橙要加油~
    5. @Asulemoon
    6. @我也想要offer啊啊啊啊
  2. 二面

    1. @杜小白
    2. @leexiaoran
    3. @阿橙要加油~
    4. @我也想要offer啊啊啊啊
  3. 三面

    1. @杜小白
    2. @leexiaoran
  4. 感受

    1. @leexiaoran

一面

@杜小白

作者:杜小白

首先自我介绍,然后提问。

  1. css 中的水平居中的不同方式
  2. css 中的伪类:before 与 after
  3. html 中的 meta 标签是用来做什么的?
  4. 有做过 H5,移动端的页面吗?
  5. media-query 用过吗?
  6. 用的 ES6 的语法吗?
  7. promise 是什么意思?
  8. 后台拿数据是使用什么?原生的 ajax 对象了解吗?原生的 ajax 用 promise 封装一下要怎么做?
  9. react 的版本,提到 componentWillReceiveProps
  10. react 生命周期
  11. react 的 context
  12. redux 的架构,dispach 的是什么概念
  13. git 常用命令,git rebase用过吗?
@leexiaoran

作者:leexiaoran
链接:https://segmentfault.com/a/1190000022616537
来源:segmentfault

  • react 16 生命周期有什么改变
  • 详细的介绍一下 getDerivedStateFromProps
  • 你在项目中如何做性能优化的
  • flex: 0 1 auto; 是什么意思?
  • less 的 & 代表什么?
  • 算法题:求最大公共前缀,如 ['aaafsd', 'aawwewer', 'aaddfff'] => 'aa'
  • interface 和 type 的区别
  • 有用状态管理吗?
  • 有用 ssr 吗?
  • node 熟悉吗?
XD201906201525415

作者:XD201906201525415

  1. 介绍自己 为什么选前端

  2. 什么是深拷贝

  3. js基本数据类型 和 引用数据类型

  4. 怎么判断是什么数据类型 怎么判断是否为数组

  5. 什么是原形链 如何创建一个函数 new 一个函数的时候发生了什么

  6. 什么是闭包 闭包的缺点 为什么会有内存溢出

  7. 防抖 节流 并写出任意一个

  8. 写代码: 有一个数组是 1-100 里的 98 个数字 无重复 无序 如何判断出缺少的两个元素是什么 用 index of 判断

  9. vue 的生命周期

  10. vue 的双向绑定 vue 的通信方式

  11. vue3.0 有了解吗

  12. css 盒模型

  13. 怎么画出一个三角形

  14. ie 盒模型和 w3c 盒模型的区别 如何使用ie的盒模型

  15. 为什么选择 vue

  16. es6 特性 let const var 区别

  17. 有什么要问的吗

@阿橙要加油~

作者:阿橙要加油~

自我介绍

  • 介绍一下简历里的项目
  • 你们团队有多少人,项目有多少人
  • 你在这个团队和项目中的定位是什么?
  • 有遇到什么挑战吗?怎么解决的?
  • 压力大吗?能接受拼多多的工作压力吗
  • 意向工作城市是哪儿呀
  • 说一下这个小程序的项目
  • 其中eslint主要做了些什么
  • 之前某段实习经历里主要做了什么
  • 技术栈是什么

基础

  • 说一下vue和react的区别
  • vue3的区别是什么
  • 说一下babel转换的原理是什么?(回答了AST)
  • 详细说一下AST?写一下AST语法树转换过程和结构

代码

  • 下面代码输出是什么?
javascript
function fn() {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          reject('error');
      }, 1000);
  })
}
const foo = async () => {
   try {
     await fn();
  } catch (e) {
      console.log('lala', e);  // some error
  }
}
foo();
  • 输入一个 url 地址,将参数转换为对应的 key 和 value 的 object 的其中难点在要求要考虑特殊情况的转换,如中文、%、+ 等这些
  • 将下面代码改写为 ES5
javascript
for(let i = 0; i< 3; i++) {
    setTimeout(() => {
        console.log(i);
    },100);
}
@Asulemoon

作者:Asulemoon

  • 前端学习路线,学了啥?
  • css 和 js 加载,是同步还是异步?
  • css 异步,js 同步,也可以设置js的defer或async属性将其改为异步。
  • 304 状态码
  • http 缓存。js 缓存到哪里?
  • 缓存存放的位置分为内存缓存和硬盘缓存。js 和图片等解析执行后存入内存缓存,css 存入硬盘缓存。
  • 解构赋值
  • 实现一个父元素里两个子元素,父元素宽度固定,子元素铺满父元素。
  • 用 flex,设置子元素 flex-grow 和 flex-shrink 为 1。
  • 对象列表转为树结构
[
    {'id':'1','value':'1','parentId':''},
    {'id':'2','value':'2','parentId':'1'},
    {'id':'3','value':'3','parentId':'2'},
    {'id':'4','value':'4','parentId':'2'},
]
//{
    'id':'1',
    'value':'1',
    'child':{
    'id':'2',
    'value':'2',
    'child':[
        {
        'id':'3',
        'value':'3'
        },
        {
        'id':'4',
        'value':'4'
        }]
    }
}
@我也想要offer啊啊啊啊

作者:我也想要offer啊啊啊啊

CSS

  1. 盒模型
  2. css文件中开头加*号/上下盒子重叠问题(为正值如何/负值如何)
  3. 伪类和伪元素的了解,伪类有什么作用

JS

  1. 原型链
  2. 继承
  3. 为什么3.tostring()会报错
  4. var先使用会怎样
  5. 函数表达式和函数声明有什么区别
  6. 高阶函数了解过吗
  7. 对ES6新属性用过哪些
  8. var 和function声明时的不同
  9. class的用处
  10. 改写reduce函数
  11. 数组改写flat函数,怎么做到拉伸
  12. 数组将重复的元素进行输出
  13. 输入汉字的多少多少万转成数字
  14. promise的api
  15. 三个promise完成之后怎么判断
  16. 把方法直接写到原型上有什么坏处
  17. 判断是对象上的方法还是原型上的方法

Vue

  1. 父子组件通信
  2. vue指令中v-if/v-show的区别
  3. vue的声明周期

jQuery

  1. jQuery的api方法
  2. jQuery做过动画没有
  3. jQuery
  4. 取到某id下面所有的某个class

HTTP请求头

  1. 请求的时候怎么设置不缓存

编程题

  1. spacify('hello world') // => 'h e l l o w o r l d'怎么转化

怎么实现这个'hello world'.spacify();

二面

@杜小白

同样首先自我介绍,然后提问。

  1. 实习的时候做了什么?
  2. 从什么时候开始接触前端?
  3. react 组件生命周期?
  4. 组件之间如何通信?我回答了 props 和 state,以及 react-redux
  5. redux 是怎么进行工作的?
  6. js 如何实现继承?
  7. new 这个操作做了哪些事情?
  8. js 的基本数据类型和引用数据类型分别有哪些?有什么区别?
  9. 怎么实现深拷贝?
  10. 有一个列表,实现点击某一个li标签,弹出元素内容(没答好)
  11. 什么是闭包?有什么优缺点?即特征是什么样子?
  12. js 的垃圾回收机制
  13. 假设现在有一个数组,长度是 99 位,元素是 1-100 里边的值,数组是无序的也是不重复的,怎么快速的去找到这个数组和 1-100 相比缺的元素?(没答上来)
  14. 什么是稳定排序和不稳定排序?哪些排序是稳定的,哪些是不稳定的?
  15. 快排的思路,时间复杂度
  16. css 的 position 有哪些属性值?分别是相对于谁定位的?
  17. IE 盒模型和 W3C 盒模型有什么区别?css3 中要怎么设置?
  18. 用 css 画一个三角形(没答上来)
  19. ES6 中的 let 和 const 与 var 的区别?
  20. promise
  21. 你有什么想问的?算法和数据结构要了解一下,后边可能会用的多一些
@leexiaoran
  • class 组件与函数式组件的区别
  • css 优先级
  • 避免 css 全局污染。
  • css modules 的原理
  • 有一个 a 标签,如何动态的决定他的样式。
  • require 有什么性能问题
  • 组件库如何做按需加载
  • webpack 如何实现动态加载
  • react 里有动态加载的 api 吗?
  • React.lazy 的原理是啥?
  • webpack 能动态加载 require 引入的模块吗?
  • require 引入的模块 webpack 能做 Tree Shaking 吗?
  • 设计一个input 组件需要哪些属性。
  • value 的类型是什么?
  • onChange 怎么规定 value 的类型
  • interface 和 type 的区别
  • 写一个 promise 重试函数,可以设置时间间隔和次数。function foo(fn, interval, times) {}
@阿橙要加油~
  • 说一下 vue 的路由
  • 项目默认是哪种模式
  • 有什么区别
  • 说一下 vue 的生命周期
  • 说一下父子组件的生命周期?
  • 子组件是什么时候创建的
  • 说一下 keep-alive?用过吗?原理是什么?
  • 组件通信的方式?
  • vuex 是如何实现的?实现的原理是什么?
  • 为什么要有 mutation 和 action 呢?
  • eventbus 是怎么实现的?底层原理是什么?为什么可以实现不同组件之间状态的共享?
  • 它们是什么模式?(订阅发布)
  • 手写一下订阅发布
  • 为什么会用到 apply 呢?手写一个 apply
  • 说一下 apply、bind、call 的区别
  • computed 和 watch的区别
  • 具体的区别有哪些呢?在操作方面呢?
  • vue 是怎么监听数组方法的呢?为什么能监听实现原生方法呢?
  • 你们遇到这种问题怎么解决呢?(nextTick)
  • 手写一个 vue 实现监听数组双向绑定的呢?原生方法?
  • 项目打包用的什么?
  • webpack 了解吗
  • 有什么常用的 loade 和 plugin
  • 提到了 moment.js 的 plugin,解释一下这是什么
  • webpack 的编译顺序和方式是什么样的?
  • 那么如果有两个 loader,都在这个 loader 的数组里,应该是从左往右还是从右往左编译呢?
  • 自己写过 loader 和 plugin 吗?
  • 提到了 ts-loader,写过 ts 吗?
  • 说一下 ts 和 js 有什么区别?ts 有什么好处?介绍一下 ts?
  • 对 ts 的类型系统有了解吗?
  • ES6 语法用过哪些?
  • promise 有哪些状态?
  • promise.all 和 race 有什么区别
  • 手写一个方法,结合 all 和 race,所有都 resolved/reject 时才返回,并返回所有的结果
@我也想要offer啊啊啊啊
  1. 做题
  2. 不定高的标签,在父元素中居中-
  3. 写一个 promise,怎么实现执行后面第二个 then 的第二个参数
  4. reduce 方法,及参数还可以是什么,
  5. sort 方法,返回类型可以返回布尔值吗
  6. 原生 js 添加事件,
  7. map 和 foreach 的区别,map 返回的和原数组的长度一样吗
  8. 类数组对象转数组
  9. 创建 dom 节点
  10. 如何实现深拷贝
  11. webpack 优化

三面

@杜小白
  1. 通过两轮的面试,感觉怎么样?
  2. 三方还在自己手里吗?手里有哪些公司的offer?给的薪资怎么样?你自己期望的薪资是多少?年薪达到多少呢?(HR 一直追问这个薪资,不知道自己回答的好不好。。。)
  3. 想来上海来发展,原因是什么?
  4. 在学校的成绩怎样(本硕)?
  5. 家庭情况?
  6. 家是哪里的?父母对你工作地点有意见吗?
  7. 有男朋友吗?
  8. 了解拼多多的上班时间吗?(早上 11 点上班,正常打卡下班是 8 点,中午和晚上各一小时休息时间,周六休息,周日上班,技术岗晚上 10 点到 11 点下班)
  9. 对拼多多了解多少?
  10. 有什么问题想问吗?
@leexiaoran
  • 组件平台有哪些功能?
  • 实现一个 redux:实现 createStore 的功能,关键点发布订阅的功能,以及取消订阅的功能。
  • 用 ts 实现一个 redux

感受

@leexiaoran

一面的时候其实我自己感觉答得不是特别好,连 less 的语法都忘记了,当时面下来感觉要凉了,平时写 样式的时间确实太少了。

很幸运的时候还是给我过了,二面面试官我觉得面得很专业,基本都是从浅入深的考察知识的深度,我感觉答得还可以,因为我是属于那种会的就尽量深一点,暂时不用的就很少花时间,所以我目前知识的广度很有欠缺,对于 node、ssr、移动端、小程序这些方面我的能力都很薄弱,但是面试的时候如果你不熟悉,直接说不熟悉就行,他就不会面了。

我准备面试之前对我自己的要求就是,我会的尽量不会很快就被问倒,所以我重点复习了我擅长的知识。

面下来感觉拼多多也没有想象中那么难,虽然拼多多薪资算行业内高的,不过拼多多在上海,我在杭州,另外就是强制上 6 天班,我比较忌惮这点。考虑到我和女朋友本来就是异地,要是单休,而且节假日也会比正常的少,见面的机会就更少了。

反正选 offer 这种事还是尽量综合考虑吧,团队、薪资、个人生活都应该考虑进去。

评论 (6)