作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
邮箱 ：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/130460102
模块 npm 地址：https://www.npmjs.com/package/@jcstdio/jc-utils

1. 介绍 与 安装

1.1 介绍

这个模块是我的个人工具模块，用于记录和收集各种用于 JavaScript/TypeScript 中的编程小工具。这些小工具来源于日常的开发或者阅读源码等待不同场景下的总结，即相当于我的笔记本，也是我用于真实项目中直接拿来用的工具。这些工具都比较小，故而放在一起。也欢迎读者朋友参与维护，一起添加更多的小工具。

1.2 安装（npm、yarn、pnpm）

npm i @jcstdio/jc-utils
# or
yarn add @jcstdio/jc-utils
# or
pnpm i @jcstdio/jc-utils

2. 判断工具（isXXX）

// 如：
import { isBoolean } from '@jcstdio/jc-utils'

第一组 isXXX 工具

这一部分多数是类型相关的判断，但也有例外。

第二组 isXXX 工具：字符串匹配

这一组 isXXX 工具主要是通过正则表达式来检测是否是某个格式的字符串。这些工具是笔者个人觉得可能用得更多的，你也可以通过 12. 正则与正则工具 中现成的正则表达式变量来快速封装（使用正则对象的 test 方法）。

3. 事件发布器 - Event.EventEmitter

import { EventEmitter } from '@jcstdio/jc-utils'

4. 状态管理器 - Event.StateManager

import { StateManager } from '@jcstdio/jc-utils'

const stateManager = new StateManager<{
    value:number
}>({ value: 0, });

const sideEffec1 = (state: { value: any; }) => {
    console.log('我是 sideEffec1 ，状态被更新，当前状态值为：', state.value);
}

const sideEffec2 = () => {
  console.log('我是 sideEffec2 ，执行顺序为执行 “subscribe” 方法的顺序。')
}

// 设置状态更新后的回调，可以采用链式调用
stateManager
  .subscribe(sideEffec1)
  .subscribe(sideEffec2)

// 更新你的状态
console.log('------- 第一次改变状态 -------');
stateManager.state = { value: 1 };

console.log('\n------- 第二次改变状态 -------');
stateManager
  .unsubscribe(sideEffec2)  // 取消状态发生改变时订阅的 sideEffec2。
  .state = { value: 2 };    // 指挥执行没有被取消的订阅

------- 第一次改变状态 -------
我是 sideEffec1 ，状态被更新，当前状态值为： 1
我是 sideEffec2 ，执行顺序为执行 “subscribe” 方法的顺序。

------- 第二次改变状态 -------
我是 sideEffec1 ，状态被更新，当前状态值为： 2

5. 动画工具

// JQuery
$(".btn1").click(function(){
  $("p").slideUp();
});

$("button").click(function(){
$("p").slideDown();
});

<template>
<ul @click="$event=>callBack()" ref="ulRef">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue';
import type { ComponentInternalInstance } from 'vue;
import { slideUp, slideDown, slideToggle } from '@jcstdio/jc-utils'


const that = getCurrentInstance() as ComponentInternalInstance;

let callBack: () => void;

onMounted(()=>{
  const ulRef; = that.refs.ulRef as HTMLElement;
  callBack = () => {
    slideToggle(navRef);
  };
})
</script>

6. 日志器工具：Logger

import { Logger } from '@jcstdio/jc-utils'

const logger = new Logger('')
logger.trace('trace')
logger.debug('debug')
logger.info('info')
logger.success('success')
logger.warn('warn')
logger.error('error')
logger.fatal('fatal')
logger.level1('level1')
logger.level2('level2')
logger.level3('level3')
logger.gradient('geadientText')

7. 配置文件工具：

7.1 ini 配置文件读取器：IniConfig

import { IniConfig } from '@jcstdio/jc-utils'

该工具的类型签名为：

declare class IniConfig {
    private _filePath;
    private _conf;
    constructor(_filePath?: string);
    get value(): Record<string, Record<string, any>>;
    load(obj: Record<string, Record<string, any>>): void;
    readSync<T>(filePath?: string): this;
    static format<U = Record<string, Record<string, any>>>(obj: U): string;
    private _farmat;
    writeSync(filePath?: string): void;
    addSection<V extends Record<string, any>>(section: string, records: V): this;
    addRecord<V>(section: string, key: string, value: V): this;
    getSection(section?: string): Record<string, any>;
    get(section?: string, key?: string): any;
    private __str__;
    print(): this;
}

