连续拿到4个大厂offer的面试总结

原文地址：https://mp.weixin.qq.com/s/oJlLceeP3JjT4Lnjxi_Ztw

“金九银十“跳槽季，又到了面试求职的高峰期。好多小伙伴都会跳槽去找工作。如果你不跳槽，也建议把这篇文章看完，毕竟金九银十之后，就是金三银四了，总是逃不掉的?

你在面试的时候，是否遇到过以下问题：

• 各大招聘网站海投简历，给回应的寥寥无几

• 永远想不明白到底该不该去外包公司

• 面试前不知道该做哪些准备，常被面试官问到发懵

• 不知道怎么谈薪资，可以让自己利益最大化

如果你中了其中2条以上，那本文一定要认真读完。

从9月开始，我分别面试了百度、快手、爱奇艺、阿里、滴滴、字节跳动、好未来、贝壳等8家互联网大厂，顺利拿到4家offer，并最终入职爱奇艺，年薪48万。

本文记录了值得研究的四大互联网大厂的面试题目，带你全面了解——【最近，前端面试都问些什么】

**
**

百度

1、请分析以下代码执行结果

['1', '3', '10'].map(parseInt);

2、请分析以下代码执行结果

var number = 10;
function fn() {
  console.log(this.number);
}
var obj = {
  number: 2,
  show: function(fn) {
    this.number = 3;
    fn();
    arguments[0]();
  }
};
obj.show(fn);

3、请写出 inner 的实际高度。

<style>
  .outer {
    width: 200px;
    height: 100px;
  }
  .inner {
    width: 60px;
    height: 60px;
    padding-top: 20%;
  }
</style>
<div class="outer"><div class="inner"></div></div>

4、手写一个深拷贝函数。

5、HTTP 状态码 301 302 304 403。

6、手写发布订阅模式 EventEmitter。

7、手写一个多表查询的 sql 语句。

 当时用的是 left join 实现。

8、react 高阶函数的写法，通常有哪几种。

 第一种是通过工厂模式直接 wrapper，第二种是通过组件反向继承的方式。

// 反向继承方式写法如下
class A extends B{
  render() {
    return (
      <div>component1 start</div>
        super.render()
      <div>component1 end</div>
    )
  }
}

9、delete 数组的 item，数组的 length 是否会 -1。

 不会。

10、mongoDB 中的 BSON 是什么？

 B 代表二进制。

11、关系型数据库和 nosql 查询效率谁高？

 关系型是 B+ tree 查询效率相对较高。

12、使用 node app.js 开启服务，如何让它在后台运行。

 开启守护进程，在命令后加上 & 符号，表示开启守护进程来执行。

node app.js &

13、尽可能写出更多的数组副作用方法。

• splice、push、pop、shift、unshift。

• sort、fill、reverse。

百度三面：

1、实现一个周岁函数，例如 fn('2018-8-8') 输出 1，只要是过了生日就 +1。

2、不断优化刚才实现的函数，用尽一切办法，多问一问还有吗？跳出自己的固定思维圈。

阿里

1、vue 双向数据绑定原理，依赖收集是在什么时候收集的？

 是在 created 生命周期之前，render 生成虚拟 dom 的时候。

2、react hooks 原理是什么？

 hooks 是用闭包实现的，因为纯函数不能记住状态，只能通过闭包来实现。

3、useState 中的状态是怎么存储的？

 通过单向链表，fiber tree 就是一个单向链表的树形结构。

 React Hooks 原理

爱奇艺

1、浏览器渲染 js，html，css 的顺序。

2、react dom diff 算法，list 比较首先比较的是什么？

 首先比较同层级元素，从左到右。

3、为什么 react 要做成异步的呢？

• 因为 state 更新会导致组件重新渲染，在渲染后，才能把新的 props 传递到子组件上，所以即使 state 做成同步，props 也做不成，为了保证 state 和 props 的一致性。

• 为了性能优化，state 会根据不同的优先级进行更新。

