npm 包 @jkhong/devutils 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@jkhong/devutils 是一个非常实用的 npm 包，它提供了一系列常用的前端开发工具函数，可以大大提升前端开发效率。

该 npm 包包含了以下几类工具函数：

字符串处理函数
数组处理函数
对象处理函数
日期处理函数
数学计算函数
常见校验函数
浏览器和设备信息获取函数

本文将详细介绍如何在前端项目中使用 @jkhong/devutils 包，并且介绍该包的各种函数的使用方法和示例代码。

安装

使用 npm 安装 @jkhong/devutils 包：

npm install @jkhong/devutils --save-dev

使用

安装后，在代码中引入所需的函数：

import { trim, isMobile } from '@jkhong/devutils';

字符串处理函数

trim

去除字符串两端的空格。

import { trim } from '@jkhong/devutils';

console.log(trim('  hello, world!  ')); // 'hello, world!'

toCamelCase

将字符串转换为驼峰式表示。

import { toCamelCase } from '@jkhong/devutils';

console.log(toCamelCase('hello, world!')); // 'helloWorld'

toPascalCase

将字符串转换为帕斯卡式表示。

import { toPascalCase } from '@jkhong/devutils';

console.log(toPascalCase('hello, world!')); // 'HelloWorld'

toSnakeCase

将字符串转换为蛇形式表示。

import { toSnakeCase } from '@jkhong/devutils';

console.log(toSnakeCase('hello, world!')); // 'hello_world'

数组处理函数

uniqueArray

去除数组中的重复元素。

import { uniqueArray } from '@jkhong/devutils';

console.log(uniqueArray([1, 3, 2, 1, 4, 3])); // [1, 3, 2, 4]

unzip

将一个二维数组转换为两个单独的数组，第一个数组包含原数组中所有的子数组的第一个元素，第二个数组包含原数组中所有的子数组的第二个元素。

import { unzip } from '@jkhong/devutils';

console.log(unzip([[1, 'one'], [2, 'two']])); // [[1,2], ['one', 'two']]

range

生成一个包含某一范围内所有整数的数组。（包括起始值，但不包括结束值）

import { range } from '@jkhong/devutils';

console.log(range(4)); // [0, 1, 2, 3]
console.log(range(1, 5)); // [1, 2, 3, 4]

shuffleArray

将数组随机排序。

import { shuffleArray } from '@jkhong/devutils';

console.log(shuffleArray([1, 2, 3, 4])); // [3, 2, 1, 4]

对象处理函数

cloneDeep

深度复制一个对象。（不会受原对象的修改影响）

-- -------------------- ---- -------
------ - --------- - ---- -------------------

----- ---- - - -- -- -- - -- - - --
----- ---- - ----------------
------------------ -- - -- -- -- - -- - - -

-------- - -- -- -----
------------------ -- - -- -- -- - -- - - -
------------------ -- - -- -- -- - -- - - -展开代码

mergeObject

合并两个对象。

import { mergeObject } from '@jkhong/devutils';

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { b: { d: 3 } };
const obj3 = mergeObject(obj1, obj2);
console.log(obj3); // { a: 1, b: { c: 2, d: 3 } }

日期处理函数

formatDate

将日期格式化为指定格式。

import { formatDate } from '@jkhong/devutils';

const dateStr = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
console.log(dateStr); // '2022-01-17 20:11:34'

daysAgo, weeksAgo, monthsAgo, yearsAgo

获取当前时间之前的若干天/周/月/年的日期。

import { daysAgo, weeksAgo, monthsAgo, yearsAgo } from '@jkhong/devutils';

const date1 = daysAgo(7); // 七天前
const date2 = weeksAgo(2); // 两周前
const date3 = monthsAgo(3); // 三个月前
const date4 = yearsAgo(5); // 五年前

daysLater, weeksLater, monthsLater, yearsLater

获取当前时间之后的若干天/周/月/年的日期。

import { daysLater, weeksLater, monthsLater, yearsLater } from '@jkhong/devutils';

const date1 = daysLater(7); // 七天后
const date2 = weeksLater(2); // 两周后
const date3 = monthsLater(3); // 三个月后
const date4 = yearsLater(5); // 五年后

数学计算函数

randInt

生成指定范围内的随机整数。

import { randInt } from '@jkhong/devutils';

console.log(randInt(10)); // 0 ~ 9 中的一个整数
console.log(randInt(5, 10)); // 5 ~ 9 中的一个整数

add, subtract, multiply, divide

加、减、乘、除四则运算。

import { add, subtract, multiply, divide } from '@jkhong/devutils';

console.log(add(1, 2)); // 3
console.log(subtract(5, 3)); // 2
console.log(multiply(2, 3)); // 6
console.log(divide(6, 2)); // 3

常见校验函数

isMobile

判断是否为手机号码。

import { isMobile } from '@jkhong/devutils';

console.log(isMobile('18012345678')); // true
console.log(isMobile('1301234567')); // false

isEmail

判断是否为电子邮件地址。

import { isEmail } from '@jkhong/devutils';

console.log(isEmail('username@example.com')); // true
console.log(isEmail('user-example.com')); // false

isUrl

判断是否为 URL。

import { isUrl } from '@jkhong/devutils';

console.log(isUrl('https://example.com')); // true
console.log(isUrl('example.com')); // false

浏览器和设备信息获取函数

getCookie

获取指定名称的 cookie 值。

import { getCookie } from '@jkhong/devutils';

console.log(getCookie('name')); // cookie 值

getQueryParams

获取 URL 中的查询参数。

import { getQueryParams } from '@jkhong/devutils';

console.log(getQueryParams('http://example.com/page?a=1&b=2')); // { a: '1', b: '2' }

getUserAgent

获取用户代理字符串。

import { getUserAgent } from '@jkhong/devutils';

console.log(getUserAgent()); // 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36'

isMobileDevice

判断是否为移动设备。

import { isMobileDevice } from '@jkhong/devutils';

console.log(isMobileDevice()); // 是否为移动设备

isWechatBrowser

判断是否在微信浏览器中打开。

import { isWechatBrowser } from '@jkhong/devutils';

console.log(isWechatBrowser()); // 是否在微信浏览器中打开

总结

@jkhong/devutils 是一个极具实用性的前端开发工具包，在前端项目开发中可以提高开发效率。该包中包含了多种常用的工具函数，包括字符串处理函数、数组处理函数、对象处理函数、日期处理函数、数学计算函数、常见校验函数和浏览器和设备信息获取函数。本文中详细介绍了该包的各种函数的使用方法和示例代码，希望能对前端开发者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/100784

npm 包 @jkhong/devutils 使用教程

介绍

安装

使用