base: 北京 业务线: 有道单词

一面

• 自我介绍, 问之前项目
• 你如何理解 html 语义化
• 讲讲 CSS position 属性
• 垂直水平居中的方法, 至少说三种, 每种的原理

1. flex / grid
2. display: tabel-cell
3. 将子组件绝对定位移动到外层容器中心点 + 子组件向左上方 transform

• 讲flex布局属性
• 讲事件循环原理
• 讲 ES6 更新哪些内容
• 问Object.keys()方法返回的数组是否是按序的

不保证按序; 在 js 中, 普通 Object 是可迭代不可枚举的对象, 因此对象的键在存储时本身没有顺序可言

• typescript 中, enum 实现原理 示例代码如下:

// enum.ts
enum Num {
    One = 1,
    Two = 2,
    Three = 3
}
enum LowerChar {
    A = 'a',
    B = 'b',
    C = 'c'
}
const demo1: Num = Num.One;
const demo2: LowerChar = LowerChar.A;
console.log(`${typeof demo1}: ${demo1}`);
console.log(`${typeof demo2}: ${demo2}`);

tsc enum.ts

var Num;
(function (Num) {
    Num[Num["One"] = 1] = "One";
    Num[Num["Two"] = 2] = "Two";
    Num[Num["Three"] = 3] = "Three";
})(Num || (Num = {}));
var LowerChar;
(function (LowerChar) {
    LowerChar["A"] = "a";
    LowerChar["B"] = "b";
    LowerChar["C"] = "c";
})(LowerChar || (LowerChar = {}));
var demo1 = Num.One;
var demo2 = LowerChar.A;
console.log(typeof demo1 + ": " + demo1); // -> number: 1
console.log(typeof demo2 + ": " + demo2); // -> string: a

• 列举你知道哪些 typescript 工具类型
• typescript 工具类型返回的是 type 还是 interface?

type

• type 和 interface 的区别
• 讲讲你理解的 ts 泛型
• 手撕算法: 两个有序数组合并, 要求数组 B 中的元素合并到数组 A, 返回数组 A, 必须是原地修改, 不能创建一个新的数组并返回

二面

• 自我介绍
• 问 XSS 和 CSRF
• 问浏览器缓存
• 讲讲 react hooks 常见 API 用法
• 手撕算法: 给定一个数组 arr 的长度 length, 以及一个正整数 steps, 一个指针指向 arr[0] 处, 指针的运动方式有三种, 一次向右移一步, 一次向左移一步, 或者静止不动, 现在该指针在 arr[0] 处开始运动 steps 步, 求有几种策略使指针运动 steps 步后回到原地 如输入 arr.length = 2, steps = 3, 输出 4, 因为有 4 种策略:

1. 静止, 右移, 左移
2. 右移, 静止, 左移
3. 右移, 左移, 静止
4. 静止, 静止, 静止

• 手撕算法: 给定一棵二叉查找树和一个树中的节点, 求这棵树中比这个节点的值更大的最小值节点