goodbai-utils

v0.2.4

Published

4 months ago

- js工具包，由`ts`编写，已生成`.d.ts`文件，使用时会有智能提示 - 提供了一些除`lodash`以外可能用到的函数工具 - 使用ES模块，支持`tree shaking` - 已用于生产，请放心食用~✌️ - 文档地址：<a href="https://gitee.com/web-dacheng/npm-utils">使用文档地址</a>

Downloads

0High
0Medium
0Low

goodbai_

简介

js工具包，由ts编写，已生成.d.ts文件，使用时会有智能提示
提供了一些除lodash以外可能用到的函数工具
使用ES模块，支持tree shaking
已用于生产，请放心食用~✌️
文档地址：使用文档地址

安装

可以通过 npm 或 yarn 或 pnpm来安装 goodbai-utils

npm install goodbai-utils
# 或
yarn add goodbai-utils
# 或
pnpm install goodbai-utils

更新为最新版本，包名后面加@latest

# pnpm示例
pnpm install goodbai-utils@latest

使用

guid

随机生成唯一值，比如id

import { guid } from 'goodbai-utils';
console.log(guid()); // 'f47ac10b-58cc-4372-a567-0e02b2c3d479'
console.log(guid()); // 'd21d33f1-15a6-4f90-8253-91237df1aabd'

loadingPromise

该函数用于延迟执行，可用于模拟接口等待
在数组中随机取一个时间执行setTimeout，完成后返回Promise.resolve()

参数

timeArr (可选): 默认值[100, 150, 200, 300, 400, 450, 500, 600]

import { loadingPromise } from 'goodbai-utils';
// Vue3 table-Loading等待接口请求完成
tableLoading.value = true
await loadingPromise()
tableLoading.value = false

tableLoading.value = true
await loadingPromise([1000, 2000])
tableLoading.value = false

findTreeAncestors

用于在树形结构中查找指定属性的所有祖先属性值
返回一个祖先属性值组成的数组，顺序为根节点到目标节点的顺序
默认包含自身节点，可以通过设置includeSelf参数为false来排除自身节点
4个参数可能有点多，可以结合柯里化函数curryingFn使用

参数

treeData: 树形数据数组
key: 属性键名
val: 属性值
includeSelf (可选): 是否包含自身节点，默认为 true

import { findTreeAncestors } from 'goodbai-utils';
const treeData = [
  {
    id: '1',
    name: 'Parent',
    children: [
      {
        id: '2',
        name: 'Child',
        children: [
          {
            id: '3',
            name: 'Grandchild'
          }
        ]
      },
    ]
  }
];
console.log(findTreeAncestors(treeData, 'id', '3'));  // ['1', '2', '3']
console.log(findTreeAncestors(treeData, 'id', '3', false));  // ['1','2']
console.log(findTreeAncestors(treeData, 'name', 'Grandchild'));  // ['Parent','Child','Grandchild']

rmDuplicatesByKey

对象组成的数组去重
返回去重后的新数组

参数

arr: 需要去重的数组
key: 根据哪个key去重，比如id

import { rmDuplicatesByKey } from 'goodbai-utils';
const data = [
  { id: '1', value: 'A' },
  { id: '2', value: 'B' },
  { id: '1', value: 'B' }, // 重复项
];
console.log(rmDuplicatesByKey(data, 'id')); // [{ id: '1', value: 'A' }, { id: '2', value: 'B' }]

matchArrayObj

数组匹配指定属性-获取对象
返回匹配到的object 或 undefined

参数

arr: 目标数组
key: 匹配属性
val: 匹配值

import { matchArrayObj } from 'goodbai-utils';
const data = [
  { id: 1, value: 'A' },
  { id: 2, value: 'B' },
];
console.log(matchArrayObj(data, 'id', 1)); // { id: 1, value: 'A' }
console.log(matchArrayObj(data, 'id', 3)); // undefined

matchArrayObjValue

根据指定属性匹配数组对象的目标属性值
返回匹配到的目标属性值或 undefined
4个参数可能有点多，可以结合柯里化函数curryingFn使用

参数

targetArr: 目标数组
searchKey: 匹配属性key
val: 匹配值
returnKey: 目标属性key

import { matchArrayObjValue } from 'goodbai-utils';
const data = [
  { id: 1, value: 'A' },
  { id: 2, value: 'B' },
];
console.log(matchArrayObjValue(data, 'id', 1, 'value')); // 'A'
console.log(matchArrayObjValue(data, 'id', 1, 'label')); // undefined
console.log(matchArrayObjValue(data, 'id', 3, 'value')); // undefined

curryingFn

柯里化函数
当参数数量符合目标函数参数数量时返回函数执行结果，否则返回目标函数(此时只需传递剩余参数即可)

参数

fn: 目标函数
otherArgs: 目标函数参数

import { curryingFn,matchArrayObjValue } from 'goodbai-utils';
// 创建求和函数
const sumFn = (a, b, c) => a + b + c
console.log(curryingFn(sumFn, 1, 2, 3)) // 6
console.log(curryingFn(sumFn, 1, 2)(3)) // 6
console.log(curryingFn(sumFn, 1)(2)(3)) // 6
console.log(curryingFn(sumFn)(1)(2)(3)) // 6

const data = [
  { id: 1, value: 'A' },
  { id: 2, value: 'B' },
];
// 使用匹配数组对象的函数
const newFn1 = curryingFn(matchArrayObjValue, data, 'id');
console.log(newFn1(1, 'value')); // 'A'
console.log(newFn1(1, 'label')); // undefined
console.log(newFn1(3, 'value')); // undefined