7.2 env 配日志文件读取器：getEnvs

import { getEnvs } from '@jcstdio/jc-utils'

该工具的类型签名为：

declare function getEnvs<T>(envFilePath: string, regExp?: RegExp, parse?: (right: string) => T): Record<string, T>;

8. 缓存工具

8.1 cookie 工具：Cookies

import { Cookies } from '@jcstdio/jc-utils'

let cookies = new Cookies();

Cookie 对象的类型签名为：

declare class Cookies {
    /**
     * 添加新的 cookie
     * @param name cookie 名称
     * @param value cookie 值
     * @param options cookie 选项
     */
    set(name: string, value: string, options?: {
        expires?: number;
        path?: string;
    }): void;
    /**
     * 获取指定名称的 cookie
     * @param name cookie 名称
     * @returns cookie 值
     */
    get(name: string): string | undefined;
    /**
     * 删除指定名称的 cookie
     * @param name cookie 名称
     */
    remove(name: string): void;
    /**删除所有的 cookie*/
    clear(): void;
    /**
     * 返回所有 cookie 键值对构成的 Map
     * @returns cookie 键值对构成的 Map
     */
    getMap(): Map<string, string>;
    /**
     * 返回指定 cookie 是否存在
     * @param name cookie 名称
     * @returns 是否存在
     */
    has(name: string): boolean;
    /**
     * 将指定 cookie 键值对写入 localStorage
     * @param name cookie 名称
     */
    copyToLocal(name: string): void;
    /**
     * 将指定 cookie 键值对写入 localStorage，并从 cookie 中删除
     * @param name cookie 名称
     */
    moveToLocal(name: string): void;
    /**
     * 从 localStorage 读取指定键值对，改写到 cookie，并从 localStorage  中删除
     * @param name cookie 名称
     */
    moveFromLocal(name: string): void;
    /**
     * 从 localStorage 读取指定键值对，改写到 cookie
     * @param name cookie 名称
     */
    copyFromLocal(name: string): void;
}

9. 拷贝工具

import { copy } from '@jcstdio/jc-utils'

// 浅拷贝
const obj1 = {a: 1, b: {c: 2}};
const shallowCopyObj1 = copy.shallowCopy(obj1);
console.log(shallowCopyObj1); // {a: 1, b: {c: 2}}
console.log(shallowCopyObj1.b === obj1.b); // true

// 使用 deepCopy 方法深拷贝 （递归复制嵌套对象实现）
const obj2 = {a: 1, b: {c: 2}};
const deepCopyObj2 = copy.deepCopy(obj2);
console.log(deepCopyObj2); // {a: 1, b: {c: 2}}
console.log(deepCopyObj2.b === obj2.b); // false

// 使用 serializeCopy 方法深拷贝 （使用JSON序列化和反序列化实现）
const obj3 = {a: 1, b: {c: 2}};
const serializeCopyObj3 = copy.serializeCopy(obj3);
console.log(serializeCopyObj3); // {a: 1, b: {c: 2}}
console.log(serializeCopyObj3.b === obj3.b); // false

10. vite 相关工具

环境变量筛选：wrapperEnv

这个函数可以帮助你加载带有给定前缀的env值。

// vite.config.ts
import { wrapperEnv } from '@jcstdio/jc-utils'

const ENV_DIR = path.join(__dirname, "envs");

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, ENV_DIR, "");
  const viteEnv = wrapperEnv(env);
  console.log((`[vite config] viteEnv founded: ${JSON.stringify(viteEnv)}`));
  return {
    // vite configs
	// ...
  }
})

11. 数学计算相关工具

等差数列工具：arithmeticProgression

用于构造一个等差数列数组

import { arithmeticProgression } from '@jcstdio/jc-utils'

arithmeticProgression(1,9,3);    // [ 1, 3, 5, 7, 9 ]
arithmeticProgression(9,1,3);    // [ 9, 7, 5, 3, 1 ]
arithmeticProgression(-9,-1,3);  // [ -9, -7, -5, -3, -1 ]
arithmeticProgression(-1,-9,3);  // [ -1, -3, -5, -7, -9 ]
arithmeticProgression(-1,-9,0);  // [ -1, -9 ]
arithmeticProgression(1,1,3);    // [ 1, 1, 1, 1, 1 ]

