摘要：
题目：设计一个js抽奖程序，一共分为三等奖，每一个等级的中奖概率及中奖人数都可自定义。 解法核心： 设定概率： 一等奖概率：10% 即 [0 - 0.1) 的范围 二等奖概率：30%. 即 [0.1 - 0.4) 的范围。注：为什么是从0.1开始？因为<0.1的话就是中了一等奖 三等奖概率：40% 阅读全文
摘要：
特性WebpackRollupViteRspackSWCEsbuild 文件输入 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 原目录输出 ✅ 支持 ✅ 支持 ✅ 支持 ✅ 支持 ❌ 不支持 ✅ 支持 文件捆绑 ✅ 支持 ✅ 支持 ✅ 支持 ✅ 支持 阅读全文
摘要：
使用JSON.parse(Json.stringify())实现深拷贝有哪些坑? 如果属性值是undefined、或者函数，序列化后属性丢失； 如果属性值是RegExp、Error对象，序列化后值是{}; 如果属性值是NaN、Infinity和-Infinity，则序列化的结果会变成null 因此一 阅读全文
摘要：
一、webpack热更新原理 1.使用 webpack-dev-server (后面简称 WDS)托管静态资源、提供websocket服务 2.webpack打包时会将HMR Runtime和源代码一起编译成 bundle 文件。HMR Runtime主要 负责接收服务发送的websocket消息， 阅读全文
摘要：
二分查找算法，也称折半搜索算法，是一种在有序数组中查找某一特定元素的搜索算法。算法思想是不断的缩小查找范围，步骤如下: 1️⃣ 确定基准： 选定数组的中间元素（基准值）。 如果数组大小为偶数，通常选择中间的 右侧元素（也可以选择左侧元素，但不影响算法效果）。 2️⃣ 分割数组： 将数组分成两半，基准 阅读全文
摘要：
刚接触bable的同学可能会认为使用了Babel，配置了preset预设后就可以愉快的使用 es6+做开发了，事实上，在默认情况下Babel只会做语法转换(let、const、class、箭头函数等)，而不做新api的转换，新的api总结起来分为两类： 全局对象和全局对象相关的方法，例如Promis 阅读全文
摘要：
一、配置文件 几乎所有的前端工程师都知道可以用babel将es6+的语法转换为es5，转换工具要么使用babel-cli，要么使用webpack的babel-loader，不管使用哪种转换工具，通常都需要一个配置文件来建立转换规则（也可以在webpack的babel-loader的配置项，原理都一样 阅读全文
摘要：
一、场景 0.1 + 0.2 = 0.30000000000000004 1.5 - 1.2 = 0.30000000000000004 19.9 * 100 = 1989.9999999999998 0.3 / 0.1 = 2.9999999999999996 二、原因 js中的数字只有 Numb 阅读全文
摘要：
事件绑定方法 Html事件处理程序-直接在元素上指定事件及相应的处理程序，事件处理程序中可直接访问event对象（不需要用参数接收event独享），this指向当前元素，同时还扩展了this和document的作用域，即访问对象的属性或方法时可以省略this或document Dom0级事件处理程序 阅读全文
摘要：
面试中经常会问到防抖、节流、函数柯里化，其他的一般不会问。 防抖函数(debouncing) 核心思想：对同一个函数进行连续调用时，只有最后次调用生效， 实现方式：使用setTimeout方法，每次调用时，清除上一次的timer,并将本次的timer记录下来就可以保证只有最后一次调用会生效 func 阅读全文
摘要：
因为 Math.random() 制造的随机数范围是[0, 1)想要生成16到22之间的随机数(即最小值m=16，最大值n=22)，首先需要计算出最大值与最小值的差range=m-n 随后把[0, 1)这个区间的随机数乘以range，区间就拓展到[0, 6)。在此基础之上再加最小值，范围就移动到[1 阅读全文
摘要：
一、Loader写法及执行顺序 从webpack2起，loader的格式如下： module: { rules: [ {test: /\.css$/, use: ['style-loader','css-loader']}, ] } webpack1中的写法如下： module: { loaders 阅读全文
摘要：
快速排序是20世纪最伟大的算法之一，其核心算法思想可以用在学校上体育课，按身高排列的场景来举例： 选择一个同学作为参照基准点（可随便选择）; 分成两组：比这个同学矮的，站左边；反之站右边； 对左、右两个分组重复上面的过程，直到各组只剩一个人； 拼接结果：左+基准值+右 实现难点： 不创建新数组的情况 阅读全文
摘要：
一、什么是BFC css布局主要采用盒子模型（BOX），元素的类型和 display 属性，决定了 Box 的类型，常见的盒子类型有两种： block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。 inl 阅读全文
摘要：
哈希表是什么 是一种用于存储键值对（key-value pair）的数据结构。在哈希表中，通过哈希函数将键（key）映射到数组的某个位置（索引），然后在该位置存储对应的值（value）。 哈希表适用于处理需要根据键快速查找的场景，如数据库索引、缓存等。 哈希表的关键特性： 键的唯一性：每个键在哈希表 阅读全文
摘要：
链表（Linked List）是一种线性数据结构，它由一系列的节点组成，其中每个节点包含两部分： 数据部分：存储节点的实际数据。 指针部分：存储指向下一个节点的引用（或指针）。 与数组不同，链表中的元素不需要在内存中是连续的。每个节点通过指针连接到下一个节点，形成一个链式结构。 链表有多个变种，包括 阅读全文
摘要：
栈（Stack） 栈是一种遵循 后进先出（LIFO, Last In First Out）原则的数据结构。也就是说，最后被放入栈中的元素会最先被取出。 push()：将一个或多个元素添加到数组的末尾，返回新数组的长度。 pop()：移除数组的最后一个元素，并返回该元素。 peek()（自定义方法）： 阅读全文
摘要：
数组中找到两个数，它们的和等于给定的目标值 判断一个字符串是否是回文字符串 二分查找法 快速排序算法 js抽奖算法 js生成指定范围的随机数 深拷贝函数的实现 阅读全文
摘要：
在一个给定的数字数组中找到两个数，它们的和等于给定的目标值。可以通过多种方法来解决这个问题，以下是两种常见且高效的解决方案。 方法 1：使用哈希表 (Set 或 Map) 通过哈希表来存储已经遍历过的数字，利用哈希表的快速查找特性来实现。在遍历数组的同时，检查当前数字与目标值的差值是否已经存在于哈希 阅读全文
摘要：
回文字符串是指正着读和反着读都相同的字符串。比如 "racecar" 或 "level"。 方法 1：使用双指针法 通过使用两个指针，一个指向字符串的开始，另一个指向字符串的结束，逐个比较字符。 function isPalindrome(str) { let left = 0; let right 阅读全文
摘要：
前端中常用的模块格式主要有：CommonJS、ESM、AMD. 模块化方式特点使用场景代码示例 CommonJS 同步加载模块 主要用于 Node.js 环境 服务器端（Node.js）使用 module.exports 或 exports 对外暴露模块 使用require导入模块 const ad 阅读全文
摘要：
React 的 Context API 是 React 提供的一种用于在组件树中共享数据的机制，可以让我们不需要通过 props 一层层地传递数据，避免了在深层嵌套的组件中逐级传递相同的数据 Context API 的核心概念 Context： Context 是 React 提供的对象，它可以在整 阅读全文
摘要：
useReducer 是 React 中用于处理复杂状态逻辑的 Hook。它可以帮助你将一个复杂的状态对象分解成更细粒度的子状态，并通过定义动作（actions）来管理这些状态的变化。 具体来说，useReducer 适用于需要多个子状态或者依赖多个操作的场景。它的核心是通过一个 reducer 函 阅读全文
摘要：
虚拟dom是react的核心概念，它使用js对象来反应真实dom的结构。 当组件的状态变更后，react会计算出新的虚拟dom树，并跟前一次的虚拟dom树进行对比，找出差异（也就是需要更新的部分），最后仅将这些差异应用到真实 DOM 中。通过这种方式，React 避免了对真实 DOM 的频繁操作，从 阅读全文