const newFn2 = curryingFn(matchArrayObjValue, data, 'id',1);
console.log(newFn2('value')); // 'A'
console.log(newFn2('label')); // undefined

// 如果涉及this指向
const person = {
  name: '小明',
  say: function (prefix) {
    console.log(`${prefix}, 我的姓名是: ${this?.name}`);
  }
};
curryingFn(person.say, 'Hello');  // Hello, 我的姓名是: undefined
// 使用bind()解决this指向问题
curryingFn(person.say.bind(person), 'Hello'); // Hello, 我的姓名是: 小明

matchArrayObjValById

根据id匹配数组对象的目标属性值
返回匹配到的目标属性值或 undefined

参数

targetArr: 目标数组
val: 匹配值
returnKey: 目标属性key

import { matchArrayObjValById } from 'goodbai-utils';
const data = [
  { id: 1, value: 'A' },
  { id: 2, value: 'B' },
];
console.log(matchArrayObjValById(data, 1, 'value')); // 'A'
console.log(matchArrayObjValById(data, 1, 'label')); // undefined
console.log(matchArrayObjValById(data, 3, 'value')); // undefined

matchArrayObjLabelById

根据id匹配数组对象的label属性值
返回匹配到的label属性值或 undefined

参数

targetArr: 目标数组
val: 匹配值

import { matchArrayObjLabelById } from 'goodbai-utils';
const data = [
  { id: 1, label: 'A' },
  { id: 2, label: 'B' },
];
console.log(matchArrayObjLabelById(data, 1)); // 'A'
console.log(matchArrayObjLabelById(data, 3)); // undefined

matchArrayObjValByValue

根据value匹配数组对象的目标属性值
返回匹配到的目标属性值或 undefined

参数

targetArr: 目标数组
val: 匹配值
returnKey: 目标属性key

import { matchArrayObjValByValue } from 'goodbai-utils';
const data = [
  { value: 1, label: 'A' },
  { value: 2, label: 'B' },
];
console.log(matchArrayObjValByValue(data, 1, 'label')); // 'A'
console.log(matchArrayObjValByValue(data, 1, 'title')); // undefined
console.log(matchArrayObjValByValue(data, 3, 'label')); // undefined

matchArrayObjLabelByValue

根据value匹配数组对象的label属性值
返回匹配到的label属性值或 undefined

参数

targetArr: 目标数组
val: 匹配值

import { matchArrayObjLabelByValue } from 'goodbai-utils';
const data = [
  { value: 1, label: 'A' },
  { value: 2, label: 'B' },
];
console.log(matchArrayObjLabelByValue(data, 1)); // 'A'
console.log(matchArrayObjLabelByValue(data, 3)); // undefined

matchArrayObjValByKey

根据key匹配数组对象的目标属性值
返回匹配到的目标属性值或 undefined

参数

targetArr: 目标数组
key: 匹配值
returnKey: 目标属性key

import { matchArrayObjValByKey } from 'goodbai-utils';
const data = [
  { key: 1, label: 'A' },
  { key: 2, label: 'B' },
];
console.log(matchArrayObjValByKey(data, 1, 'label')); // 'A'
console.log(matchArrayObjValByKey(data, 1, 'title')); // undefined
console.log(matchArrayObjValByKey(data, 3, 'label')); // undefined

matchArrayObjLabelByKey

根据key匹配数组对象的label属性值
返回匹配到的label属性值或 undefined

参数

targetArr: 目标数组
key: 匹配值

import { matchArrayObjLabelByKey } from 'goodbai-utils';
const data = [
  { key: 1, label: 'A' },
  { key: 2, label: 'B' },
];
console.log(matchArrayObjLabelByKey(data, 1)); // 'A'
console.log(matchArrayObjLabelByKey(data, 3)); // undefined

findObjectInTreeArr

在树结构中查找指定属性值所在的对象
返回指定属性值所在的对象或 null

参数

targetArr: 目标数组
key: 指定属性名
val: 指定属性值

import { findObjectInTreeArr } from 'goodbai-utils';
const treeData = [
  {
    id: '1',
    name: 'Parent',
    children: [
      {
        id: '2',
        name: 'Child',
        children: [
          {
            id: '3',
            name: 'Grandchild'
          }
        ]
      },
    ]
  }
];
console.log(findObjectInTreeArr(treeData, 'id', '3'));  // {id:'3',name: 'Grandchild'}
console.log(findObjectInTreeArr(treeData, 'name', 'Grandchild'));  // {id:'3',name: 'Grandchild'}
console.log(findObjectInTreeArr(treeData, 'id', '4'));  // null

formatNumberAsCurrency

数字格式化-添加千位分隔符
如果参数是非NaN的数字返回格式化后的字符串否则返回null

参数

val: 需要进行格式化的数字
separator: 指定分隔符

import { formatNumberAsCurrency } from 'goodbai-utils';
console.log(formatNumberAsCurrency(1234567));       // 1,234,567
console.log(formatNumberAsCurrency(1234567,'-'));   // 1-234-567
console.log(formatNumberAsCurrency(0.123456));      // 0.123456
console.log(formatNumberAsCurrency(-1234567.08));   // -1,234,567.08
console.log(formatNumberAsCurrency(0));             // 0
console.log(formatNumberAsCurrency('0'));           // null
console.log(formatNumberAsCurrency(NaN));           // null
console.log(formatNumberAsCurrency(null));          // null