编程题

寻找字符串中出现最多的字符怎么实现？

遍历一遍字符串，用个 map 记录每个字符出现的次数，然后遍历一遍 map，取出出现次数最多的字符

function getMaxChar(str: string): string {
  const map = {};
  for (let i = 0; i < str.length; i++) {
    const c = str[i];
    if (!map[c]) {
      map[c] = 1;
    } else {
      map[c]++;
    }
  }
  let max = 0;
  let maxChar;
  for (let k of Object.keys(map || {})) {
    if (max < map[k]) {
      max = map[k];
      maxChar = k;
    }
  }
  return maxChar;
}

数组扁平化(nest to flat)

实现一个Array.prototype.flat()，leetcode 对应题目：2625. 扁平化嵌套数组

扁平数组嵌套化(flat to nest)

菜单数组转换为嵌套树形结构，但示例只有两级

[
  { id: 1, menu: '水果', level: 1 },
  { id: 2, menu: '橘子', level: 2, parentId: 1 }
  // ...
]
// 转换为
[
  {
    id: 1, menu: '水果', level: 1, children: [{ id: 2, menu: '橘子', level: 2, parentId: 1 }]
  },
  // ...
]

以下是我给出的解答，未经过严格测试

const a = [
  {
    id: 2,
    menu: "橘子",
    level: 2,
    parentId: 1,
  }, // ...
  {
    id: 1,
    menu: "水果",
    level: 1,
  },
];

function flat2nest(array) {
  const res = [];
  const map = {};
  for (let index = 0; index < array.length; index++) {
    if (map[array[index].id]) {
      map[array[index].id] = {
        ...array[index],
        children: map[array[index].id].children,
      };
    } else {
      map[array[index].id] = { ...array[index] };
    }
    if (!array[index].parentId) {
      res.push(map[array[index].id]);
    } else {
      if (!map[array[index].parentId]) {
        map[array[index].parentId] = {};
      }
      if (!map[array[index].parentId].children) {
        map[array[index].parentId].children = [];
      }
      map[array[index].parentId].children.push({ ...array[index] });
    }
  }
  return res;
}

const b = flat2nest(a);
console.log(b);

实现一个深拷贝

实现 Promise

JavaScript 基础

最基础的两个知识点：

Prototype Chain（原型链）
- JavaScript 原型和原型链
- JavaScript 对象的继承有哪几种？
closure（闭包）

结合这两个知识点学习，我们发现，原型链就是用来方便查找对象上的变量，闭包就是方便查找自由变量，本质上都是为了让 JavaScript 这个编程语言更加丰富，灵活，好用，方便程序员写出更加短小精悍，易于封装和复用的代码。

箭头函数
Promise A+ 规范
Event Loop（事件循环）
内存回收
try-catch：
- try-catch 能抛出 promise 的异常吗
怎么判断对象为空？
类型判断
- JavaScript 有几种基础数据类型？Symbol 和 BigInt 是什么时候引进的？
- typeof有几种类型？分别是什么？
- Object.prototype.toString()有几种类型？分别是什么？
模拟 JavaScript 原生方法
知不知道最新的 url 参数获取的 API？

JavaScript 历史

5 分钟彻底搞懂 js 的版本演进（ES5,ES6,ES2015 的区别） - 知乎
ES6 带来了哪些新东西？
ECMAScript 2015 Language Specification – ECMA-262 6th Edition
var，let，const 的区别

浏览器环境

window.parent

node 环境

CSS 基础

行内元素和块级元素
盒模型
伪类和伪元素
CSS 前缀
BFC
垂直居中有几种方式？
- 垂直居中和水平居中
position
text-overflow（文本溢出）
flex: 2 有用过吗？多列布局怎么实现？

前端编程范式

debounce, throttle（防抖和节流）
EventBus（事件总线）

浏览器相关

浏览器事件
事件委托
Repaint, Reflow（重绘和回流）
同源策略和跨域
CSRF 和 XSS 攻击

网络

HTTP

HTTP 状态码
GET 请求和 POST 请求的区别
HTTP 和 HTTPS 的区别
HTTP 缓存

TCP/IP

TCP 为什么要三次握手四次挥手

typescript

type 和 interface 的区别

react

vue

Vue 组件通信方式有哪些，各有什么特点？
Vue 项目怎么提高项目性能？举一些例子
vue3 在某些场景比 vue2 性能更低，为什么会这样？

其他

新版本发布后，怎么用技术手段通知用户刷新页面？
性能优化数据怎么上报、分析？
element ui table 吸顶怎么做，滚动怎么处理等
TS 用的多吗？
工作中解决的最有成就感的事？
你在工作中遇到过最大的挑战是什么，怎么解决的？
在团队协作时，有遇到过什么问题吗，如果有冲突你会怎么做
你有什么想问我的？
低代码、怎么动态加载渲染一个组件，底层怎么实现？

Do something cool!

前端面试指南

编程题