# 0216tool\_xiaoye 中文文档 规范地址：https://npmcn.com/package/0216tool_xiaoye/ 版本：1\.2\.0 npm 元数据更新时间：2022-04-04T10:06:45.830Z 中文译文更新时间：2026-10-31T10:54:45.765Z 软件包许可：MIT 本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/0216tool_xiaoye 原文对照：https://npmcn.com/package/0216tool_xiaoye/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：142 kB，56 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：0 个 - 首次发布：2020-12-08T13:17:01.023Z - 最新版本发布：2020-12-12T09:49:08.243Z - 已发布版本数：3（近 12 个月 0 个） ## 中文简介 叶永洁自定义工具函数库 ## 安装 ```sh npm install 0216tool_xiaoye ``` 也可以使用：`pnpm add 0216tool_xiaoye`、`yarn add 0216tool_xiaoye`、`bun add 0216tool_xiaoye` ## README # 工具函数 ## 0\. 工具函数库: lodash ``` 1. 封装了各种类型数据简化操作的函数库 数组 对象 函数 字符串 类型判断 ... 2. 特点: 模块化 函数式 / 声明式 ``` ## 1\. 函数的call() / apply() / bind() ``` 1. 区别call()/apply()/bind() call(obj)/apply(obj): 调用函数, 指定函数中的this为第一个参数的值 bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值 一旦调用新函数, 原函数就会调用, 且tis是bind指定的第一个参数 如果直接调用原函数, this不是bind指定的第一个参数 注意: 如果obj是null/undefined, this为window 2. 应用 call()/apply()应用: 根据伪数组生成真数组 bind(): react中组件的自定义方法 / vue中的事件回调函数内部 3. 自定义call()/apply() 1). 给obj添加一个临时方法, 方法名任意, 值为当前函数 2). 通过obj调用这个临时方法, 并将接收的参数传入 3). 删除obj上的这个临时方法属性 4. 自定义实现bind() 1). 返回一个新函数 2). 在新函数内部通过原函数对象的call方法来执行原函数 指定原函数的this为obj 指定参数为bind调用的参数和后面新函数调用的参数 ``` ## 2\. 函数的节流(throttle)与防抖(debounce) ``` 1. 事件频繁触发可能造成的问题? 1). 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题 2). 如果向后台发送请求，频繁触发，对服务器造成不必要的压力 2. 如何限制事件处理函数频繁调用 1). 函数节流 2). 函数防抖 3. 函数节流(throttle) 1). 理解: 在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次 适合多次事件按时间做平均分配触发 2). 场景： 窗口调整（resize） 页面滚动（scroll） DOM 元素的拖拽功能实现（mousemove） 抢购疯狂点击（click） 4. 函数防抖(debounce) 1). 理解: 在函数需要频繁触发时: 在规定时间内，只让最后一次生效，前面的不生效。 适合多次事件一次响应的情况 2). 场景： 输入框实时搜索联想（keyup/input） ``` ## 3\. 数组声明式系列方法 ``` 1. 区别命令式与声明式 2. 使用数组声明式系列方法 1). map() 2). reduce() 3). filter() 4). find() 5). findIndex() 6). every() 7). some() 3. 自定义数组声明式系列方法 ``` ## 4\. 数组去重(unique) ``` 1. 理解: 根据当前数组产生一个去除重复元素后的新数组 如: [2, 3, 2, 7, 6, 7] ==> [2, 3, 7, 6] 2. 实现: 方法1: 利用forEach()和indexOf() 说明: 本质是双重遍历, 效率差些 方法2: 利用forEach() + 对象容器 说明: 只需一重遍历, 效率高些 方法3: 利用ES6语法: from + Set 或者 ... + Set 说明: 编码简洁 ``` ## 5\. 数组合并(concat)与切片(slice) ``` 1. 合并concat() 语法: var new_array = concat(array, value1[, value2[, ...[, valueN]]]) 功能: 将n个数组或值与当前数组合并生成一个新数组, 原始数组不会被改变 2. 切片slice() 语法: var new_array = slice(array, [begin[, end]]) 功能: 返回一个由 begin 和 end 决定的原数组的浅拷贝, 原始数组不会被改变 ``` ## 6\. 数组扁平化(flatten) ``` 1. 理解: 取出嵌套数组(多维)中的所有元素放到一个新数组(一维)中 如: [1, [3, [2, 4]]] ==> [1, 3, 2, 4] 2. 实现: 方法一: 递归 + reduce() + concat() 方法二: ... + some() + concat() ``` ## 7\. 数组取真与分块 ``` 1. compact(array): 返回数组中所有真值元素组成的新数组 2. chunk(array, size): 将数组拆分成多个 size 长度的区块，每个区块组成小数组,整体组成一个二维数组 ``` ## 8\. 数组取差异与合并 ``` 1. difference(arr1, arr2) 得到当前数组中所有不在arr中的元素组成的数组(不改变原数组) 如: difference([1,3,5,7], [5, 8]) ==> [1, 3, 7] 2. mergeArray(arr1, arr2): 将arr2与arr1的元素进行合并组成一个新的数组(不改变原数组) 如: mergeArray([1,3,5,7], [5, 8]) ==> [1, 3, 5, 7, 8] ``` ## 9\. 删除数组中部分元素 ``` 1. pull(array, ...values): 删除原数组中与value相同的元素, 返回所有删除元素的数组 说明: 原数组发生了改变 如: pull([1,3,5,3,7], 2, 7, 3, 7) ===> 原数组变为[1, 5], 返回值为[3,3,7] 2. pullAll(array, values): 功能与pull一致, 只是参数变为数组 如: pullAll([1,3,5,3,7], [2, 7, 3, 7]) ===> 数组1变为[1, 5], 返回值为[3,3,7] ``` ## 10\. 得到数组的部分元素 ``` 1. drop(array, count): 得到当前数组过滤掉左边count个后剩余元素组成的数组 说明: 不改变当前数组, count默认是1 如: drop([1,3,5,7], 2) ===> [5, 7] 2. dropRight(array, count): 得到当前数组过滤掉右边count个后剩余元素组成的数组 说明: 不改变当前数组, count默认是1 如: dropRight([1,3,5,7], 2) ===> [1, 3] ``` ## 11\. 自定义new和instanceof工具函数 ``` 1. 自定义new工具函数 语法: newInstance(Fn, ...args) 功能: 创建Fn构造函数的实例对象 实现: 创建空对象obj, 调用Fn指定this为obj, 返回obj 2. 自定义instanceof工具函数 语法: myInstanceOf(obj, Type) 功能: 判断obj是否是Type类型的实例 实现: Type的原型对象是否是obj的原型链上的某个对象, 如果是返回tru, 否则返回false ``` ## 12\. 合并多个对象 ``` 语法: object mergeObject(...objs) 功能: 合并多个对象, 返回一个合并后对象(不改变原对象) ``` ## 13\. 对象/数组拷贝 ``` 1. 区别浅拷贝与深拷贝 纯语言表达: 浅拷贝: 只是复制了对象属性或数组元素本身(只是引用地址值) 深拷贝: 不仅复制了对象属性或数组元素本身, 还复制了指向的对象(使用递归) 举例说明: persons拷贝 浅拷贝: 只是拷贝了每个person对象的引用地址值, 每个person对象只有一份 深拷贝: 每个person对象也被复制了一份新的 2. 实现浅拷贝 方法一: 利用ES6语法 方法二: 利用ES5语法 3. 实现深拷贝 1). 大众乞丐版 问题1: 函数属性会丢失 问题2: 循环引用会出错 2). 面试基础版本 解决问题1: 函数属性还没丢失 3). 面试加强版本 解决问题2: 循环引用正常 4). 面试加强版本2(优化遍历性能) 数组: while | for | forEach() 优于 for-in | keys()&forEach() 对象: for-in 与 keys()&forEach() 差不多 ``` ## 14\. 字符串处理的系列方法 ``` 1. 字符串倒序: reverseString(str) 生成一个倒序的字符串 2. 字符串是否是回文: palindrome(str) 如果给定的字符串是回文，则返回 true ；否则返回 false 3. 截取字符串: truncate(str, num) 如果字符串的长度超过了num, 截取前面num长度部分, 并以...结束 ``` ## 15 手写继承 ``` 实现方式: 寄生组合式 1.子类构造函数中使用call借用父类构造函数，得到与父类相同的属性 2.子类指定新的原型对象为父类，得到父类原型上的方法 3.寄生处理： 去除原型对象上多余的属性-->不直接new 父类构造函数 通过指定一个函数的原型对象为父类的原型对象,然后直接new该函数 解决问题: 原型对象有不必要的属性 多调用了1次父类型构造函数 ``` ## 16\. 手写事件总线: event-bus ``` 1. EventBus: 包含所有功能的全局事件总线对象 2. EventBus.on(eventName, listener): 绑定事件监听 3. EventBus.emit(eventName, data): 分发事件 4. EventBus.off(eventName): 解绑事件监听 ``` ## 17\. 手写消息订阅与发布: pub-sub ``` 1. PubSub: 包含所有功能的订阅/发布消息的管理者 1. PubSub.subscribe(msg, subscriber): 订阅消息: 指定消息名和订阅者回调函数 2. PubSub.publish(msg, data): 异步发布消息: 指定消息名和数据 3. PubSub.publishSync(msg, data): 同步发布消息: 指定消息名和数据 4. PubSub.unsubscribe(flag): 取消订阅: 根据标识取消某个或某些消息的订阅 ``` ## 18\. 手写Promise ``` 1. 定义整体结构 2. Promise构造函数的实现 3. promise.then()/catch()的实现 4. Promise.resolve()/reject()的实现 5. Promise.all/race()的实现 6. Promise.resolveDelay()/rejectDelay()的实现 ``` ## 19\. 手写ajax请求函数: axios ``` 1.函数的返回值为promise, 成功的结果为response, 失败的结果为error 2.能处理多种类型的请求: GET/POST/PUT/DELETE 3.函数的参数为一个配置对象 { url: '', // 请求地址 method: '', // 请求方式GET/POST/PUT/DELETE params: {}, // GET/DELETE请求的query参数 data: {}, // POST或DELETE请求的请求体参数 } 4.响应json数据自动解析为js的对象/数组 ``` ## 常见问题 ### 0216tool\_xiaoye 是什么？ 叶永洁自定义工具函数库 ### 如何安装 0216tool\_xiaoye？ 在项目目录运行 npm install 0216tool\_xiaoye，或使用 pnpm add / yarn add / bun add。 ### 0216tool\_xiaoye 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/0216tool\_xiaoye 是否存在。 ### 0216tool\_xiaoye 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### 0216tool\_xiaoye 可以商用吗？ 0216tool\_xiaoye 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### 0216tool\_xiaoye 还在维护吗？ 最新版本 1\.2\.0 发布于 2020/12/12（5 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/12/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。