等间隔序列生成器：range

该工具受启发于 Python 中提供的 range 函数。在本模块中，range 是一系列重载的序列生成器，返回一个数组。

range 工具的类型签名如下：

declare function range(x: number): number[];
declare function range(x: [number]): number[];
declare function range(x: [number, number]): number[];
declare function range(x: [number, number, number]): number[];

例如：

import { range } from '@jcstdio/jc-utils'

range([0, 3]);    // [0，1，2]
range(3);         // 相当于 range([0, 3])，[0，1，2]
range([3]);       // 相当于 range(3)，   [0，1，2]
range([4, 8, 1]); // [4, 5, 6, 7]， 其中最后一个数表示间隔
range([4, 8, 2]); // [4, 6]
range([4, 8]);    // 相当于 range([4, 8, 1])，[4, 5, 6, 7]

12. 正则与正则工具

import { regIp } from '@jcstdio/jc-utils'

12.1 网络相关正则表达式

12.2 字符格式相关正则表达式

12.3 标签、各种文本相关正则表达式

12.4 日期时间相关正则表达式

12.5 数字相关正则表达式

12.6 颜色相关正则表达式

12.7 电话号码、邮编相关正则表达式

12.8 互联网账号相关正则表达式

12.9 证件号码相关正则表达式

12.10 工具函数：regTestAll

regTestAll 函数接收一组正则表达式和一个字符串。当所有的正则表达式都在该字符串上 test 成功时返回 ture，否则返回 false。该函数的类型签名为：

declare function regTestAll(regs: RegExp[], text: string, debug?: boolean): boolean;

12.10 工具函数：regTestAny

regTestAll 函数接收一组正则表达式和一个字符串。当任意一个正则表达式都在该字符串上 test 成功时返回 ture，全部test失败时返回 false。该函数的类型签名为：

declare function regTestAny(regs: RegExp[], text: string, debug?: boolean): boolean;

13. 数据容器工具

13.1 双链表容器： LinkedList 类

LinkedList 是一个使用 ListNode 类作为节点的 双链表，这两个类的类型签名为：

declare class ListNode<T> {
    value: T;
    next: ListNode<T> | null;
    prev: ListNode<T> | null;
    constructor(value: T);
}
declare class LinkedList<T> {
    private _head;
    private _tail;
    private _count;
    constructor(...params: T[]);
    /**获取头节点*/
    get head(): ListNode<T>;
    /**获取尾节点*/
    get tail(): ListNode<T>;
    /**链表的长度*/
    get length(): number;
   /**
    * 在链表尾部添加节点
    * @param value 节点的值
    */
    push(value: T): void;
    /**
   * append 的别名方法
   * @param value 节点的值
   */
    append(value: T): void;
    /**
   * 在链表头部添加节点
   * @param value 节点的值
   */
    pushLeft(value: T): void;
    /**
   * addpenLeft的别名方法
   * @param value 节点的值
   */
    appendLeft(value: T): void;
    /**
   * 删除链表尾部节点
   * @returns 被删除的节点的值
   */
    pop(): T | null;
    /**
   * 在链表头部添加节点
   * @param value 节点的值
   */
    unshift(value: T): void;
    /**
   * 清空链表
   */
    clear(): void;
    /**
   * 删除指定节点
   * @param node 要删除的节点
   * @returns 被删除的节点的值
   */
    remove(node: ListNode<T>): T | null;
    /**
   * 删除指定位置的节点
   * @param index 要删除的节点的位置
   * @returns 被删除的节点的值
   */
    drop(index: number): T | null;
    /**
   * 对该链表进行切片，返回新的 LinkedList
   * @param start 切片的起始元素索引（包含）
   * @param end 切片的结束元素索引（不包含）
   */
    slice(start: number, end: number): LinkedList<T>;
    /**
   * 如果LinkedList元素都为 number 时，用于与另外一个 LinkedList 元素对应相加，得到新的LinkedList返回。
   * 如果 LinkedList 元素都为 string 时，则返回对应字符串元素拼接组成的新LinkedList
   * @param list 要相加或拼接对应元素的 LinkedList
   * @returns 相加或拼接对应元素后的新 LinkedList
   */
    add(list: LinkedList<T>): LinkedList<T>;
    /**
   * 获取指定位置的节点的值
   * @param index 节点的位置
   * @returns 节点的值
   */
    get(index: number): T | null;
    /**
   * 判断链表中是否包含指定的值
   * @param value 要查找的值
   * @returns 是否包含指定的值
   */
    includes(value: T): boolean;
    /**
   * includes 的别名方法
   * @param value 要查找的值
   * @returns 是否包含指定的值
   */
    contains(value: T): boolean;
    /**
   * 过滤链表中的节点
   * @param callback 过滤函数
   * @returns 过滤后的链表
   */
    filter(callback: (value: T) => boolean): LinkedList<T>;
    /**
   * 映射链表中的节点
   * @param callback 映射函数
   * @returns 映射后的链表
   */
    map<U>(callback: (value: T) => U): LinkedList<U>;
    private _quickSort;
    /**
   * 对链表进行快速排序
   */
    sort(): void;
    /**
   * 对链表元素进行反转
   */
    reverse(): void;
}

