2020大厂前端面试题分享

圣痕
554 阅读3分钟

非全日制本科，不是科班，没有系统学习过数据结构等计算机知识，3年前端经验面试大厂过程（未收到offer，革命尚未成功，同志仍需努力！）！ 好多企业看到简历上是非全日制直接pass掉了！哎！没办法！谁让自己当时不好好学习呢！奉劝大家好好学习！

百度

  • 一面
    • 简单封装一个ajax请求类
    • 用vue封装一个穿梭数组件
    • 写出以下输出
function divide(numerator, denominator) {
  return new Promise((resolve, reject) => {
    if(typeof numerator !== 'number'|| typeof denominator !== 'number') {
      reject(new Error('Must be number!'));
    }
	console.log('After validating type...');
    if(denominator === 0) {
      reject(new Error("Cannot divide by 0!"));
    }
    console.log('After validating non-zero denominator...');
    resolve(numerator / denominator);
  });
}

divide(3, 0)
  .then(res => console.log(res))
  .catch(err => console.log(err))
  .then(r => console.log(r));
  • 二面
    • 用vue封装一个组件
    交互：输入框可以输入值，可以动态添加删除
初始化状态由使用者决定
提供拿到输入框值的方式：api，属性
    • vue 双向绑定原理
    • 使用Object.defineProperty封装一个工具方法，当修改某个object的属性时候，自动执行一个callback
    • webpack优化
    • 解析 less 文件需要加哪些loader
    • typescript 文件怎么解析，以及相关的tsconfig配置项
    • babel 配置项解释？babel 用途? env transform-runtime解析之后的差异？
    • js 迁移到ts需要做哪些事情？ts怎么做类型约束的？
    • webpack 怎么优化体积？chunck等等？
    • 前端模块化的规范实现一个实时搜索的需求？怎么去做这个优化？怎么保证结果与搜索请求一致？
  • 三面
    • 问了一些ts配置
    • 项目难点，如何解决
    • 3-5年规划
    • 项目亮点
  • HR面（挂，估计是项目经验不符合预期）

快手

  • 一面 （挂）

    • 查看以下样式

      <style>
.classA{
  color:blue;
}
.classB{
  color:red;
}
</style>
<p class="classB classA">123</p>

    • 以下dom结构中，child的offsetWidth与clientWidth分别是多少？

       <style>
 .parent {
   background: red;
   width: 100px;
   height: 100px;
   padding: 0;
   margin: 0;
 }
 
 .child {
   background: green;
   width: 50px;
   height: 50px;
   padding: 10%;
   border: 10px solid black;
   box-sizing: border-box;
 }
 </style>
 <div class="parent">
    <div class="child"></div>
 </div>

    • 查看以下输出

       Function.prototype.a = () => alert(1);
 Object.prototype.b = () => alert(2);
 function A() {}
 const a = new A();
 a.a();
 a.b();

    • 查看以下输出

    var x = 10;
function a(y) {
  var x = 20;
  return b(y);
}

function b(y) {
  return x + y
}

a(20);
    • 查看以下输出
    console.log(1);

setTimeout(() => {
  console.log(2)
});

Promise.resolve().then(() => {
  console.log(3);
});

setImmediate(() => {
  console.log(4)
});

new Promise(resolve => {
  console.log(5);
  resolve();
  console.log(6);
}).then(() => {
  console.log(7)
});

Promise.resolve().then(() => {
  console.log(8);
  Promise.resolve().then(() => {
    console.log(9)
  });
});
    • 实现一个数组乱序，每一个元素出现在每一个位置的概率是平均的
    • 实现以下函数（哎当时这题浪费好长时间，都没做出来！）
    function add() {
}

function one() {
}

function two() {
}

console.log(one(add(two())))
// 3
console.log(two(add(one())))
// 3

    • 请实现一个cacheRequest方法，保证当使用ajax(请求相同资源时，此题中相同资源的判断是以url为判断依据)，真实网络层中，实际只发出一次请求（假设已存在request方法用于封装ajax请求，调用格式为：request(url, successCallback, failCallback)）

      比如调用方代码（并行请求）如下

      cacheRequest('/user', data => {
  console.log('我是从A中请求的user，数据为' + data);
})

cacheRequest('/user', data => {
  console.log('我是从B中请求的user，数据为' + data);
})

字节商业化部门

  • 一面

    • vue的数据双向绑定

    • vue渲染机制

    • $nextTick实现原理

    • 实现Promise.all

    • 查看以下输出

      async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}

async function async2() {
  console.log('async2');
}

console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0);  

async1();

new Promise(function(resolve) {
 console.log('promise1');
 resolve();
}).then(function() {
 console.log('promise2');
});

console.log('script end');

    • 实现以下函数

      function ListNode (val) {
  this.val = val
  this.next = null
}

// 1. 2. 3
const node = new ListNode(1)

// node.insertAfter(1, 4) // => 1 4 2 3
// node.delete(2) // 1 3
  • 二面
    • 聊一些项目特点，问下个人情况
    • webpack laoder plugin 了解多少，有没有写过类似？
    • 实现一个带并发限制的异步调度器 Scheduler，保证同时运行的任务最多有两个。完善下面代码中的 Scheduler 类，使得以下程序能正确输出。
    class Scheduler {
  add(promiseCreator) { ... }
  // ...
}

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

const scheduler = new Scheduler()
const addTask = (time, order) => {
  scheduler.add(() => timeout(time)).then(() => console.log(order))
}
    
addTask(1000, '1')
addTask(500, '2')
addTask(300, '3')
addTask(400, '4')
    • 实现以下函数（没做出来）
    const config = [
    ['red', 'blue'], // 颜色1
    ['red'], // 颜色2
    ...
    [39, 40, 41, ...], // 尺码
]

function all(config) {
  // ???
}
=>
[
  'red-red-39',
  'red-red-40',
  ...
  'blue-red-41',
]
  • （二面 挂）字节面试官很好，遇到问题还能解答下！只是自己有点紧张，真的是，哎。。。 大家可以多刷刷算法和编程题
avatar
文章
阅读
粉丝