• 为了让 react 更加灵活，如实现异步过渡，例如页面在切换的时候，如果延时很小，就在后台自动渲染了，渲染好之后再进行跳转；如果延时相对较长，可以加一个 loading。

4、对象的 {…} 解构，是 rest 吗？

 是。

5、自己实现一个 Symbol Interator 。

// 给一个对象设置Symbol Interator
var obj = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

6、options 头是在什么时候会进行发送。

• 检测服务器所支持的请求方法

• CORS 中的预检请求

7、sessionStorage 在两个 tab 窗口能共享吗？

 不能，和后端的 session 类似，每一个窗口对应一个会话层。

8、localStorage 存放的只能是 string 类型。

 插入时需要将对象转换为字符串，读取时需要做 JSON.parse 转换。

9、写一个 0-100 的正则表达式。

/^(\d|[1-9]\d|100)$/;

10、linux 中怎么查看内存和磁盘。

• top 命令，查看内存。

• free 命令，查看内存。

• ps aux 列出当前内存中正在运行的程序。

• df 命令，查看磁盘。

11、meta 标签用过吗，都用来做些什么？

• seo 优化

• viewreport 设置手机端适配

• 设置 charset 字符编码

• 模拟 http 标头字段

字节跳动

1、请分析以下代码执行结果

async function a() {
  var result = Promise.resolve();
  result.abort = function() {
    console.log('xxx');
  };
  return result;
}
var p = a();
p.abort();

2、手写一个节流函数

 手写节流函数

3、什么是装箱和拆箱

 装箱和拆箱操作，能够在值类型和引用类型中架起一座桥梁。换言之,可以轻松的实现值类型与引用类型的互相转换。

 装箱是将值类型转换为引用类型，拆箱是将引用类型转换为值类型。

4、什么是委托

 粗略来说，一个类想执行一个方法，但它本身没有这个方法，这个方法在另一个类中，于是它“委托”那个类来帮它执行。

using System;
using System.Collections.Generic;
using System.Text;
namespace Delegate
{
    //定义委托，它定义了可以代表的方法的类型
    public delegate void GreetingDelegate(string name);
    class Program
    {
        private static void EnglishGreeting(string name)
        {
            Console.WriteLine("Morning, " + name);
        }
        private static void ChineseGreeting(string name)
        {
            Console.WriteLine("早上好, " + name);
        }
        //注意此方法，它接受一个 GreetingDelegate 类型的参数，该参数是返回值为空，参数为 string 类型的方法
        private static void GreetPeople(string name, GreetingDelegate MakeGreeting)
        {
            MakeGreeting(name);
        }
        static void Main(string[] args)
        {
            GreetPeople("yhlben", EnglishGreeting);
            GreetPeople("yhlben", ChineseGreeting);
            Console.ReadKey();
        }
    }
}

5、手写一个 reduce 方法。

Array.prototype.reduce = function(reducer, initVal) {
  for (let i = 0; i < this.length; i++) {
    initVal = reducer(initVal, this[i], i, this);
  }
  return initVal;
};

6、手写一个模板字符串替换方法

function template(html, obj) {
  return html.replace(/\{\{(.*?)\}\}/g, function(match, key) {
    return obj[key.trim()];
  });
}

template('{ {name} }很厉name害，才{ { age } }岁', { name: 'jawil', age: '15' });

7、看过 antd 源码吗，如何实现一个 Model，Message 组件？

 只能猜想到 React Portals，未曾看过源码，有待提升。

8、如果要设计一套微前端架构，说说你的具体思路？如何实现主页面事件注册机制？如何解决多个 iframe 同时通信？

 需要有落地实战项目，不然很难答好，消息加锁等。

总结

技术面试一般分为三面。

一面：考察基础，必须过硬，如：js、css、html、tcp/ip 协议栈、浏览器渲染等。

二面：结合实际项目考察技术深度，如：react、vue、koa、ts、webpack 等。

三面：结合实际项目考察项目思考，如：react 的优缺点、前端方向的思考、以及解决问题的思考方式等。