前端面试题-手写

1.统计字符串中字符出现的次数

统计字符串中字符出现的次数
/**
 * @description 统计字符串中字符出现的次数
 * @param str
 * @returns {{}}
 */
function computeString(str) {
  const obj = {};
  for (let i = 0; i < str.length; i++) {
    const key = str[i];
    if (obj[key]) {
      obj[key]++;
    } else {
      obj[key] = 1;
    }
  }
  return obj;
}
computeString('12121111');

2. 函数防抖

函数防抖
/**
 * @description 函数防抖
 * @param func
 * @param wait
 * @returns {(function(...[*]): void)|*}
 */
function debounce(func, wait = 50) {
  // 缓存一个定时器id
  let timer = 0;
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器,延迟执行用户传入的方法
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}
const task = () => {
  console.log('run task');
};
const debounceTask = debounce(task, 1000);
window.addEventListener('scroll', debounceTask);

3. 函数节流

函数节流
/**
 * @description 函数节流
 * @param func
 * @param ms
 * @returns {(function(...[*]): void)|*}
 */
function throttle(func, ms = 1000) {
  let canRun = true;
  return function (...args) {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      func.apply(this, args);
      canRun = true;
    }, ms);
  };
}
const task = () => {
  console.log('run task');
};
const throttleTask = throttle(task, 1000);
window.addEventListener('scroll', throttleTask);

h7ml小于 1 分钟
javascript
  • JavaScript 高级程序设计读书笔记
  • JavaScript 原型与继承
  • JavaScript 数据类型
  • JavaScript 类型转换

h7ml小于 1 分钟
浏览器知识

跨域

跨域的原因 —— 浏览器的同源策略

同源策略是浏览器一个重要的安全策略,它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介

同源的定义是两个 URL协议域名(子域名 + 主域名)、端口号 都相同,否则就会出现跨域


h7ml
  • es6
  • es6
大约 15 分钟
编程题

new 运算符

new 运算符原理

  1. 创建一个全新的对象
  2. 为新创建的对象添加 __proto__ 属模拟实现 new 运算符性并指向构造函数的原型对象
  3. 将新创建的对象作为函数调用的 this
  4. 如果构造函数没有返回对象类型,则返回新创建的对象
模拟实现 new 运算符
function myNew() {
  // 获取构造函数
  const Constructor = [].shift.call(arguments);

  // 创建空对象并设置原型
  const obj = Object.create(Constructor.prototype);

  // 绑定 this 并执行构造函数
  const result = Constructor.apply(obj, arguments);

  // 返回构造函数显示返回的值或新对象
  const type = typeof result;
  return result && (type === 'object' || type === 'function') ? result : obj;
}

h7ml
  • es6
  • es6
大约 6 分钟
模块化

什么是模块化?

百度百科中的解释: 模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程,有多种属性,分别反映其内部特性。

在编程中 模块化是将一个复杂的应用程序,按照一定的规则拆分成若干个文件(代码块),并进行组合。文件内部的数据与实现都是私有的,只是对外暴露一些接口(方法、变量)与其他模块进行通信

模块化的好处

  • 避免命名空间的冲突
  • 提高代码的复用性

h7ml
  • es6
  • es6
大约 5 分钟
docker

概念

Docker 的核心四大组成对象

镜像 ( Image )、容器 ( Container )、网络 ( Network )、数据卷 ( Volume )

镜像

所谓镜像,可以理解为一个只读的文件包,其中包含了虚拟环境运行最原始文件系统的内容

每次对镜像内容的修改,Docker 都会将这些修改铸造成一个镜像层,而一个镜像其实就是由其下层所有的镜像层所组成的。当然,每一个镜像层单独拿出来,与它之下的镜像层都可以组成一个镜像。


h7ml
  • docker
  • docker
大约 55 分钟
es6

es6 知识点

ECMAScript 6 (简称 ES6) 是 JavaScript 语言的下一代标准

ECMAScript 的提案流程

  • Stage 0 - Strawman(展示阶段)
  • Stage 1 - Proposal(征求意见阶段)
  • Stage 2 - Draft(草案阶段)
  • Stage 3 - Candidate(候选人阶段)

h7ml
  • es6
  • es6
大约 23 分钟
Git

Git 常用命令

初始化

git init

克隆项目

git clone

长期保存密码

git config --global credential.helperstore

获取分支

git fetch origin

合并分支

git merge

h7ml
  • git
  • git
大约 5 分钟
diff

react diff 原理

概念

调和函数(源码)是在fiber树构(对比更新)过程中对旧fiber节点新reactElement进行比较, 判定旧fiber节点是否可以复用的一个比较函数.


h7ml
  • react
大约 8 分钟
hook-api

useEffect 依赖执行关系

useEffect 第二个参数[]如何影响 fn 的执行?换句话说,它的第二个参数是如何影响 fiber 创建 Passive Effect 的?

  1. 不包含第二个参数 useEffect(() => {})Mount & Update 时,每次 render 时都会创建一个 Passive Effect;
  2. 包含一个空数组[]作为依赖项 useEffect(() => {}, []),它会在 mount 时,创建 Passive Effect

h7ml
  • react
大约 1 分钟
requestIdleCallback

实现 requestIdleCallback

浏览器一帧

当前大多数的屏幕刷新率都是 60hz,也就是每秒屏幕刷新 60 次,低于 60hz 人眼就会感知卡顿掉帧等情况,同样我们前端浏览器所说的 FPS(frame per second)是浏览器每秒刷新的次数,理论上 FPS 越高人眼觉得界面越流畅,在两次屏幕硬件刷新之间,浏览器正好进行一次刷新(重绘),网页也会很流畅,当然这种是理想模式, 如果两次硬件刷新之间浏览器重绘多次是没意义的,只会消耗资源,如果浏览器重绘一次的时间是硬件多次刷新的时间,那么人眼将感知卡顿掉帧等, 所以浏览器对一次重绘的渲染工作需要在 16ms(1000ms/60)之内完成,也就是说每一次重绘小于 16ms 才不会卡顿掉帧。


h7ml
  • react
大约 6 分钟
setState

setState 是同步还是异步的?

trigger = (isBatchedUpdate: boolean) => {
  const runSetState = () => {
    this.setState({ count: this.state.count + 1 }, () => console.log(this.state.count));
  };

  if (isBatchedUpdate) {

h7ml
  • react
大约 2 分钟
synthetic-event

React 合成事件

概览

v17.0.0开始, React 不会再将事件处理添加到 document 上, 而是将事件处理添加到渲染 React 树的根 DOM 容器中.

引入官方提供的图片:


h7ml
  • react
大约 8 分钟
2
3
4