头条

//TODO 一轮 1.dom react 原理 2.css 布局 3.js 原型链继承 4.fetch 取消 5.eventloop 6.instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

object instanceof constructor;

我们可以使用 instanceof 检测某个对象是不是另一个对象的实例，例如 new Person() instanceof Person --> true

new 绑定/ 默认绑定

• 通过 new 来调用构造函数，会生成一个新对象，并且把这个新对象绑定为调用函数的 this 。

• 如果普通调用函数，非严格模式 this 指向 window，严格模式指向 undefined

function Person() {
    console.log(new.target);
}
// new: Person {}
console.log("new: ",new Person())
// not new: undefined
console.log("not new:", Person())

ES6 为 new 命令引入了一个 new.target 属性，该属性一般用在构造函数之中，返回 new 命令作用于的那个构造函数。如果构造函数不是通过 new 命令或 Reflect.construct() 调用的，new.target 会返回 undefined ，因此这个属性可以用来确定构造函数是怎么调用的。

function Person(firstName, lastName) {
  // this instanceof Person
  // 如果返回值为 false，说明为普通调用
  // 返回类型错误信息——当前构造函数需要使用 new 调用
  if (!(this instanceof Person)) {
    throw new TypeError(
      'Function constructor A cannot be invoked without "new"'
    );
  }
  this.firstName = firstName;
  this.lastName = lastName;
  this.fullName = this.firstName + this.lastName;
}
// 当作普通函数调用
// Uncaught TypeError: Function constructor A cannot be invoked without "new"
console.log(Person("战场", "小包"));

7.promise 封装 setstate

function asyncPromiseState() {
  return new Promise((resolve) => {
    this.setState(newState, resolve);
  });
}
async function componentDidMount() {
  await asyncPromiseState({ count: 1 });
  console.log(this.state.count);
}

Is implicit if you don't use a block for example here:

const implicit = i => i * 2;
But in case you need to use a block then you need to add a return:

const explicit = (i) => {
  if(i > 10) {
    return i * 2;
  }
   return i;
}

8.redux 基本组成和设计单向数据流 9.https 协议的过程 10.https 获取加密密钥的过程 11.http 的方法有哪几种,每种方法的有用途 12.类式继承的方案 13.prototype 继承的实现 14.数字千分位处理，正则和非正则都要实现 15.借用构造继承，几种组合继承方式 16.看编程代码说出运行结果： Process.nextTick，setImmediate 和 promise.then 的优先级 Process.nextTick，pronise, setImmediate 的优先级 17.实现一个 bind 函数 18.千位加逗号 19.三个继承方式的优缺点 优化列出代码 20.nodejs 的事件循环 21.bfc 22.css 实现正方形 div 水平垂直居中 23.koa1 的原理,继承 24.最后是一个写代码 处理有依赖的异步任务 加重试 25. diff 的原理 26. es6 箭头函数 27. import 和 requre 的区别 28. symbol Symbol 是什么 Symbol() 函数会返回 symbol 类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的 symbol 注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。所以使用 Symbol 生成的值是不相等：

1. 函数实现正面模板

2. 正方形实现，三角形实现

3. CSS 考了 伪类

4. 实现布局 header,content,footer，上中下布局；当 content 超出窗口可视区，不显示 footer；当 content 没超出可视区时，固定 footer 在最下面

5. 算法:背包问题、闭包问题、函数柯里化

6. 宽是高的一半的垂直居中，里面有字体也要垂直居中类数组

7. promise async set time out 先后次序

8. event 类 on once 灯方法 37.. ==的隐式转化 38.什么是闭包， 39.最长子序列 40.二叉树中序遍历 41.http 握手原理 42.react 新版本的特性

9. 多空格字符串格式化为数组 44、bind 函数运行结果 45、点击 table 的 td 显示 td 内容 46、数字千分位处理 47、固定日期与当前时间格式化处理 48、上中下三栏布局 49、实现一个子类实例可以继承父类的所有方法

10. Jsonp 跨域，js 原型继承 & 原型链，promise，二叉树搜寻算法，算法：前端做并发请求控制

