百度提前批前端一二三面面经

我创建了一个 GitHub 仓库，用来汇总自己 2021 秋招经历，整理笔试题以及面经，使用 Issues 进行进度管理，并且自动同步 Google Calendar 的面试日程。
链接：https://github.com/Mayandev/interview-schedule

百度前端一面面经

问题

1、讲一下 Promise，链式调用，Reject 状态是否还可以变成 Fullfilled 状态

2、解构复制，说一下下面的答案：

const {a: A} = {a: 1};
const [a, b] = [1];
const [a, ...b] = [1];
const [a, b] = [1, 2];

3、ES6 还知道哪些，balabala

4、讲一下 react hooks，应用场景，如何用好它

5、跨域解决的几种办法，jsonp 如何实现

6、cookie、session

7、登陆校验如何做，保持登陆态，token 如何传递，如何判断是否失效

8、各种 http 的状态码，具体讲一下 304

9、项目是如何优化的，分析步骤

10、组件异步加载如何做的，分 bundle 打包的原理是什么

手写题

1、promise 处理请求超时

function timeoutPromise(reqestFunc, time) {
  const timeout = new Promise((resolve) => {
    setTimeout(resolve, time);
  }).then(() => {
    throw new Error('Timeout!');
  })
  return Promise.race([reqestFunc, timeout]);
}

2、数组去重，延伸：去除指定的重复数字

const arr = [1, 2, 2, 3, 3, 4];
const newArr = Array.from(new Set(arr));

3、数组转对象，能否用 reduce 实现一下

/**
 * @example
 * [{id: '1001', name: 'jack'}, {id: '1002', name: 'rose'}] =>
 * {'1001': {id: '1001', name: 'jack'}, '1002': {{id: '1002', name: 'rose'}}}
 */
const users = [{id: '1001', name: 'jack'}, {id: '1002', name: 'rose'}];
const obj = users.reduce((prev, curr) => (Object.assign(prev, {[curr.id]: curr})), {})

4、实现一个 compose 函数

下面是自己补充的例子，面试时没听懂面试官所描述的。

/**
 * 接收若干个函数作为参数，每个函数执行后的输出作为下一个函数的输入。
 * 执行方向是自右向左的，初始函数的参数在最右边
 */
function compose(...fns){
    // ...
}
// compose(f,g)(x) === f(g(x))
// compose(f,g,m)(x) === f(g(m(x)))
// compose(f,g,m)(x) === f(g(m(x)))
// compose(f,g,m,n)(x) === f(g(m(n(x))))
// ···

实现：

function compose(...fns) {
  return function(x) {
    return fns.reverse().reduce((arg, fn) => {
      return fn(arg);
    }, x);
  }
}

const add = x => x + 1;
const multiple = x => x * 2;
const minus = x => x - 1;

console.log(compose(minus, multiply, add)(1)) // 3

百度提前批前端二面面经

1、自我介绍

2、无障碍具体做了什么

3、code smell 你是如何做的

4、如何理解副作用

5、for...let of 语句为什么一定有副作用

6、有没有自动化的手段将有副作用的 forEach 转换为 map、filter 等形式

7、flutter skia 引擎工作原理

8、dart 这门语言的特性，设计之初舍弃了什么、留下了什么

9、monorepo 迁移做了哪些工作，用的什么工具管理的

10、手撸代码，实现一下这个 before 函数
图片说明

/**
 * 传入任意一个函数，只能调用指定的次数
 * @param {*} count 调用次数
 * @param {*} func 传入函数
 * @returns 
 */
function before(count, func) {
  var temp = count;
  return function() {
    if (temp > 1) {
      temp--;
      const args = [...arguments];
      func.apply(this, args);
    }
  }
}

const log = a => console.log(a);

const log3 = before(3, log);

log3(2);
log3(1);
log3(3);

11、react 懒加载，suspense 有用过吗