List 类

基于该 双端链表封装了一个 列表类 List。其类型签名如下：

declare class List<T> {
    private _list;
    constructor(...params: T[]);
    get value(): LinkedList<T>;
    set value(list: LinkedList<T>);
   /**
     * 在列表尾部添加元素
     * @param value 元素的值
     */
    push(value: T): void;
    /**
     * 在内部，如果LinkedList元素都为 number 时，用于与另外一个 LinkedList 元素对应相加，得到新的LinkedList返回。 如果 LinkedList 元素都为 string 时，则返回对应字符串元素拼接组成的新LinkedList
     */
    add(value: LinkedList<T>): void;
    /**
     * append的别名方法
     * @param value 元素的值
     */
    append(value: T): void;
    /**
     * 在列表头部添加元素
     * @param value 元素的值
     */
    unshift(value: T): void;
    /**
     * addpenLeft的别名方法
     * @param value 元素的值
     */
    appendLeft(value: T): void;
    /**
     * 删除列表尾部元素
     * @returns 被删除的元素的值
     */
    pop(): T | null;
    /**
     * 清空列表
     */
    clear(): void;
    /**
     * 删除指定位置的元素
     * @param index 要删除的元素的位置
     * @returns 被删除的元素的值
     */
    remove(index: number): T | null;
    /**
     * 获取指定位置的元素的值
     * @param index 元素的位置
     * @returns 元素的值
     */
    get(index: number): T | null;
    /**
     * 判断列表中是否包含指定的值
     * @param value 要查找的值
     * @returns 是否包含指定的值
     */
    includes(value: T): boolean;
    /**
     * contains的别名方法
     * @param value 要查找的值
     * @returns 是否包含指定的值
     */
    contains(value: T): boolean;
    /**
     * 过滤列表中的元素
     * @param callback 过滤函数
     * @returns 过滤后的列表
     */
    filter(callback: (value: T) => boolean): List<T>;
    /**
     * 映射列表中的元素
     * @param callback 映射函数
     * @returns 映射后的列表
     */
    map<U>(callback: (value: T) => U): List<U>;
    /**
     * 获取指定范围内的元素组成的新列表
     * @param start 起始位置（包含）
     * @param end 结束位置（不包含）
     * @returns 新列表
     */
    slice(start: number, end: number): List<T>;
    /**
     * 纯基于整数位置的索引，用于按位置选择。
     * @param index 元素的位置
     * @returns 元素的值
     */
    iloc(index: number): T | null;
    /**
     * 所有元素为number时，用于求和，所有元素为string时用于字符串拼接
     * @returns 求和或字符串拼接的结果
     */
    sum(): number | string;
    /**
     * 所有元素为number时返回最小值
     * @returns 最小值
     */
    min(): number | null;
    /**
     * 所有元素为number时返回最大值
     * @returns 最大值
     */
    max(): number | null;
    /**
     * 所有元素为number时返回平均值
     * @returns 平均值
     */
    mean(): number | null;
    /**
     * 所有元素为number时返回样本标准差
     * @returns 样本标准差
     */
    std(): number | null;
    /**
     * 所有元素为number时返回无偏方差
     * @returns 无偏方差
     */
    var(): number | null;
    /**
     * 所有元素为number时返回所有该LinkedList元素绝对值构成的新LinkedList
     * @returns 所有元素绝对值构成的新LinkedList
     */
    abs(): List<number>;
    /**
     * 就地排序
     */
    sort(): void;
    /**
     * 列表的长度
     */
    get length(): number;
    /**
     * 列表的长度
     * - length 的同名 Getter.
     */
    get size(): number;
    /**
     * 实现该类的迭代器
     */
    [Symbol.iterator](): Iterator<T>;
}