11. 杭州一面: 节流函数 Koa 中间件机制及代码实现 React Fiber 原理以及为什么 componentWillRecievedProps 会废弃 给定一个数组，一个期望值，找到数组中两个相加等于期望值 52.深圳前端一面： react 生命周期 deepClone 回流重绘 canvas 53.深圳前端一面： 1. 数组去重 2. React Hook 原理 3. 列表 diff 中 key 的作用 4. Vue v-model 原理 5. 场景题：Vue CheckBoxGroup/CheckBox 设计 6. Vue 双向绑定原理 54.成都前端： 1、换行字符串格式化 2、屏幕占满和未占满的情况下，使 footer 固定在底部，尽量多种方法。 3、日期转化为 2 小时前，1 分钟前等 4、多个 bind 连接后输出的值 5、原码，补码，反码 6、事件委托 55.成都前端： 1，React Hook, Fiber Reconciler ,新的生命周期 getDerivedStateFromPros 为什么是 Static 2，redux 异步 3，redux 异步中间件原理 4，express koa 中间件原理 56.北京前端一面：

12. 宏任务微任务

13. libUA

14. express ctx 中间键代码实现

15. vue 发布订阅和虚拟 dom 代码实现

16. 请实现如下的函数，可以批量请求数据，所有的 URL 地址在 urls 参数中，同时可以通过 max 参数 控制请求的并发度，当所有请求结束之后，需要执行 callback 回调函数。发请求的函数可以直接 使用 fetch 即可

17. 南京前端 1 面： 1.事件循环 2.react diff 算法，key 的作用，setData 的机制，事件合成 3.vue 的 v-model 原理 4.实现一个方法，参数是一个 generator 函数，执行结果是执行完所有 generator 中的 yield 5.获取页面所有 img 并且下载 6.两个同源 tab 之间的交互，数据同步

58.上海前端一面：

1. 怎么将一个异步方法 promise 化，以及实现 promise.all()方法

2. vue 单页多页的区别，vue 路由实现原理

3. vue 数据驱动视图原理？更新视图的过程是否是同步的操作？

4. nodejs 相关的应用（答：开发命令行工具、web 服务，ssr，数据库操作等）

5. vue 项目开发环境如何配置？wepack-dev-server 热更新功能实现原理 webpack HMR

6. express、koa、redis 等技术相关应用

7. [1,2,3].map(parseInt) 执行结果

8. 北京前端一面题：

9. css 如何实现元素 a 距离屏幕 10px，高度无论宽度怎么改变都是其.5

10. 隐式转换，会问为什么这样

11. 同步异步输出的顺序

12. argument 是数组吗，如果不是怎么变为数组

13. 如何实现 for 循环内定时器依次输出 123

14. bind 实现

15. 函数节流

16. 动态规划算法

17. 北京前端一面：

    1. function request(urls, maxNumber, callback) 要求编写函数实现，根据 urls 数组内的 url 地址进行并发网络请求，最大并发数 maxNum ber,当所有请求完毕后调用 callback 函数(已知请求网络的方法可以使用 fetch api)

    2. throttle 函数实现

    4.二叉树路径总和（leetcode 112）

    1. 给定一个不含重复数字的数组 arr,指定个数 n,目标和 sum,判断是否含有由 n 个不同数字相加得到 sum 的情况（leetcode 40 变种， 数 字不得重复使用）

18. 上海前端一面： websocket 原理 http2 如何实现多路复用

20. 冒泡算法

21. 前端安全 ， DOS

22. 前端缓存、回话机制

23. 跨域

24. 计算机网络知识 TCP UDP

25. 测试 单测、集成测试

26. 自动化集成

27. Docker 应用

28. Nodejs express koa

    62.成都前端笔试：1、输入一个日期 返回几秒前 几天前或者几月前； 2、153812.7 转化 153,812.7； 3、用两种方法 一种是正则； 4、还有关于 bind 的一道题；

29. 北京前端一面 ①['a','b'],['A','B'],['1','0']，输出['aA1','aA0','aB1','aB0','bA1','bA0','bB1','bB0']，算法的排列组合问题 ②vue-router 路由监听的原理 ③webpack 打包的原理，webpack 有没有针对打包过程做一些优化提升打包速度 ④ 请实现如下的函数，可以批量请求数据，所有的 URL 地址在 urls 参数中，同时可以通过 max 参数，控制请求的并发度，实现 max 个请求执行完之后再执行下 max 个请求，当所有请求结束之后，需要执行 callback 回调函数。发请求的函数可以直接 使用 fetch 即可 ⑤vue 双向绑定的原理 64.深圳抖音 写一个 eventBus，元素水平垂直居中，vuex mobox，小程序架构优化 日志系统

class EventBus {
  constructor() {
    this._events = new Map(); // 存储事件／回调键值对
  }

