@klweb/utils
是一个模块化的 JavaScript
工具类库,提供一系列实用的函数和方法,以帮助开发者更高效、更便捷地处理常见的编程任务。
@klweb/utils
涵盖了一系列常用的工具函数,如:
-
字符串处理:用于操作和处理字符串。例如,你可以找到用于切割、连接、搜索和替换字符串的函数。
-
数组操作:对于处理数组,
@klweb/utils
提供了一系列有用的函数,例如排序、过滤、映射等。这些函数可以帮助你轻松地处理数组数据。 -
日期和时间处理:可以帮助你方便地处理日期和时间。
-
文件和流处理:对于需要处理文件或流的场景,这个库提供了一些函数和方法,例如读取文件、写入文件、解析流等。
-
错误处理:提供了一些工具用于错误处理,如捕获异常、生成错误等。
模块化的设计思路,更好的 Tree-Shaking
支持,每个工具函数都作为一个独立的模块提供。这种设计使得开发者可以根据自己的需要选择所需的模块,而不是被迫使用整个库。
防抖函数,在连续执行时只执行最后一次函数。
debounce<T extends (...args: Array<any>) => any>(fn: T, interval?: number): T
在防抖函数中,当连续点击时,会取消之前的等待,重新开始计时。只有在等待时间内没有再次点击,才会执行原函数。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
fn | (...args: Array<any>) => any |
— | 接受一个任意数量、any 类型参数的函数 |
interval | number |
500 | 间隔时间(以毫秒为单位) |
返回一个新函数
import { debounce } from '@klweb/utils'
const func = debounce((arg1, arg2) => console.log(arg1, arg2), 500);
func('Hello', 'KLWeb-Utils!');
func('Hello', 'KLWeb-Utils!');
func('Hello', 'KLWeb-Utils!');
func('Hello', 'KLWeb-Utils!')
// 连续执行只会执行最后一次
// Expected output: Hello KLWeb-Utils!
节流函数,限制函数的执行频率,每经过指定的时间间隔后才执行一次。
throttle<T extends (...args: Array<any>) => any>(fn: T, interval?: number): T
节流函数是一种优化技术,用于限制函数的执行频率。它确保在指定的时间间隔内只执行一次原函数,从而减少频繁调用或连续执行的情况。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
fn | (...args: Array<any>) => any |
— | 接受一个任意数量、any 类型参数的函数 |
interval | number |
1000 | 间隔时间(以毫秒为单位) |
返回一个新函数
import { throttle } from '@klweb/utils'
const func = throttle((arg1, arg2) => console.log(arg1, arg2), 1500);
func('Hello', 'KLWeb-Utils!')
基于 moment.js
的日期时间格式器
dateFormatter(date: DateTypes, pattern?: string, locale?: string): string
moment.js 是一个解析、校验、操作、显示日期和时间的
JavaScript
工具库。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
date | type DateTypes = Date / string / number |
— | 待格式化的日期 |
pattern | string |
YYYY-MM-DD HH:mm:ss |
日期格式规则,更多规则 |
locale | string |
zh-cn |
区域语言 |
返回格式化后的日期
import { dateFormatter } from '@klweb/utils'
const timestamp = 1692080368718;
console.log(dateFormatter(timestamp))
// Expected output: 2023-08-15 14:19:28
console.log(dateFormatter(timestamp, 'HH:mm:ss'))
// Expected output: 14:19:28
获取当前日期时间
getCurrentDateTime(pattern?: string, locale?: string): string
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
pattern | string |
YYYY[年]MM[月]DD[日] dddd HH:mm:ss |
日期格式规则,更多规则 |
locale | string |
zh-cn |
区域语言 |
获取当前日期时间
import { getCurrentDateTime } from '@klweb/utils'
console.log(getCurrentDateTime())
// Expected output: 2023年08月15日 星期二 15:11:50
console.log(getCurrentDateTime('HH:mm:ss'))
// Expected output: 15:13:33
获取浏览器地址栏 URL
所有参数值
getUrlParamsRaw(): Record<string, any>
无
返回一个对象,如果不存在则返回 {}
。
import { getUrlParamsRaw } from '@klweb/utils'
// https://www.klweb.com/index.html?a=1&b=2
const params = getUrlParamsRaw();
console.log(params)
// Expected output: { a: 1, b: 2}
复制文本到剪贴板
copyText(text: string, callback?: () => void): void
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
text | string |
— | 要复制的文本 |
callback | () => void |
— | 回调函数 |
无返回值
import { copyText } from '@klweb/utils'
const text = '这是一段测试文本';
copyText(text, () => {
console.log('Text successfully written to clipboard')
})
HTML
转义符(HTML
标签转换为对应的 HTML
实体)。
htmlToEscape(htmlText: string): string
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
htmlText | string |
— | 待转义的 HTML 代码文本 |
返回处理后的 HTML
代码文本
import { htmlToEscape } from '@klweb/utils'
const htmlText = `<p>这是一段测试代码</p>`;
console.log(htmlToEscape(htmlText))
// Expected output: "<p>这是一段测试代码</p>"
HTML
反转义符(HTML
实体转换为对应的 HTML
标签)。
escapeToHtml(htmlText: string): string
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
htmlText | string |
— | 待转义的 HTML 代码文本 |
返回处理后的 HTML
代码文本
import { escapeToHtml } from '@klweb/utils'
const htmlText = `<p>这是一段测试代码</p>`;
console.log(escapeToHtml(htmlText))
// Expected output: "<p>这是一段测试代码</p>"
数组求和
sumArray(array: number[]): number
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
array | Array<number> |
— | 要进行求和的数组数字 |
返回总和值
import { sumArray } from '@klweb/utils'
const array = [2, 4, 5, 23, 100];
const total = sumArray(array);
console.log(total)
// Expected output: 134
根据给定的谓词函数过滤数组元素。filterArray
,它是一个泛型函数,可以处理任意类型的数组。
filterArray<T>(array: T[], predicate: (item: T) => boolean): T[]
函数内部调用了数组的 filter
方法,将谓词函数作为参数传入,对数组进行过滤操作。
名称 |
类型 |
默认值 |
描述 |
---|---|---|---|
array | Array<T> |
— | 要进行过滤的数组 |
predicate | (item: T) => boolean |
— | 用于判断数组元素是否符合条件的谓词函数。它接受一个类型为 T 的参数,返回一个布尔值,用于判断数组元素是否符合条件。 |
返回过滤后的数组
import { filterArray } from '@klweb/utils'
const items = [1, 2, 3, 4, 5];
const evenNumbers = filterArray(items, item => item % 2 === 0);
console.log(evenNumbers)
// Expected output: [2, 4]
数组元素映射。mapArray
,它是一个泛型函数,可以处理任意类型的数组。
mapArray<T, U>(array: T[], mapper: (item: T) => U): U[]
函数内部调用了数组的 map
方法,将映射函数 mapper
作为参数传入,对数组进行映射操作。
名称 |
类型 |
默认值 |
描述 |
---|---|---|---|
array | Array<T> |
— | 要进行映射的数组 |
mapper | (item: T) => U): U[] |
— | 将数组元素映射为新值的函数。它将一个类型为 T 的元素映射为类型为 U 的新值,其中 T 和 U 是两个不同的类型。 |
返回映射后的新数组
import { mapArray } from '@klweb/utils'
const names = ['Alice', 'Bob', 'Charlie'];
const capitalizedNames = mapArray(names, name => name.toUpperCase());
console.log(capitalizedNames)
// Expected output: ['ALICE', 'BOB', 'CHARLIE']
查找数组中符合条件的元素。findArray
,它是一个泛型函数,可以处理任意类型的数组。
findArray<T>(array: T[], predicate: (item: T) => boolean): T | undefined
函数内部使用 for...of
循环遍历数组中的每个元素,并调用 predicate
函数进行条件判断。
名称 |
类型 |
默认值 |
描述 |
---|---|---|---|
array | Array<T> |
— | 要进行查找的数组 |
predicate | (item: T) => boolean |
— | 用于判断元素是否符合条件的函数,接受一个类型为 T 的参数,返回一个布尔值。 |
返回值是一个类型为 T
| undefined
的值,如果找到了符合条件的元素,则返回该元素,否则返回 undefined
。
import { findArray } from '@klweb/utils'
const list = [1, 2, 3, 4, 5];
const foundNumber = findArray(list, number => number === 3);
console.log(foundNumber)
// Expected output: 3
去除数组中的重复元素,并返回新的数组。
uniqueArray<T>(array: T[]): T[]
函数内部使用 Set
数据结构来存储去重后的元素(因为 Set
会自动去除重复的键值),最后将 Set
对象转换为数组并返回。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
array | Array<T> |
— | 待处理的数组 |
返回处理后的新数组,不包含重复元素。
import { uniqueArray } from '@klweb/utils'
const items = [1, 2, 2, 3, 4, 4, 5];
const uniqueItems = uniqueArray(items);
console.log(uniqueItems)
// Expected output: [1, 2, 3, 4, 5]
去除数组对象中给定键名存在重复值的对象,并返回新的数组。
uniqueArrayOfObjectByKey<T extends Record<string, any>>(array: T[], key: keyof T): T[]
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
array | Array<T> |
— | 待处理的数组 |
key | keyof T |
— | 对象键名 |
返回处理后的新数组
import { uniqueArrayOfObjectByKey } from '@klweb/utils'
const items = [
{ name: '张三', age: 24 },
{ name: '李四', age: 18 },
{ name: '张三', age: 24 },
{ name: '王五', age: 31 }
];
const uniqueItems = uniqueArrayOfObjectByKey(items, 'name');
console.log(uniqueItems)
// Expected output:
// [{ name: '张三', age: 24 }, { name: '李四', age: 18 }, { name: '王五', age: 31 }]
数组排序,支持中英文、数字排序。
sortArray(array: Array<any>, order?: Order): Array<any>
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
array | Array<any> |
— | 待排序的数组 |
order | type Order = 'ascend' / 'descend' |
ascend |
排序方式,升序:ascend ,降序:descend
|
返回处理后的新数组
import { sortArray } from '@klweb/utils'
// 按字母 A-Z 排序
const arr1 = ['b', 'D', 'A', 'c'];
const sortArr1 = sortArray(arr1);
console.log(sortArr1)
// Expected output: ['A', 'b', 'c', 'D']
// 按数字排序
const arr2 = [3, 2, 1, 4];
const sortArr2 = sortArray(arr2);
console.log(sortArr2)
// Expected output: [1, 2, 3, 4]
// 按中文排序
const arr3 = ['白雪', '阿力', '陈九'];
const sortArr3 = sortArray(arr3);
console.log(sortArr3)
// Expected output: ['阿力', '白雪', '陈九']
数组对象按给定键名的值排序,支持中英文、数字。
sortArrayOfObjectByKey<T extends Record<string, any>>(array: Array<T>, key: keyof T, order?: Order): Array<T>
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
array | Array<T> |
— | 待排序的数组 |
key | keyof T |
— | 对象键名 |
order | type Order = 'ascend' / 'descend' |
ascend |
排序方式,升序:ascend ,降序:descend
|
返回处理后的新数组
import { sortArrayOfObjectByKey } from '@klweb/utils'
// 按字母 A-Z 排序
const arr1 = [
{ letter: 'b'},
{ letter: 'D'},
{ letter: 'A'},
{ letter: 'c'},
];
const sortArr1 = sortArrayOfObjectByKey(arr1, 'letter');
console.log(sortArr1)
// Expected output: [{ letter: 'A'}, { letter: 'b'}, { letter: 'C'}, { letter: 'D'}]
// 按数字排序
const arr2 = [
{ num: 3},
{ num: 2},
{ num: 1},
{ num: 4},
];
const sortArr2 = sortArrayOfObjectByKey(arr2, 'num');
console.log(sortArr2)
// Expected output: [{ num: 1 }, { num: 2}, { num: 3}, { num: 4}]
// 按中文排序
const arr3 = [
{ name: '白雪'},
{ name: '阿力'},
{ name: '陈九'},
];
const sortArr3 = sortArrayOfObjectByKey(arr3, 'name');
console.log(sortArr3)
// Expected output: [{ name: '阿力'}, { name: '白雪'}, { name: '陈九'}]
深拷贝函数。
deepCopy<T>(obj: T): T
该函数实现了深拷贝的功能,可以处理数组和对象的深度复制,避免了在复制过程中出现循环引用的问题。同时,使用类型断言来确保返回值的类型与输入的类型一致。
名称 |
类型 |
默认值 |
描述 |
---|---|---|---|
obj | <T> |
— | 要复制的类型,接受一个泛型参数 T 。如果传入的是数组,则使用 map() 方法递归复制每个元素;如果传入的是对象,则遍历每个属性并递归复制属性值;如果是其他类型,则直接返回该值。 |
返回新数组、对象或原始值
import { deepCopy } from '@klweb/utils'
const obj = {
a: 1,
b: 2,
d: {
a: 5,
b: 0
}
};
const newObj = deepCopy(obj);
console.log(newObj)
// Expected output: { a: 1, b: 2, d: { a: 5, b: 0 } }
深度合并对象
deepMerge<T extends Record<string, any>>(...objects: Array<T>): T
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
objects | ...objects: Array<T> |
— | 对象数组 |
返回新对象
import { deepMerge } from '@klweb/utils'
const obj1 = {
a: 1,
b: 2,
d: {
a: 5,
b: 0
}
};
const obj2 = {
a: 4,
c: 3,
d: {
a: 2,
b: 1
}
};
const mergeObj = deepMerge(obj1, obj2);
console.log(mergeObj)
// Expected output: { a: 4, b: 2, c: 3, d: { a: 2, b: 1 } }
密封一个对象,阻止其扩展并且原有属性不可配置,但属性值仍可写入。
sealMerge<T extends Record<string, any>>(target: T, source: T): void
使用场景:
object1
和object2
两个对象进行合并,object1
中的属性不可配置也不可扩展,只会合并object2
中的与object1
具有相同属性名的值,object2
中的其它键值不会合并到object1
中。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
target | object |
— | 要处理的目标对象 |
source | object |
— | 来源对象 |
无返回值
import { sealMerge } from '@klweb/utils'
const obj1 = {
a: 1,
b: 2
};
const obj2 = {
a: 4,
b: 8,
c: 3,
d: 6
};
sealMerge(obj1, obj2);
console.log(obj1)
// Expected output: { a: 4, b: 8 }
设置 Cookie
setCookie(key: string, value: string, expire?: number): void
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
key | string |
— | 键名 |
value | string |
— | 键值 |
expire | number |
— | 过期天数,如:7
|
无返回值
import { setCookie } from '@klweb/utils'
setCookie('sid', 'xxxxx', 7)
读取 Cookie
getCookie(key: string): string
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
key | string |
— | 键名 |
返回给定 key
的值
import { getCookie } from '@klweb/utils'
const sid = getCookie('sid')
console.log(sid)
// Expected output: xxxxx
删除 Cookie
removeCookie(key: string): void
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
key | string |
— | 键名 |
无返回值
import { removeCookie } from '@klweb/utils'
removeCookie('sid')
随机生成 HEX
十六进制颜色值
randomHexColor(): string
无
返回十六进制色值
import { randomHexColor } from '@klweb/utils'
console.log(randomHexColor())
// Expected output: #ff03cc
console.log(randomHexColor())
// Expected output: #ba0efc
HEX
颜色 转 RGB
颜色
hexToRgb(hexColor: string): string
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
hexColor | string |
— |
HEX 十六进制颜色 |
返回 RGB
颜色
import { hexToRgb } from '@klweb/utils'
const rgb = hexToRgb('#ffffff');
console.log(rgb)
// Expected output: rgb(255, 255, 255)
RGB
颜色 转 HEX
颜色
rgbToHex(r: number, g: number, b: number): string
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
r | number |
— | 红,正整数(0 - 255) |
g | number |
— | 绿,正整数(0 - 255) |
b | number |
— | 蓝,正整数(0 - 255) |
返回 HEX
颜色
import { rgbToHex } from '@klweb/utils'
const hex = rgbToHex(255, 255, 255);
console.log(hex)
// Expected output: #ffffff
未完待续...