13.2 一个受 pandas、danfojs 启发的序列：Series 类

declare class Series {
    private _data;
    private _index;
    private columns;
    private dtypes;
    constructor(data: any[], options?: {
        columns?: any[];
        dtypes?: any[];
        index?: any[];
    });
    get shape(): number[];
    get size(): number;
    get data(): any[];
    /**返回序列和其他元素的加法(二元运算符add)*/
    add(other: Series, options?: any): Series;
    /**返回 Series 和其他元素的减法(二元运算符sub)*/
    sub(other: Series, options?: any): Series;
    /**返回 Series 和其他元素的乘法运算(二元运算符mul)*/
    mul(other: Series, options?: any): Series;
    /**返回 Series 和其他元素的浮点除法(二元运算符truediv)*/
    div(other: Series, options?: any): Series;
    /**返回 Series 和其他元素的模(二元运算符mod)*/
    mod(other: Series, options?: any): Series;
    /**返回级数和其他元素的指数幂(二元运算符pow)*/
    pow(other: Series, options?: any): Series;
    /**舍入 Series 中的浮点值*/
    round(dp: number, options?: any): Series;
    /**检查 Series 中的所有值是否都小于某个值*/
    lt(other: any, options?: any): boolean;
    /**返回 Series 和其他元素的大于(二元运算符gt)*/
    gt(other: Series, options?: any): Series;
    /**按元素返回小于或等于of的 Series 和other(二元运算符le)*/
    le(other: Series, options?: any): Series;
    /**检查 Series 中的所有值是否都大于或等于某个值*/
    ge(other: any, options?: any): boolean;
    /**返回不等于系列和其他元素的值(二元运算符ne)*/
    ne(other: Series, options?: any): Series;
    /**返回等于系列和其他元素的值(二元运算符eq)*/
    eq(other: Series, options?: any): Series;
    /**对Series中的每个值调用函数*/
    apply(callable: Function, options?: any): Series;
    /**将Series的值映射到函数或对象*/
    map(callable: Function): Series;
    /**返回删除了缺失值的新Series*/
    dropNa(options?: any): Series;
    /**使用指定的方法填充NaN值*/
    fillNa(options?: any): Series;
    /**检测缺失值*/
    isNa(): boolean;
    /**替换值*/
    replace(oldValue: any, newValue: any, options?: any): Series;
    /**返回Series和其他Series之间的逻辑或*/
    or(other: Series): Series;
    /**返回Series和其他Series之间的逻辑与*/
    and(other: Series): Series;
    /**返回对Series值进行排序的整数索引*/
    argSort(options?: any): any[];
    /**返回 Series 中最小值的位置*/
    argMin(): number;
    /**返回 Series 中最大值的位置*/
    argMax(options?: any): number;
    /**按值排序*/
    sortValues(options?: any): Series;
    /**
    将系列打印到控制台。
    注意：这个方法的实现还有些问题，待之后想办法改改。
    */
    print(...params: any[]): void;
}

14.杂项

14.1 对应于 Omit<T, K> 类型工具 的 omit 函数

TypeScript 中提供了一个内置的类型工具 Omit<T, K>：
（这里推荐阅读我的另外一篇博客《小结：近五十个常用 TypeScript类型工具 的声明、描述、用法示例》）

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

如：

interface User {
  name: string;
  age: number;
  email: string;
}

type UserWithoutEmail = Omit<User, 'email'>;

其中的 UserWithoutEmail 相当于：

{
  name: string;
  age: number;
}

也就是当我们从一个类型构造另外一个类型时，排除了某个属性。在 @jcstdio/jc-utils 模块中提供了一个对应于该类型工具的 omit 函数可以直接拿来用.该工具的类型签名如下：

declare function omit<T, K extends keyof T>(obj: T, key: K): Omit<T, K>;

14.2 空操作：noop、pass

这两个函数的类型签名为：

declare const noop: (...params: any) => void;
declare const pass: (param?: string) => void;