  // on 监听
  on(type, fn) {
    const handler = this._events.get(type); // 获取对应事件名称的函数清单
    if (!handler) {
      this._events.set(type, fn);
    } else if (handler && typeof handler === "function") {
      // 如果handler是函数，说明当前只有一个监听者
      // 再次添加监听者，需要改用 数组储存
      this._events.set(type, [handler, fn]);
    } else {
      // 已有多个监听者，直接往数组里push函数即可
      handler.push(fn);
    }
  }

  // emit 触发
  emit(type, ...args) {
    let handler = this._events.get(type);

    if (Array.isArray(handler)) {
      // 是数组，说明有多个监听者，需要依次触发里边的函数
      for (let i = 0; i < handler.length; ++i) {
        if (args.length > 0) {
          handler[i].apply(this, args);
        } else {
          handler[i].call(this);
        }
      }
    } else {
      // 单个函数的情况直接触发即可
      if (args.length > 0) {
        handler.apply(this, args);
      } else {
        handler.call(this);
      }
    }
    return true;
  }

  // off 移除监听
  off(type, fn) {
    const handler = this._events.get(type);
    if (handler && typeof handler === "function") {
      // 函数，说明只有一个监听者，直接删除就行
      this._events.delete(type);
    } else {
      handler.splice(
        handler.findIndex((e) => e === fn),
        1
      );
    }
  }

  // 单次执行
  once(type, fn) {
    let _self = this;
    function handler() {
      _self.off(type, handler);
      fn.apply(null, arguments);
    }
    this.on(type, handler);
  }
}

// 下面是 测试代码
function test1(...params) {
  console.log(11, params);
}

function test2(...params) {
  console.log(22, params);
}

function test3(...params) {
  console.log(33, params);
}

function test4(...params) {
  console.log(params);
  console.log(33, params);
}

//测试用例
let eb = new EventBus();
eb.on("event1", test1);
eb.on("event1", test2);
eb.on("event1", test3);
eb.emit("event1", "第一次");

eb.off("event1", test1);
eb.emit("event1", ["第二次1", "第二次2"]);

eb.once("once", test4);
eb.emit("once", "执行一次", 1, 2, 3);

二轮: 1.主要是围绕你的项目经历和技术，有一定的深度，主要还是要对项目全面熟悉；还有一个就是函数 柯理化的编码实现 2. 函数柯里化、Web 安全、react 性能优化、react 算法原理 3.上来直接让写一个 autocomplete 组件，可能是想考察业务思考点； 4. 后续的问题主要会接着业务场景问 扣实际场景 不问知识理论； 5. http 网络协议 ； 6. tcp 为什么是可靠的； 7. js 设计模式； 8. solid 原则； 9. 柯里化； 10. curry 函数实现 https 原理 webpack 打包原理 babel 原理 node 相关基础问题 我能想到的就这些， 其他的都是项目中，见缝插针问的

11.深圳二面： 1，一千个棋子，甲先取乙后取，每次最多取七个最少取一个，问是否有一个方案让甲一定赢 2，3×7 的格子，从左上角到右下角，只能往右或者往下，有多少种走法， 3，一个不均匀硬币，如何抛出均匀概率 4，然后有一个生成 0 到 13 随机数的算法，如何用它均匀生成 0 到 9 随机数 5，两千万高考生成绩如何排序 6，用链表表示的大数求和 12.杭州二面

1. css 单行和多行截断

2. 给一个由域名组成的字符串进行按子域名分组的反转，比如 news.toutiao.com 反转成 com.toutiao.news 需要 in place 做， 3.其他技术问题都是穿插在我的业务项目里面的，有点针对实际情景给解决方案

13.深圳抖音二面： 最近在做项目（痛点，难点，怎么解决），ssr（ssr csr 混合怎么处理），小程序架构（带来的优缺点），状态管理，异步编程（各个优缺点）

三轮： 1.自己做得最有成就的项目 2.自己主动承担并是核心的项目 3.项目深度:比如现场实现 vue 的数据代理等 4.技术广度:什么是微前端等 5.职业发展 6. 1. js 实现依赖注入 2. 接口攻击的方式和防御措施 3. https 握手过程 4. 设计模式 5. redux 和 mobx 的区别 6. js 多线程如何共享大的数据 北京商业化前端 一面： 1.实现数组去重 2.事件循环相关（现场出题） 3.实现 new 关键字 4.实现 class 5.是写防抖节流 6.项目相关问题 二面： 1.双向链表实现 2.观察者模式 3.性能优化指标 4.项目相关问题 三面： 1.http2 2.websocket 3.二叉树 非递归遍历 4.算法题，输出树形结构 5.项目细节深入追着问 北京商业化前端